フロントエンド、バックエンド、データベース、Dockerを用いたWebアプリケーションを作成しながら、Webアプリケーションの作成に必要な知識を身につけることを目指します。できるだけモダンな技術を用いながらコンパクトにまとめているのが特徴です。
またリンターやフォーマッターの設定、APIドキュメントの作成等、チームで開発する上でも重要になるツールの設定も行います。

エッセンシャル フルスタックエンジニア ~フロントエンド・バックエンド編~

はじめに

[フロントエンド] アプリケーション概要

[フロントエンド] Node.jsのインストール

[フロントエンド] Next.jsアプリケーションのスターターコードの作成

[フロントエンド] リンターとフォーマッターの適用

[フロントエンド] 記事一覧画面の実装

[フロントエンド] MSWによるAPIモックの作成

[フロントエンド] SWRによるAPI実行

[フロントエンド] ヘッダーの作成

[フロントエンド] 記事作成画面の実装

[フロントエンド] Recoilによる状態管理

[フロントエンド] 記事詳細/編集画面の実装

[フロントエンド] ログイン画面の実装

[フロントエンド] 認証情報(トークン)の管理

[フロントエンド] まとめ

[バックエンド] アプリケーション概要

[バックエンド] Pipenvのインストール

[バックエンド] Dockerのインストール

[バックエンド] Flaskアプリケーションのスターターコードの作成

[バックエンド] リンターとフォーマッターの適用

[バックエンド] Dockerコンテナを用いたデータベースの導入

[バックエンド] データベース設計

[バックエンド] SQLAlchemyの導入

[バックエンド] PynamoDBの導入

[バックエンド] Flask CLIによるDBの初期化

[バックエンド] API設計

[バックエンド] ユーザー登録APIの実装

[バックエンド] ログインAPIの実装

[バックエンド] 記事投稿APIの実装

[バックエンド] 記事取得APIの実装

[バックエンド] 記事編集APIの実装

[バックエンド] 記事一覧APIの実装

[バックエンド] まとめ

[仕上げ] フロントエンド/バックエンドの統合

[仕上げ] フロントエンドのDocker化

[仕上げ] バックエンドのDocker化

[仕上げ] docker composeによるアプリケーションの実行

まとめ

改訂履歴

docker

frontend

backend

soichiro.fujioka