2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ

Post on:2020年9月17日

Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。

8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。
バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。

オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ

8 Projects with modern designs to become a Full-stack Master 2020
by Thu Nghiem

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

Web開発のスキルを磨くための教材を探していますか？
新しいアイデアを思いつくのに行き詰まっていますか？
デベロッパーとしてわたし達はコーディングをするのが大好きですが、作業するデザインやアイデアを見つけるのが難しい時があります。

こんにちは、私はThuといいます。この数ヵ月、私は8つの実在するプロジェクトに取り組んできました。そして、あなたがフルスタックマスターの開発者になるために必要なスキルを練習するのに役立つ8つの異なるプロジェクトを設計しました。

ここで紹介するプロジェクトにより、開発業務における一通りの需要に応えられるような知識・スキルを身につけ、フルスタック開発者になることができます。

Image Uploader

画像のアップローダーアプリ

Image Uploader

何を学べるか

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

レベル

  • フロントエンド:⭐⭐
  • バックエンド　:⭐⭐⭐

My Unsplash

サイトのキャプチャ

My Unsplash

何を学べるか

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

また、Unsplashと同様の画像グリッドを作成する方法も学びます。

レベル

  • フロントエンド:⭐⭐⭐⭐
  • バックエンド　:⭐⭐⭐⭐

CatWiki

サイトのキャプチャ

CatWiki

何を学べるか

あなたは、ネコ好きですか？ 外部APIを使用してネコのデータを取得し、ユーザーの行動を追跡するAPIを構築します。また、検索やフィルタリングがバックエンドでどのように機能するかの仕組みも学びます。

ネコ😺がたくさんのレイアウトで、フロントエンドのスキルも磨くことができるプロジェクトです。

レベル

  • フロントエンド:😺😺😺😺
  • バックエンド　:😺😺😺😺

Authentication App

サイトのキャプチャ

Authentication App

何を学べるか

バックエンドやフルスタックの開発者であれば、ユーザーと認証を扱わなければならないことを避けられません。このプロジェクトでは、ユーザー認証とユーザーデータを処理するためのシンプルで強力なアプリケーションを学び、構築します。

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

レベル

  • フロントエンド:⭐⭐
  • バックエンド　:⭐⭐⭐⭐

Shoppingify

サイトのキャプチャ

Shoppingify

何を学べるか

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

このプロジェクトではレスポンシブ対応の複雑なレイアウトを作成するため、フロントエンドのスキルも高いレベルで学ぶことができます。

レベル

  • フロントエンド:🛒🛒🛒🛒🛒
  • バックエンド　:🛒🛒🛒🛒

Chat Group

サイトのキャプチャ

Chat Group

何を学べるか

私は以前からチャットアプリを構築したいと思っていたのですが、実際にやってみたら超楽しかったです。このプロジェクトでは、複数のチャットグループに対応したアプリを構築します。あなたはリアルタイムデータベースについて学びます。また、websocket、socketioなどのテクノロジーにも慣れることができます。

さらに、認証アプリを統合することで、ユーザーの管理、グループへの追加、メッセージの処理などの方法も学ぶことができます。

また、シンプルですがそれほどシンプルではないUIを作成します😆

レベル

  • フロントエンド:💬💬💬
  • バックエンド　:💬💬💬💬

Tweeter - Twitter Clone

サイトのキャプチャ

Tweeter - Twitter Clone

何を学べるか

シンプルで洗練されたこのUI、大好きです。
Twitterを再現できれば何でもできると言っています😬

このプロジェクトでは、FacebookやTwitterのようなプロフィールを作成します。フォロワーとフォローのシステムの作り方を学びます。また、新しいツイートを投稿する方法、ツイートにコメントを加える方法も学びます。異なるツイートタイプをフィルタリングする方法なども。

これは間違いなく今まで最も困難なプロジェクトの1つになると思います。しかし、たくさんのことを学べることを約束します😎

レベル

  • フロントエンド:⭐⭐⭐⭐⭐
  • バックエンド　:⭐⭐⭐⭐⭐

Thullo - Trello Clone

サイトのキャプチャ

Thullo - Trello Clone

何を学べるか

いよいよ最後のプロジェクトです。しかし、あなたに言わなければならないことがあります。このプロジェクトは、めちゃくちゃ難易度が高いです😅
あなたはこのプロジェクトでたくさんのことを学ぶでしょう。

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

フロントエンドでは、しばらくの間悩まされるドラッグアンドドロップ機能を作成します😜

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

このプロジェクトには他にもまだまだあります。しかし、それらはあなたに見つけてもらいましょう😋

レベル

  • フロントエンド:⭐⭐⭐⭐⭐
  • バックエンド　:⭐⭐⭐⭐⭐

終わりに

ここで紹介したすべてのプロジェクトは、DevChallenges.ioで見つけることができます。これらのプロジェクトが開発者だけでなく、デザイナーにもインスピレーションを与えることを願っています。

アップデートをチェックしたい時は、私をフォローしてください。

sponsors

top of page

©2024 coliss