フルスタックエンジニアになるためのモダンな8つのプロジェクト

こんにちは、たかとーです。
今日は[8 Projects with modern designs to become a Full-stack Master 2020](https://dev.to/nghiemthu/8-projects-with-modern-designs-to-become-a-full-stack-master-2020-14j9)の日本語訳記事です！
*当記事は、[Thu](https://twitter.com/thunghiemdinh)さんの許可を得て翻訳しています。

**[ブログ](https://jp.taishikato.com/posts/8-modern-projects-to-become-fullstack-engineer)でも読めます！**

---

# 8 Projects with modern designs to become a Full-stack Master

自分のスキルを磨くためのプロジェクトを探していますか？新しいアイデアを思いつくのに行き詰っていませんか？

開発者として、私たちはコードを書くのが大好きですが、デザインやアイデアを見つけるのが難しいことがあります。

こんにちは、[Thu](https://dev.to/nghiemthu)です。ここ数ヶ月、私はデザインや要件を含む8つの実在するプロジェクトの作成に取り組んできました。

私は、あなたがスーパースターなフルスタックデベロッパーになるために必要な全てのスキルを鍛錬するのに役立つ8つのプロジェクトを用意しました。

これらのプロジェクトに取り組むことで、あなたは優れたポートフォリオを構築し、フルスタックマスターになれるでしょう。

## [1. Image Uploader](https://devchallenges.io/challenges/O2iGT9yBd6xZBrOcVirx)

![Image Uploader](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/25eb5e1c-06e1-0c71-4879-2e4c1f66da27.png)

### 練習項目
私がいつも恐れているものを開発していただきます。それは、画像アップローダーアプリです。フロントエンドから写真をアップロードする方法、データベースにファイルを保存する方法、簡単なAPIを構築する方法を学びます。

### レベル
Front-end: ⭐⭐
Back-end: ⭐⭐⭐

## [2. My Unsplash](https://devchallenges.io/challenges/rYyhwJAxMfES5jNQ9YsP)

![My Unsplash](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/97fbbad9-f235-1e0a-dc28-484b08954339.png)


### 練習項目
基本的なAPIの機能（RESTful APIでのGET、POST、PUT、DELETEなど）を構築する方法を学びます。

また、Unsplashのような画像グリッドの作り方も学びます。

### レベル
Front-end: ⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐

## [3. CatWiki](https://devchallenges.io/challenges/f4NJ53rcfgrP6sBMD2jt)

![CatWiki](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/df402fb4-ab7d-72b6-2839-7e9be2c4c620.png)


### 練習項目
猫は大好きですか？外部APIを使用して猫のデータを取得し、ユーザーの行動を追跡するAPIを構築します。また、バックエンドでの検索やフィルタリングの仕組みを練習します。

このプロジェクトでは、猫だらけのレイアウトであなたのフロントエンドのスキルをテストします。

### レベル
Front-end: ⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐

## [4. Authentication App](https://devchallenges.io/challenges/N1fvBjQfhlkctmwj1tnw)

![Authentication App](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/b2650e62-31b6-dea9-0b48-b26bd5d0cef1.png)

### 練習項目
バックエンドやフルスタックの開発者であれば、ユーザーデータや認証を扱うことは避けられません。このプロジェクトでは、ユーザー認証とユーザーデータを扱うシンプルながらも強力なアプリケーションを学び、構築していきます。

このプロジェクトは、今後のプロジェクトの基礎にもなります。

### レベル
Front-end: ⭐⭐
Back-end: ⭐⭐⭐⭐

## [5. Shoppingify](https://devchallenges.io/challenges/mGd5VpbO4JnzU6I9l96x)

![Shoppingify](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/d71f18a8-f354-c960-bb33-00e8a15c38b3.png)

### 練習項目
ECアプリを構築するのは本当に大仕事です。しかし、もしあなたが練習をしたいのであれば、Shoppingifyは良いスタートになります。このプロジェクトは認証を必要としませんが、ECサイトが持っているほぼすべての機能を持っています。ショッピングカートの構築、新しいアイテムの追加、アイテムの編集、履歴やデータの管理などを学ぶことができます。

このプロジェクトでは、複雑で反応の良いレイアウトを作成するので、あなたのフロントエンドのスキルが高いレベルで試されます。


### レベル
Front-end: ⭐⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐

## [6. Chat Group](https://devchallenges.io/challenges/UgCqszKR7Q7oqb4kRfI0)

![Chat Group](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/3e5e1b6f-b278-27b4-6b47-0e37ba94cf5b.png)

### 練習項目
以前からチャットアプリを作りたいと思っていたのですが、やってみたら超楽しかったです。この課題では、複数のチャットグループアプリケーションを構築します。あなたはリアルタイムデータベースだけでなく、websocket、socketioのような技術にも精通するようになるかも知れません…。

認証アプリケーションを統合することで、ユーザーを管理する方法、グループに追加する方法、メッセージを処理する方法などを学びます。

また、シンプルだけどシンプルじゃないUIを構築していくことになるでしょう😆。

### レベル
Front-end: ⭐⭐⭐
Back-end: ⭐⭐⭐⭐


## [7. Tweeter - Twitter Clone](https://devchallenges.io/challenges/rleoQc34THclWx1cFFKH)

![Tweeter - Twitter Clone](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/b6f3dca2-b1b7-d88f-fc28-9120c3ba5b29.png)


### 練習項目
このUI、シンプルでスッキリしていて大好きです。

ここで言っておきますが、Twitterを再現することができれば、あなたは何でもできます😬。

今回のプロジェクトでは、Facebook、Twitterと同じようなプロフィールを作成します。フォロー・フォロワーの仕組み」の作り方を学びます。

また、新しいツイートを投稿したり、コメントを付けたりする方法も学びます。ツイートの種類に応じたフィルターのかけ方なども…。

これは間違いなく今までで最もチャレンジングなプロジェクトの一つです。しかし、あなたが多くのことを学ぶことを約束します 😎

### レベル
Front-end: ⭐⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐⭐

## 8. [Thullo - Trello Clone](https://devchallenges.io/challenges/wP0LbGgEeKhpFHUpPpDh)

![Thullo - Trello Clone](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/9f3c348a-9c94-a2fe-14ae-606b2b3d6c00.png)


### 練習項目
そうですよね...もうこの記事では最後の挑戦になってしまいました。でも、言っておかないといけないことがあるんです。このプロジェクトは、私がデザインするにしても、めちゃくちゃ難易度高いんですよ😅。

このプロジェクトでは、何百万ものことが行われているので、何千ものことを学ぶことができます。

チーム、プロジェクト、カード、リストなどの作成方法を学び、同時にユーザーはそれらを編集したり削除したりできるようになります。

フロントエンドでは、ドラッグ＆ドロップ機能を作成します。

コメントやアップロードなどのトリッキーな機能も作成します。

他にもまだまだあります。見極めていきましょう😋。

### レベル
Front-end: ⭐⭐⭐⭐⭐
Back-end: ⭐⭐⭐⭐⭐

# 訳者感想

面白そうなプロジェクトが揃いましたね！
自分はSNSのような2C向けサービスが好きなので、Twitterクローン、チャットアプリがとても気になりました！正直この2つを再現できるようになればWebアプリに関しては何でもできるようになるのでは？と思いました。

自分もいくつか挑戦してみたいと思います！

素晴らしい記事をありがとうございました [Thu](https://twitter.com/thunghiemdinh)🔥

## 訳者について

2019年5月よりバンクーバーを拠点に移し、現在スタートアップの開始に向けて試行錯誤しているソフトウェアでデベロッパーです。

近頃は、VCの方と話しながらアイディアのブラッシュアップなどを行いながらMVPの検証を進めています。

フリーランス案件も募集し始めました！React、NodeJs、TypeScript等フロント、バックエンド問わず行えます。是非宜しくお願い致します。

もしよろしければ、以下SNSもよろしく願いします！

**Twitter: [@taishikat0_Ja](https://twitter.com/taishikat0_Ja)**
**Note: [日本人でも英語圏で戦えることを証明したい。28歳が会社を辞め、個人開発者としてカナダでひたすらもがき続けた一年間とこれから](https://note.com/taishikato/n/n57159df89908)**
**Linkedin: [Taishi Kato](https://www.linkedin.com/in/takato0903/)**