/projectlearn-project-based-learning

A curated list of project tutorials for project-based learning.

Primary LanguageJavaScriptMIT LicenseMIT

ProjectLearn

ProjectLearn is released under the MIT license. PRs welcome! follow on Twitter

Tutorials are great, but building projects is the best way to learn. Do project based learning and learn code the right way!

ProjectLearn provides a curated list of project tutorials in which learners build an application from scratch. These are divided into different categories, namely, web development, mobile development, game development, machine learning, deep learning and artificial intelligence.

The list has project tutorials on many in-demand languages and technologies including ReactJS, NodeJS, VueJS, Flutter, React Native, .NET Core, Unity, TensorFlow, OpenCV, Keras, and more.

To contribute to this list, head over to CONTRIBUTE.md for more details :)

List of Project Tutorials:

Web Development:

Project Technologies Link
Build a YouTube Clone with React Express, Node, JavaScript, HTML, CSS Link
Create a Diverging Bar Chart with a JavaScript Charting Library JavaScript, HTML, CSS Link
Learn CSS Basics by Building a Card Component HTML, CSS Link
Create a Serverless Meme as a Service JavaScript, Rust, CSS, HTML Link
Weather forecast website JavaScript, HTML, CSS, React Link
Link shortener website JavaScript, Vue, HTML, CSS, React Link
Personal website SEO setup JavaScript, Google Analytics, HTML, CSS Link
Simple web contact form PHP, HTML, CSS Link
Plagiarism checker website Python, Bootstrap Link
Simple web contact form PHP, HTML, CSS Link
Build a custom Google Maps theme JavaScript, HTML, CSS Link
Build a Super Mario themed Google map with JavaScript JavaScript, HTML5, CSS3 Link
Build a community-driven delivery application Python, Django, PostgreSQL, JavaScript, Mapbox Link
Build a local Store search-and-discovery application Python, Django, PostgreSQL, JavaScript, Mapbox Link
Medium Clone using React.js and Node.js React, Node, CSS3, JavaScript, HTML5 Link
Facebook Clone with React JS React, Firebase, CSS3, JavaScript, HTML5 Link
JavaScript30 - 30 Day Vanilla JS Coding Challenge JavaScript Link
Travel Bucket List Map with Gatsby and GraphCMS Gatsby, Leaflet, GraphCMS, HTML, CSS Link
Memory Card Game with Vue.js Vue, JavaScript, HTML, CSS Link
Strapi and GatsbyJS Course - Portfolio Project Strapi, Gatsby, JavaScript, HTML, CSS Link
Storybook - Node, Express, MongoDB and Google OAuth MongoDB, Node, JavaScript, HTML, CSS Link
Breathe and Relax App - JavaScript and CSS Animations JavaScript, HTML, CSS Link
Node.js CLI For Cryptocurrency Prices Node, JavaScript Link
React and Tailwind CSS Image Gallery React, Tailwind, JavaScript, HTML, CSS Link
Pomodoro Clock using React React, JavaScript, HTML, CSS Link
Keyword Density Tool with Laravel from Scratch Laravel, PHP, JQuery, AJAX, SEO Link
YouTube Clone using Yii2 PHP Framework Yii2, PHP Link
Reddit Clone with React, GraphQL and Amplify React, Amplify, AWS, GraphQL, Node Link
Full-Stack Yelp Clone with React and GraphQL React, GraphQL, HTML, CSS, JavaScript Link
Pokémon Web App with React Hooks and Context API React, HTML, CSS, JavaScript Link
Watershed Monitor using JavaScript and Rails Ruby, Rails, JavaScript Link
Climate Data Dashboard using React and Redux React, Redux, HTML, CSS, JavaScript Link
Flipping UNO Cards using only CSS HTML, CSS Link
Chat App with Redis, WebSocket and Go Redis, Web Socket, Go, Azure Link
Spotify Login Animation With React Navigation React, HTML, CSS, JavaScript Link
Dynamic Weather Interface with just CSS HTML, CSS Link
Simple CRUD App with Airtable and Vue Airtable, Vue, Vuetify, API, HTML Link
Full Stack RPG Character Generator with MEVN stack MongoDB, Express, Vue, Node, HTML Link
Todo App with the PERN stack PostgreSQL, Express, React, Node, HTML Link
Summer Road Trip Mapping App with Gatsby React, Gatsby, Leaflet Link
Multiplayer Card Game with Socket.io Phaser 3, Express, Socket.io, JavaScript Link
COVID-19 Dashboard and Map App with Gatsby React, Gatsby, Leaflet Link
Flashcard Quiz With React React, API, JavaScript, HTML5, CSS3 Link
Whack-a-Mole with pure JavaScript JavaScript, HTML5, CSS3 Link
NOKIA 3310 Snake Game using JavaScript JavaScript, HTML5, CSS3 Link
Rock Paper Scissors in vanilla JavaScript JavaScript, HTML5, CSS3 Link
Tetris with pure JavaScript JavaScript, HTML5, CSS3 Link
Meme Maker with React React, JavaScript, HTML5, CSS3 Link
Evernote Clone with React React, Firebase, Node, JavaScript, HTML5 Link
Developer Meetup App with Vue Vue, Firebase, Vuetify, JavaScript, HTML5 Link
Real-Time Chat App with Vue Vue, Firebase, Vuex, JavaScript, HTML5 Link
Cryptocurrency Tracker with Vue Vue, Vuetify, API, JavaScript, HTML5 Link
Multiplayer Quiz Game with Vue Vue, Pusher, Node, Express, JavaScript Link
Minesweeper Game with Vue Vue, Vuex, Vuetify, JavaScript, HTML5 Link
Instagram Clone with Vue Vue, CSSGram, JavaScript, HTML5, CSS3 Link
Hacker News Clone with Angular Angular, Lighthouse, JavaScript, HTML5, CSS3 Link
Chat Interface HTML5, CSS3 Link
Pure CSS3 Tooltip HTML5, CSS3 Link
Social Media Buttons HTML5, CSS3 Link
Testimonial Card HTML5, CSS3 Link
Navigation Bar with CSS3 Flexbox HTML5, CSS3 Link
Mobile App Layout with CSS3 Flexbox HTML5, CSS3 Link
Reddit-inspired Loading Spinner HTML5, CSS3 Link
Calendar with CSS3 Grid JavaScript, HTML5, CSS3 Link
Tetris Game in React React, JavaScript, HTML5, CSS3 Link
2D Breakout Game JavaScript, HTML5, CSS3 Link
Sprite Animation JavaScript, HTML5, CSS3 Link
Snake Game JavaScript, HTML5, CSS3 Link
Memory Game JavaScript, HTML5, CSS3 Link
Simple Authentication and Authorization GraphQL, Apollo, Node, JavaScript, HTML5 Link
Cryptocurrency Tracker NextJS, GraphQL, Apollo, Node, JavaScript Link
Instant Search With Vanilla Javascript JavaScript, HTML5, CSS3 Link
Calculator App JavaScript, HTML5, CSS3 Link
Todo App Vue, JavaScript, CSS3, HTML5 Link
Blog App Vue, GraphQL, Apollo, JavaScript, CSS3 Link
Simple Budgeting App Vue, Bulma, JavaScript, CSS3, HTML5 Link
Search Bot Node, Twilio, Cheerio, API, Automation Link
Twitter Bot Node, JavaScript, API, Automation Link
Real-Time Markdown Editor Node, JavaScript, Express, Redis, HTML5 Link
Todo App Angular, TypeScript, RxJS, HTML5, CSS3 Link
Hacker News Client Angular, RxJS, Webpack, HTML5, CSS3 Link
Random Quote Machine React, JavaScript, HTML5, CSS3 Link
Todoist Clone React, Firebase, JavaScript, Testing, HTML5 Link
Chat App with Sentiment Analysis NextJS, Pusher, Sentiment, Node, React Link
Appointment Scheduler React, Twilio, CosmicJS, Material-UI, JavaScript Link
Game of Life React, 2D, JavaScript, HTML5, CSS3 Link
News App React Native, Node, API, React, JavaScript Link
Chat App React, Redux, Redux Saga, Web Sockets, Node Link
Todo App React Native, GraphQL, Apollo, API, Hasura Link
Chrome Extension React, Parcel, JavaScript, HTML5, CSS3 Link
Movie Voting App React, Redux, API, Immutable, JavaScript Link
Trello Clone React, Elixir, Phoenix, JWT, JavaScript Link
Wiki-Style CMS C#, .NET, Razor Pages Link
Spotify Clone with ReactJS React, HTML5, CSS3 Link
Microsoft Homepage Clone HTML5, CSS3, JavaScript Link
Simple Gantt Chart HTML5, CSS3, JavaScript Link
Job Scraping App Node, JavaScript, REST, API, Express Link
E-Commerce App React, Bootstrap, JavaScript, HTML5, CSS3 Link
Netflix Landing Page HTML5, CSS3, JavaScript Link
AI Chatbot Web Speech API, Node, JavaScript, Express, Socket.io Link
Social Networking App React, Node, Redux, Firebase, REST Link
Build A Simple Cryptocurrency Blockchain In Node.js Node, JavaScript, Cryptography, Blockchain Link
BitTorrent Client Node, JavaScript, TCP, Computer Networks Link
Todo List App with JavaScript JavaScript, HTML5, CSS3 Link
JavaScript Animations with Anime.js JavaScript, CSS3, Library, HTML5, API Link
Job Board App with React React, Node, Cron, JavaScript, HTML5 Link

