xtremilicious / projectlearn-project-based-learning

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

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 and Deploy a Full Stack Social Media App using React	React, JavaScript, HTML, CSS, Tailwind	Link
Create Your Own ChatGPT Clone in HTML CSS and JavaScript	HTML, CSS, JavaScript, OpenAI API, API	Link
Build Reddit 2.0 clone with NextJS	React, SQL, Supabase, Next.js, GraphQL	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
Plagiarism Checker Website	Python, Bootstrap	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
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 an Uber Eats Clone with React Native	React Native, Javascript, Android, iOS	Link
Build an Uber Clone with React Native	React Native, Javascript, Android, iOS	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
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
Build a Web Scraper using BeautifulSoup	Python, BeautifulSoup	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

projectlearn-project-based-learning's Issues

Tag project with its difficulty level.

Problem Statement- For now when user opens the projects dashboard. Different types of projects creates a great confusion of from which project a user can get started.
Solution- A best solution for this will be tagging each project with its difficulties level.
Three types of difficulty level-

1. Beginner
2. Intermediate
3. Advance
   

Tasks- To tag these difficulty levels, where the project tech stack is tagged.

Wrong link is provided

The link provided to Spotify Inspired Web Design project is directing to the link given to the Microsoft Homepage Clone project

Contributions to the Projects List

As this project is community-driven, feel free to open an issue (or even better, send a Pull Request) for expanding this list. Contributions are very much welcome.

Pull Request Process:

• Ensure the project tutorial to be added doesn't already exist and it is of good quality (code quality, project scope & project relevance).
• Update the data.js file. Links must be pointing straight to the tutorials, no URL shorteners.

Building a Card Component

I would like to design and code Info card component using HTML, CSS, Bootstrap 5.
Please assign this task to me.

Navbar

I would like to redesign navbar.Please assign this issue to me

Love it

Redesign Footer

For now, it looks like this:

I would like to redesign it to this:

Please assign this issue to me if it looks fine.

Remove: Real-Time Twitter Stream

This project has some broken links and dependency issues causing it to be out of date. Suggested removal/replacement.

Wrong link on "Learn CSS Basics by Building a Card Component" page

The button link on this page is wrong. It refs to "ehttps" instead of just "https" and user can't access the page

Remove: URL Shortener with JavaScript

This tutorial should probably be removed/replaced as the jsonstore.io service it uses no longer exists.

React Tutorial: Cloning Yelp is broken

Due to changes in Google Maps API allowances this project is no longer functional. Perhaps it should be removed or replaced with a similar project?

Adding a new project "ChatGPT clone using HTML, CSS and JS with OpenAI API"

I would like to propose the implementation of a ChatGPT clone using HTML, CSS, and JS, utilizing the OpenAI API for natural language processing capabilities. This project aims to create an interactive chatbot interface that simulates conversations with users in a similar manner to OpenAI's ChatGPT model.

The clone would be designed to handle user queries and respond with relevant and contextually appropriate answers. By leveraging the OpenAI API, the chatbot would be capable of generating human-like responses, making the conversations more engaging and natural.

The implementation would involve developing the front-end components using HTML, CSS, and JS to create an intuitive and user-friendly interface. The OpenAI API would be integrated to handle the backend processing of user input and generating appropriate responses.

Key features of the ChatGPT clone would include:

1. Input textbox: Users can enter their queries or messages into the chat interface.
2. Response display: The chatbot will provide real-time responses that are generated based on user input and processed by the OpenAI API.
3. Contextual understanding: The chatbot will maintain context throughout the conversation to provide accurate and meaningful responses.
4. User-friendly design: The interface will be visually appealing, responsive, and easy to navigate, ensuring a smooth user experience.

By creating this ChatGPT clone, we aim to provide a practical example of how the OpenAI API can be integrated into web applications to enhance user interactions and provide intelligent responses. This project would serve as a valuable learning resource and showcase the capabilities of the OpenAI technology.

Here is the link: https://youtu.be/atKtG29iroY

Incorrect Link for project "Chat App with Sentiment Analysis"

Hi, it seems like the link for "Chat App with Sentiment Analysis" leads to another project titled "Build an Appointment Scheduler Using React, Twilio, and Cosmic JS." Is this as intended?

P.S. thanks for the fantastic resource!

Update "© 2022 ProjectLearn" to "© 2023 ProjectLearn" in website "https://projectlearn.io"