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 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 |