Mobile Development:

Project Technologies Link
Build a Chat App with Stories Using the Flutter SDK Flutter, Dart Link
Build a Robinhood Style App to Track COVID-19 Cases Kotlin, Android Link
Tinder style swipe mobile app Kotlin, Java, Swift Link
Cryptocurrency price listing mobile app React Native, Swift, Flutter, Dart Link
Restaurants social mobile app React Native, Swift, Flutter, Dart Link
Break time reminder mobile app React Native, Kotlin, Java, Swift Link
Invoicing and payment reminder mobile app React, Node, Express, MongoDB Link
Countdown mobile app Swift, Java, React Native Link
Flappy Bird iOS Game using Swift Swift, XCode, iOS Link
Bull's Eye iOS Game using Swift Swift, XCode, iOS Link
Task List iOS App using SwiftUI Swift, XCode, iOS Link
Restaurant iOS App using SwiftUI Swift, XCode, iOS Link
Dice iOS App with Swift Swift, XCode, iOS Link
TrueCaller Clone Java, MySQL, XAMPP, Android Link
Weather App Java, API, Android Link
E-Commerce App Java, Firebase, Android Link
Chat App Java, Firebase, Android Link
Todo App Flutter, Dart, Android, iOS Link
Travel App UI Flutter, Dart, Android, iOS Link
Reddit Client Android, Kotlin Link
Todo App React Native, Android, iOS, JavaScript Link
Photo Library Viewer C#, iOS, Xamarin, Visual Studio, Android Link
WhatsApp Clone with React Native React Native, Node, GraphQL, Apollo, JavaScript Link

