hub / github.com/Xtremilicious/projectlearn-project-based-learning
github.com/Xtremilicious/projectlearn-project-based-learning @main sqlite
113 symbols
367 edges
72 files
0 documented · 0%
README
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 |
|---|---|---|
| ChatBot That Talks Like a Pirate | React, TypeScript, Vite, AWS Lambda, OpenAI | Link |
| Cartoon Generator Using DALL·E | React, TypeScript, Vite, AWS Lambda, OpenAI | Link |
| Build and Deploy a Full Stack Google Drive Clone with Next.js 15 | React, NextJS, Tailwind, Appwrite, TypeScript | Link |
| Build and Deploy an Amazing 3D Web Developer Portfolio in React.JS Three.js Tutorial | vite, React, JavaScript, Three.js, Tailwind | Link |
| Full-Stack Quick Commerce App with Next.Js Drizzle ORM and Cryptomus Payments | Next.js, React, JavaScript, Drizzle ORM, Cryptomus | Link |
| Build A Full Stack Ecommerce Store With Admin Dashboard | Next.js, React, JavaScript, Tailwind, Stripe | Link |
| Build a Full Stack Uber Clone | Next.js, React, JavaScript, Tailwind, Stripe | 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 |
| 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](https://project |
Extension points exported contracts — how you extend this code
CommandDialogProps (Interface)(no doc)
src/components/ui/command.tsx
InputProps (Interface)
(no doc)
src/components/ui/input.tsx
ButtonProps (Interface)
(no doc)
src/components/ui/button.tsx
FancyMultiSelectProps (Interface)
(no doc)
src/components/ui/multi-select.tsx
BadgeProps (Interface)
(no doc)
src/components/ui/badge.tsx
Core symbols most depended-on inside this repo
cncalled by 45
src/lib/utils.ts
getProjects
called by 9
src/redux/actions/dataActions.ts
useFormField
called by 4
src/components/ui/form.tsx
handleSelect
called by 3
src/components/ui/multi-select.tsx
delay
called by 2
pages/api/github/add-project.ts
retryFetch
called by 2
pages/api/github/add-project.ts
trackPageView
called by 1
pages/_app.tsx
reformatDate
called by 1
pages/blog/[slug].tsx
Shape
Languages
TypeScript100%
Modules by API surface
src/components/landing/Navbar.tsx5 symbols
pages/contribute/index.tsx5 symbols
src/components/ui/multi-select.tsx4 symbols
src/components/dashboard/Info/RelatedProject.tsx4 symbols
src/components/dashboard/Content/index.tsx4 symbols
src/components/GitHubLogin.tsx4 symbols
pages/api/github/add-project.ts4 symbols
pages/_document.tsx4 symbols
src/utils/functions.ts3 symbols
src/components/ui/command.tsx3 symbols
src/components/dashboard/Sidebar/index.tsx3 symbols
src/components/dashboard/Layout.tsx3 symbols
Dependencies from manifests, versioned
@amplitude/analytics-browser2.11.7 · 1×
@fortawesome/fontawesome-svg-core1.2.27 · 1×
@fortawesome/free-brands-svg-icons5.15.4 · 1×
@fortawesome/free-solid-svg-icons5.15.4 · 1×
@fortawesome/react-fontawesome0.1.14 · 1×
@hookform/resolvers3.9.0 · 1×
@radix-ui/react-accordion1.2.1 · 1×
@radix-ui/react-avatar1.1.1 · 1×
@radix-ui/react-dialog1.1.2 · 1×
@radix-ui/react-label2.1.0 · 1×
@radix-ui/react-popover1.1.2 · 1×
@radix-ui/react-select2.1.2 · 1×
For agents
$ claude mcp add projectlearn-project-based-learning \
-- python -m otcore.mcp_server <graph>