Master full-stack development with complete projects
Build end-to-end web applications that showcase your full development skills. Create projects with professional frontend designs, robust backends, databases, and API integration, and get feedback from the Frontend Mentor community.
Start building freeJoin 1,100,577 developers building projects, reviewing code, and helping each other improve.
Testimonials
"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."
"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Learn full-stack development by building complete applications
Frontend Mentor provides realistic, full-stack project briefs with professional designs that allow you to practice building complete web applications. Connect beautiful frontends to robust backends, implement authentication and authorization, work with databases, and deploy production-ready apps. Compare your architecture decisions with the community, receive feedback on both frontend and backend code, and build a portfolio that demonstrates your ability to deliver full features from concept to deployment.
How to start building full-stack projects
Pick a project below that matches your current skill level.
Build it from scratch—don’t just copy-paste code. Make it your own.
Push to GitHub and share your work.
Iterate: Add features, refactor your code, try different approaches.
Want feedback? Submit your project for community review on Frontend Mentor.
Full-stack projects to build
Build complete web applications with our professional designs and your tech stack of choice. Add authentication, databases, and APIs to create deployable applications that demonstrate end-to-end development skills. We provide the designs; you build the full-stack solution.
- Free
Interactive comments section
- HTML
- CSS
- JS
3intermediateThis is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
- Free
Job listings with filtering
- HTML
- CSS
- JS
3intermediateIn this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.
- Premium
Personal blog
- HTML
- CSS
- JS
3intermediateThis multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!
- Free
Todo app
- HTML
- CSS
- JS
3intermediateThe classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.
- Premium
Recipe finder website
- HTML
- CSS
- JS
3intermediateBuild a responsive recipe finder with search, filtering, and dynamic content. Practice working with JSON data, complex layouts, and interactive JavaScript features.
- Premium
In-browser markdown editor
- HTML
- CSS
- JS
3intermediateIn this project, you'll build a fully-functional in-browser markdown editor application with a light/dark mode toggle. It's also perfect to build as a full-stack app!
- Premium
Bookmark manager app
- HTML
- CSS
- JS
4advancedBuild a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.
- Premium
Mood tracking app
- HTML
- CSS
- JS
4advancedBuilding this app will be a fun way to test a range of your skills. From working with JSON data to logging and charting mood entries, there's a lot to get stuck into!
- Premium
Entertainment web app
- HTML
- CSS
- JS
4advancedThis multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.
- Premium
Note-taking web app
- HTML
- CSS
- JS
4advancedThis project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!
- Premium
Link-sharing app
- HTML
- CSS
- JS
5guruIn this project, you'll build a fully-functional link-sharing app for developers! You'll practice working with image uploads, repeater fields, drag-and-drop, and more!
- Premium
Product feedback app
- HTML
- CSS
- JS
5guruThis will be a perfect portfolio piece! You'll be working with JSON, managing state, and building like a real-world app. You can even create it as a full-stack project!
- Premium
Audiophile e-commerce website
- HTML
- CSS
- JS
5guruThis huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!
- Premium
Invoice app
- HTML
- CSS
- JS
5guruThis invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!
- Premium
Personal finance app
- HTML
- CSS
- JS
5guruThis app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!
- Premium
Kanban task management web app
- HTML
- CSS
- JS
5guruIn this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.
Why Frontend Mentor for full-stack projects?
We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.
Professional designs included
Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.
Code reviews & feedback
Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.
Portfolio-ready projects
Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.
Frequently Asked Questions
- What should I learn before starting full-stack projects?
Master frontend fundamentals first: HTML, CSS, JavaScript, and one framework like React. Build 10-15 frontend projects until responsive design and interactivity feel natural. Then, learn the basics of backend development: HTTP, REST APIs, databases (SQL or NoSQL), and authentication. Start with Node.js and Express if you're familiar with JavaScript, or Python with Flask/Django for clearer syntax. Understanding both sides separately before connecting them prevents confusion about where problems originate. Many developers struggle with full-stack work because they skip solid foundations in either the frontend or backend.
- How many full-stack projects do I need for my portfolio?
Quality over quantity: 3-5 complete full-stack applications demonstrate more than 10 half-finished projects. Each should showcase different technical challenges: one with authentication and user management, another with real-time features, one integrating third-party APIs, and one with complex business logic. Employers look for projects proving you can architect complete solutions, not just connect a frontend to a basic CRUD backend. Deploy everything with proper documentation. Include architecture diagrams and READMEs explaining your technical decisions, security considerations, and scaling approaches.
- Should I use the same language for frontend and backend?
Not necessarily, but JavaScript across the full stack (e.g., Node.js backend, React frontend) offers advantages for beginners: one language to master, shared code between frontend and backend, and easier context switching. However, don't let this limit you. Python backends with React frontends are common and legitimate. Select options based on project requirements and learning objectives. If you want to demonstrate language versatility to employers, consider building different projects with various stacks: one with JavaScript everywhere, another with a Python backend, and perhaps one with another language, like Go. Versatility matters more than language matching.
- What makes a full-stack project portfolio-worthy?
Portfolio-worthy full-stack projects demonstrate production-ready thinking across the entire application. Frontend is responsive, accessible, and polished. The backend has proper error handling, input validation, and security measures, including password hashing and JWT authentication. The database schema is normalized with appropriate indexes. API design adheres to REST principles, utilizing consistent patterns. The code is organized with a clear separation of concerns. Include comprehensive READMEs documenting setup, API endpoints, and architecture decisions. Deploy with proper environment variable management. Most importantly, projects solve real problems with professional execution—Frontend Mentor projects provide this foundation with professional designs.
- How long does it take to learn full-stack development?
With solid frontend skills already, expect 4-6 months to become job-ready in full-stack basics: backend fundamentals, databases, API design, authentication, and deployment. This assumes 2-3 hours of daily practice. Month 1-2: Backend basics and simple APIs through 5-8 projects. Month 3-4: Databases and authentication through 4-6 integrated projects. Month 5-6: Complex features and deployment through 3-4 complete applications. Starting from zero programming knowledge, expect 8-12 months total. Learning continues indefinitely—full-stack developers constantly learn new tools, patterns, and best practices. Focus on building projects, not collecting courses.
- Should I learn SQL or NoSQL databases first?
Learn SQL first with PostgreSQL or MySQL. Relational databases teach fundamental data modeling, relationships, constraints, and query optimization that apply everywhere. SQL forces you to think about data structure, normalization, and integrity. These concepts matter even if you later use NoSQL. After building 5-7 projects with SQL, explore NoSQL like MongoDB for specific use cases. Most applications use SQL databases. Most job postings require SQL knowledge. NoSQL is valuable for specific scenarios, such as real-time applications or document storage, but SQL provides the essential foundation for database thinking.
- Do I need to know DevOps for full-stack projects?
You need deployment basics, not full DevOps expertise. Learn to deploy frontends on Vercel or Netlify, backends on Railway or Render, and databases on managed services like Supabase or PlanetScale. Understand environment variables, basic CI/CD concepts, and how to debug production issues. This is sufficient for junior and mid-level positions. Advanced DevOps—Docker, Kubernetes, infrastructure as code—comes later as you grow. Focus on building and deploying complete applications first. Employers value developers who can ship features end-to-end over those with theoretical DevOps knowledge but no deployed projects.
- What's better for full-stack: REST APIs or GraphQL?
Learn REST first. REST APIs are simpler, more widely used, and easier to understand. Build 8-10 full-stack projects with REST until API design feels natural. Understand HTTP methods, status codes, authentication patterns, and endpoint structure. Most companies use REST. Most interviews test REST knowledge. GraphQL solves specific problems—complex data fetching, avoiding over-fetching—but adds complexity beginners don't need. After mastering REST, you could explore GraphQL in 1-2 projects to understand when it's beneficial. Strong full-stack developers know both, but default to REST for most applications.
Join 1,100,577 people building portfolio-worthy projects
Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!
Log in with GitHubRelated pages
Frontend projects
Build portfolio-worthy websites and web applications with professional designs. Practice HTML, CSS, JavaScript, frameworks, and modern frontend development while solving real coding challenges.
API integration projects
Connect to real APIs and build portfolio-ready apps. Practice fetch, JSON handling, and error states with beginner-to-advanced challenges.