Game Development:

Project Technologies Link
Build Super Mario Bros, Zelda, and Space Invaders with Kaboom.js JavaScript, Kaboom Link
Create an Arkanoid Game with TypeScript TypeScript, HTML, CSS, JavaScript Link
Simple Games Lua, LÖVE, Python, Pygame Zero Link
Python Online Multiplayer Game Python Link
Beat Em Up Fight Game Unity, C# Link
Simple 3D Game using Godot 3.1 Godot, C#, 3D Link
Simple Puzzle Game in Godot - Box and Switch Godot, C#, 2D Link
Game Interface From Scratch in Godot 3 Godot, C#, 2D Link
2D Game with Godot: Player and Enemy Godot, C#, 2D Link
Multiplayer Card Game with Socket.io Phaser 3, Express, Socket.io, JavaScript Link
Multiplayer Card Game with Unity 2D and Mirror C#, Unity, 2D, Mirror Link
Roguelike Tutorial in Rust Rust, 2D Link
Adventures in Rust - A Basic 2D Game Rust, 2D Link
Terminal Snake Game with Ruby Ruby, 2D Link
Space Invaders using OpenGL OpenGL, C/C++, 2D Link
Sudoku Solver in C C/C++, 2D Link
Chess Engine In C C/C++, 2D Link
Flappy Bird iOS Game using Swift Swift, XCode, iOS Link
Bull's Eye iOS Game using Swift Swift, XCode, iOS Link
Whack-a-Mole with pure JavaScript JavaScript, HTML5, CSS3 Link
NOKIA 3310 Snake Game using JavaScript JavaScript, HTML5, CSS3 Link
Rock Paper Scissors in vanilla JavaScript JavaScript, HTML5, CSS3 Link
Tetris with pure JavaScript JavaScript, HTML5, CSS3 Link
Multiplayer Quiz Game with Vue Vue, Pusher, Node, Express, JavaScript Link
Minesweeper Game with Vue Vue, Vuex, Vuetify, JavaScript, HTML5 Link
Tetris Game in React React, JavaScript, HTML5, CSS3 Link
2D Breakout Game JavaScript, HTML5, CSS3 Link
Sprite Animation JavaScript, HTML5, CSS3 Link
Snake Game JavaScript, HTML5, CSS3 Link
Memory Game JavaScript, HTML5, CSS3 Link
Tanks Shooter 3D, Unity, C# Link
2D Roguelike 2D, Unity, C# Link
John Lemon's Haunted Jaunt 3D 3D, Unity, C# Link
VR Beginner: The Escape Room VR, Unity, C# Link
Ruby's Adventure 2D, Unity, C# Link
RPG Game 2D, Unity, C# Link
Roll-a-ball 3D, Unity, C# Link
FPS Microgame Unity, C# Link
Platformer Microgame Unity, C#, 2D Link
Karting Microgame Unity, C# Link
Arcade Shooter Lua, LÖVE Link
Game of Life React, 2D, JavaScript, HTML5, CSS3 Link
Handmade Hero C/C++, OpenGL, 2D Link
Breakout C/C++, OpenGL, 2D Link
Tetris C/C++, 2D Link
NES game C/C++, Python, 2D Link
Roguelike Game C#, .NET, RogueSharp, MonoGame, RLNet Link
Simple RPG Game C#, SQL, 2D Link

