ProjectLearn: A Curated Directory of Build-It-Yourself Tutorials for Developers
A curated list of project tutorials for project-based learning.
At a glance
- What is it?
- Xtremilicious/projectlearn-project-based-learning is a Next.js site and companion GitHub repository that indexes hundreds of project tutorials across web, mobile, game, and machine learning development. Each entry links to an external tutorial where learners build a complete application from scratch rather than following isolated exercises.
- Who is it for?
- Developers who learn best by building complete projects and want a browsable directory organized by technology stack will get direct value from projectlearn.io or from cloning the repository. The site does not host tutorial content itself: every entry links outward to a third-party video or article.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 127 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 3, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What ProjectLearn Is and the Problem It Solves
ProjectLearn addresses a specific gap in self-directed technical learning: most tutorial platforms teach isolated concepts, but learners often find it harder to build something complete from scratch than to follow a concept-by-concept course. The site aggregates external tutorials where the output is a finished application, not just a function or a component.
The repository description puts it directly: "Tutorials are great, but building projects is the best way to learn." Each entry in the list points to a full build tutorial, organized so learners can filter by category and technology. The repository is the data source for projectlearn.io, and it also functions as a standalone reference on GitHub because the README is auto-generated from the same data on every commit.
Categories and Technologies Covered
The list is organized into five main categories: web development, mobile development, game development, machine learning and deep learning, and artificial intelligence. Within web development, tutorials cover React, Next.js, Vue, Node, Python, Django, and vanilla JavaScript/HTML/CSS projects ranging from chat applications and clones of popular services to data visualization tools and serverless functions.
Mobile development tutorials use Flutter and React Native. Game development tutorials include Unity projects. The machine learning and AI sections cover TensorFlow, OpenCV, and Keras. The README shows representative entries such as a ChatBot built with React and OpenAI, a 3D developer portfolio using Three.js, a full-stack Google Drive clone with Next.js 15, and a YouTube clone with React and Express. Technologies such as Tailwind, Supabase, GraphQL, Stripe, Appwrite, and Drizzle ORM appear across recent entries.
The list focuses on in-demand technologies and is updated by contributors. The CONTRIBUTE.md file in the repository describes how to add new entries.
Running the ProjectLearn Site Locally
The site is a Next.js 12 application with TypeScript and Redux. The package.json in the repository root defines the development and build scripts. To run it locally, clone the repository and start the development server:
git clone https://github.com/Xtremilicious/projectlearn-project-based-learning.git
npm installnpm run devThe development server starts and the site is accessible at the default Next.js port. The build script for production is:
npm run buildThere is also a `generate-readme` script configured as a pre-commit hook. Running it regenerates the README from the current tutorial data before each commit, which keeps the GitHub README in sync with the site content. The repository uses Tailwind CSS, Radix UI components, Redux Toolkit for state management, and Amplitude for analytics. Node.js and npm are the only prerequisites.
How the Repository Is Organized
The top-level layout includes pages/ for the Next.js page routes, src/ for application logic and utilities, posts/ for markdown-based content, public/ for static assets, and styles/ for global CSS. The tutorial data that populates the site lives in the posts/ folder or is generated by the utility scripts in src/utils/.
The generate_readme.ts script in src/utils/ is responsible for rebuilding the README. This means the README on GitHub is a rendered view of the tutorial list, not a hand-maintained document. The gulpfile.mjs handles image optimization. The package.json also includes an export script that runs a Next.js static export followed by sitemap generation, used for the production build deployed to projectlearn.io.
The site uses next-auth for authentication and react-redux for client-side state. The cmdk package suggests a command palette interface for searching the tutorial list. Tailwind and the Radix UI library handle the component design system.
What ProjectLearn Does Not Provide
The site is a directory, not a learning management system. There is no progress tracking, no account dashboard that records which tutorials a learner has completed, and no assessments or quizzes. Learners navigate to the external tutorial, complete it on the original platform, and return to ProjectLearn to find the next one.
The quality and accuracy of the tutorials vary because they are sourced from many external creators. ProjectLearn curates and categorizes them but does not produce or verify the content itself. A tutorial that was accurate when it was added may become outdated if the underlying library releases breaking changes. The README also does not document a mechanism for reporting broken or outdated links beyond submitting a pull request via CONTRIBUTE.md.
An alternative with a similar orientation is freeCodeCamp, which also teaches through projects but hosts its curriculum internally and provides a structured certification track. The key difference is that ProjectLearn links outward to community-created tutorials across a wider range of technologies, while freeCodeCamp maintains its own curriculum with defined learning paths and in-platform testing.
Maintenance and Contribution Model
The repository is not archived. The last push was on 2026-05-30. There are no GitHub release tags; the main branch tracks the live site. The project is MIT-licensed, so the code and data can be forked and reused freely.
Contributions follow the CONTRIBUTE.md guidelines. The pre-commit hook that regenerates the README means any contributor adding a new tutorial entry will see the README updated automatically as part of their commit. This design keeps the public-facing README consistent with the actual data without requiring a separate documentation step.
The site version listed in package.json is 3.0.0, indicating this is the third major revision of the project. Dependencies include fairly recent versions of React (18), Next.js (12), and Redux Toolkit, though next.config.js pins Next.js at version 12 rather than a more recent version.
Editorial conclusion
Developers who learn best by building complete projects and want a browsable directory organized by technology stack will get direct value from projectlearn.io or from cloning the repository. The site does not host tutorial content itself: every entry links outward to a third-party video or article. Teams looking for structured curricula with assessments or progress tracking should look at dedicated learning management platforms instead. To check what categories and technologies are currently covered, the README in the repository is auto-generated on each commit and reflects the live state of the tutorial list.
Frequently asked questions
What kinds of tutorials does ProjectLearn index?
The site indexes tutorials where learners build a complete application from scratch. Categories include web development, mobile development, game development, machine learning, and artificial intelligence. Technologies represented include React, Next.js, Vue, Flutter, Unity, TensorFlow, and OpenCV, among others.
Does ProjectLearn host tutorial content itself?
No. Every entry in the directory links to an external tutorial hosted by the original creator, such as a YouTube video or a written guide on another site. ProjectLearn organizes and categorizes these links but does not produce or store the tutorial content.
How do I add a tutorial to the ProjectLearn list?
The repository includes a CONTRIBUTE.md file that describes the submission process. Contributions are made as pull requests to the GitHub repository. A pre-commit hook regenerates the README automatically when new entries are added, keeping the GitHub listing in sync with the site.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/xtremilicious-projectlearn-project-based-learning)