2021年に作るべき7つのフルスタックプロジェクト

以下はHenry Boisdequin( [dev.to](https://dev.to/hb) / [Twitter](https://twitter.com/henryboisdequin) / [GitHub](https://github.com/henryboisdequin) )による記事、[7 Fullstack Projects You Need to Make in 2021](https://dev.to/hb/7-fullstack-projects-you-need-to-make-in-2021-bdn)の日本語訳です。

---

どのようなフルスタックプロジェクトを作るべきか？
もしこのような疑問を持ち続けているのであれば、あなたは正しい場所にいます。
私は、2021年に作るべき7つのフルスタックプロジェクトのリストをまとめました。
早速、挑戦してみましょう！


# E-commerce Site
![](https://res.cloudinary.com/practicaldev/image/fetch/s---g_FJGC1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--PR1XXFoD--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/0mib6tkfppfvnw9udd2e.jpg)
Eコマースサイトとは、ユーザーが商品を購入できるサイトのことです（例：Amazon、eBayなど）。
Eコマースサイトを作ることで、セキュリティ、CRUD、データベース、フロントエンドフレームワーク、状態管理など、APIやウェブサイトを作るためのあらゆる部分について学ぶことができます。
これは、フルスタックのWeb開発をマスターしたい人にとって、最適なプロジェクトです。

私の場合、技術スタックは以下のようになります：

- Svelte
- Node.js + Express
- TypeScript
- PostgreSQL

[チュートリアル](https://youtu.be/Fy9SdZLBTOo) (行き詰まった時のために)


# Social Media App
![](https://res.cloudinary.com/practicaldev/image/fetch/s--SToBpeJH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/h97o3w571aunb25zv91m.jpg)
ソーシャルメディアアプリはユーザーがオンライン上で交流できるアプリのことです（例：Instagram、Twitter、Facebookなど）。
ソーシャルメディアアプリの構築は、パフォーマンス、セキュリティ、アプリの外観を最適化して、ユーザーにとって魅力的なプラットフォームを作る方法を習得するのに最適な方法です。

私の場合、技術スタックは以下のようになります：

- Flutter
- Node.js + Express
- MongoDB

[チュートリアル](https://youtu.be/m_u6P5k0vP0)（行き詰まった時のために）


# Blog Site
![](https://res.cloudinary.com/practicaldev/image/fetch/s--WIDgSUNc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xdt5p789e4u8om2lyk1f.jpg)
[dev.to](https://dev.to/)のようなブログサイトを作ろう！
ユーザーが自分の知識を他人と共有できるサイトを作ります。
これを行うことで、コンテンツ管理、API構築、CRUDなどについて学ぶことができます。

私の場合、技術スタックは以下のようになります：

- Next.js
- Chakra UI + Tailwind CSS
- Node.js + Express
- PostgreSQL
- Redis

[チュートリアル](https://youtu.be/I6ypD7qv3Z8)（行き詰まった時のために）


# Todo List
![](https://res.cloudinary.com/practicaldev/image/fetch/s--YVnFoves--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/58iz6vvc55xcw92ke8ob.png)
Todoリストは、定番のフルスタックプロジェクトです。
このプロジェクトは、このリストの中で最も初心者向けのプロジェクトです。
ユーザーがログインして、リスト形式でTodoアイテムを追加・削除できるサイトを作ります。
このプロジェクトでは、認証、CRUD、データベースなどについて学ぶことができます。

私の場合、技術スタックは以下のようになります：

- Svelte
- Flask
- PostgreSQL

[チュートリアル](https://youtu.be/a5DX5pQ9p5M)（行き詰まった時のために）


# Workout Tracker
![](https://res.cloudinary.com/practicaldev/image/fetch/s--H9WcaEMh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/q3mvkigc2jwd7z1z25eo.jpg)
このプロジェクトは、リストの中でも特に気に入っている1つです。
ユーザーが完了したワークアウトを保存できるアプリを作成します。
これにより、フルスタック開発全般について学ぶことができます：例えば、認証、セキュリティ、CRUD、フロントエンドフレームワークなど。

私の場合、技術スタックは以下のようになります：

- Vue.js
- Django
- Mongo DB

[チュートリアル](https://youtu.be/_CBYbEGvxYY) (行き詰まった時のために)


# Chat App
![](https://res.cloudinary.com/practicaldev/image/fetch/s--SckNqYGg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lqbwy3xh140wq3x5cii5.png)
今、誰もが話題にしているフルスタックのプロジェクトです。
このプロジェクトでは、ユーザーがプライベートでチャットしたり、グループでチャットしたりできるウェブサイトを作成します。
このプロジェクトでは、リアルタイムのデータ転送、フロントエンドのフレームワーク、認証、セキュリティなどを学ぶことができます。

私の場合、技術スタックは以下のようになります：

- React.js
- Firebase + Firestore

[チュートリアル](https://youtu.be/pUxrDcITyjg)（行き詰まった時のために）


# Zoom Clone
![](https://res.cloudinary.com/practicaldev/image/fetch/s--torP3eqc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/l5huv3lopn4j2lfv2s0r.jpg)
2020年、Zoomは世界に旋風を巻き起こしました。
私の知っている人は皆、仕事、学校、付き合い、運動など、生活のあらゆる場面でZoomを使っています。
ここでの課題は、webcomを使ってチャットができる「Zoom Clone」を作ることです。
このプロジェクトは、初心者の方にぜひおすすめしたいですね。

私の場合、技術スタックは以下のようになります：

- WebRTC
- socket.io

[チュートリアル](https://youtu.be/DvlyzDZDEq4)（行き詰まった時のために）

---

あなたがこれらのプロジェクトに取り組んでいくことを祈っています。
また、最近取り組んでいるフルスタックプロジェクトを教えてください、ぜひ拝見したいです！
お読みいただきありがとうございました。

Henry