ポートフォリオ(成果物)

アプリ成果物

自作Webアプリケーションの紹介

※下記に記載のイナコーWeb掲示板はソースの有料配布を行いました。

サムネール Webアプリ名/機能 技術スタック

正式運用版イナコー掲示板
イナコーWeb掲示板React版を更に改良して一般運用できるまでに成長

書き込み自由なサンプルURL:https://inako-system.com/sample

管理者のメッセージ修正/削除機能。パスワード及びアクセスユーザID暗号化。アクセストークン制御。CORS対応。実際のユーザ登録。メール認証機能。スレッド機能。レス機能。タイトル検索。ページ制でなく、無限スクロールでページ送りする。完全レスポンシブ。新規書き込みを管理者にメール通知
(パス[test1234]でログイン可能)

C# ASP.NET WebAPI(.NET 8)
RestfulAPI(GET/POST/PUT/PATCH/DELETE)
React.js(Vite使用Redux)
TypeScript
Tailwind CSS
HTML/CSS
EntityFrameworkCore
PostgreSQL
Heroku / firebase


↑サムネクリックで動作を見ることができます

海外旅行向けWebアプリ(※Udemy動画教材のリファクタリング

備わってる機能
スライダー。スクロール監視でアクション

記事:https://lightning-shine.com/post3966/
のUdemy教材(JavaScript)で作ったWeb画面をReact仕様にリファクタリングしたもの

React.js
スライダー
スクロール監視
アニメーション


↑サムネクリックで動作を見ることができます

DiscordクローンWebアプリ(※Udemy動画教材

https://discord-clone-e62d4.firebaseapp.com/

備わってる機能
チャンネルの新規作成。チャンネル内メッセージ送信。Googleアカウントログイン、ログアウト機能。リアルタイム更新

React.js
material-UI
React-Redux
TypeScript
Sass型CSS
firebase(Hosting/FireStore/Authentication)


↑サムネクリックで動作を見ることができます

 ツイッタークローンWebアプリ(※Udemy動画教材

https://twitter-clone-udemy-1b70e.web.app/

備わってる機能
真ん中のツイート機能。画像URL貼り付け。右に本物のツイッターウィジェット。リアルタイム更新

React.js
material-UI
firebase(Hosting/FireStore)

↑サムネクリックで動作を見ることができます

TrelloクローンWebアプリ(※Udemy動画教材


備わってる機能
親タスクの追加と削除。小タスクの追加と削除。タスク毎のドラッグ&ドロップによる入れ替え

React.js
ドラッグ&ドロップ専用ライブラリ


↑サムネクリックで動作を見ることができます

イナコーWeb掲示板React版(レスポンシブ)

※HerokuのDBが有料になってしまったため、サンプル公開場所は別途考えます

備わっている機能

管理者のメッセージ修正/削除機能
運用バージョンはもっとセキュリティ、使い勝手の向上を目指す予定

C# ASP.NET WebAPI(.NET 8)
RestfulAPI(GET/POST/PUT/DELETE)
React.js(Vite使用。UseEffect/UseState/Fetch API)
Tailwind CSS
HTML/CSS
EntityFrameworkCore
SQL Server

イナコーWeb掲示板(レスポンシブ)

※HerokuのDBが有料になってしまったため、サンプル公開場所は別途考えます

備わっている機能

XSS/CSRF 対策
名前のCookie保存
管理者のメッセージ修正/削除機能
(ユーザ:guest / パス1234でログイン可能)

C# ASP.NET MVC(.NET 6)
PostgreSQL
HTML/CSS
EntityFrameworkCore
BootStrap
MDBootStrap
Razor
Heroku

ポケモン図鑑アプリ(※Udemy動画教材

解説:PokeAPIのGETメソッドを使ってJSONデータ取得したものを表示するだけの簡易Webアプリケーション

備わっている機能

・前へ/次へ のページング機能

記事:https://lightning-shine.com/post6427/

React.js
Visual Stdio Code
HTML/CSS

ブログアプリ(※Udemy動画教材

解説:ブログというよりは簡易掲示板のようなもの。メッセージの更新はできないがアカウント毎で削除は可能。また、ログインしないと記事は投稿できない。

備わっている機能

・ローカルストレージを使ったログイン中保持機能
・アカウント毎のメッセージ削除機能

記事:https://lightning-shine.com/post6427/

React.js
Visual Stdio Code
HTML/CSS
firebase Console(Googleアカウントでログイン可能)

ノートアプリ(※Udemy動画教材

解説:ノートの追加/保存/編集/削除を行える。

備わっている機能

・ローカルストレージを使ったノート保存機能
・マークダウン言語を使用可能

記事:https://lightning-shine.com/post6427/

React.js
Vite
Visual Stdio Code
HTML/CSS

ブログ記事執筆(企業案件)

企業様からのレビュー依頼対象のブログの紹介です。

株式会社onepen 様

株式会社グロースバリュ 様

スーパーメッセージ履歴

スーパーメッセージ

スーパーメッセージ(スパメ)を頂いた実績。スパメの詳細は上記ボタンをご確認ください。

日付 名前 オプション 運営サイト・SNS 頂いた金額
2023/1/31 サンプルユーザ1 \100
2023/1/31 匿名希望 YouTubeチャンネルやブログ、SNSなどのURLがあれば掲載 \550
2023/1/31 サンプルユーザ2 記事へのリンクを掲載 YouTubeチャンネルやブログ、SNSなどのURLがあれば掲載 \3000
2023/1/31 サンプルユーザ3 記事へのリンクを掲載
・スポンサーバナー表示
YouTubeチャンネルやブログ、SNSなどのURLがあれば掲載 \5000
2023/1/31 サンプルユーザ4

記事へのリンクを掲載
・スポンサーバナー表示
・サポート中

YouTubeチャンネルやブログ、SNSなどのURLがあれば掲載 \10000

※掲載例(最初の一人の実績ができるまで配置してますw 最初の実績ができたらスパメ紹介ページに移動予定)