Machine Learning & AI:

Project Technologies Link
Wine Quality predictor Python, Numpy, SciKit, Pandas, Matplotlib Link
CNN that Detects Pneumonia from Chest X-Rays CNN, Python Link
Auto-Updating Data Visualizations in Python with AWS Python, AWS, Matplotlib Link
Twitter Sentiment Analysis Tool using GCP and Node API, GCP, Node, JavaScript Link
Twitter Sentiment Analysis using CNN Python, Matplotlib, Numpy, Pandas Link
Taylor Swift Lyrics Generator Python, Keras, Numpy, Pandas Link
MNIST Digit Recognizer Python, Keras, TensorFlow, Numpy, SciKit Link
Train a Model to Generate Colors Python, Keras, TensorFlow, Numpy Link
Image Caption Generator Python, TensorFlow, Numpy Link
Break a Captcha System using CNN Python, Keras, TensorFlow, OpenCV, Numpy Link
Generate an Average Face Python, OpenCV, Numpy, C/C++ Link
Image Stitching Python, OpenCV, Numpy Link
Hand Keypoint Detection Python, OpenCV, Numpy, C/C++ Link
Eigenface Python, OpenCV, Numpy, C/C++ Link
Drone Target Detection Python, OpenCV, Numpy Link
Object Detection using Mask R-CNN Python, OpenCV, Numpy Link
Facial Landmark Detection Python, OpenCV, DLib, Numpy Link
Text Skew Correction Python, OpenCV, Numpy Link
OCR and Text Recognition Python, OpenCV, Tesseract, Numpy Link
People Counter Python, OpenCV, Numpy Link
Text Detection Python, OpenCV, Numpy Link
Semantic Segmentation Python, OpenCV, Numpy Link
Object Tracking Python, OpenCV, Numpy, CamShift Link
Face Clustering Python, OpenCV, Numpy Link
Barcode Scanner Python, OpenCV, ZBar, Numpy Link
Saliency Detection Python, OpenCV, Numpy Link
Face Detection Python, OpenCV, Numpy Link
Document Scanner Python, OpenCV, Numpy, SciKit Link
Music Recommender Python, SciKit, Numpy, Pandas Link
Predict Quality of Wine Python, Matplotlib, Numpy, Pandas Link
Genetic Algorithms Python, SciKit, Numpy, Pandas Link
DeepDream Python, TensorFlow, Visualization Link
Stock Price Prediction Python, SciKit, Matplotlib Link
Movie Recommendation Systems Python, LightFM Link
Twitter Sentiment Analysis Python, API Link
Chat App with Sentiment Analysis NextJS, Pusher, Sentiment, Node, React Link