Skip to Content
Project

Full-Stack MERN Application

Scenario: Pro-Tasker

You are a full-stack developer hired by a growing startup to lead the development of their new flagship product, “Pro-Tasker”. The vision is to create a modern, collaborative project management tool that is intuitive for single users but powerful enough for small teams. The application must be built from the ground up using the MERN stack, showcasing a secure, robust, and feature-rich backend API, a dynamic and responsive React frontend, and a seamless deployment pipeline.

This capstone project is the culmination of your journey through the MERN stack curriculum. It is designed to challenge you to integrate everything you have learned — from backend architecture and database design to frontend state management and deployment — into a single, polished, and real-world application. You are expected to reuse and expand upon the patterns and code you developed in previous modules, particularly the “TaskMaster” API and the deployment labs.

Core Features & User Stories

“User Stories” are a way to capture the requirements of the project from the perspective of the user.

Here are the user stories for this project:

  • User Management:
    • As a new user, I can create an account and log in.
    • As a logged-in user, my session is managed securely, and I can log out.
  • Project Management:
    • As a logged-in user, I can create new projects, giving them a name and description.
    • I can view a dashboard of all the projects I have created.
    • I can view the details of a single project.
    • I can update or delete only the projects that I own.
  • Task Management:
    • Within a project I own, I can create new tasks with a title, description, and status (e.g., ‘To Do’, ‘In Progress’, ‘Done’).
    • I can view all tasks belonging to a specific project.
    • I can update the details or status of any task within a project I own.
    • I can delete tasks from a project I own.
  • Collaboration (Stretch Goal):
    • As a project owner, I can invite other registered users to collaborate on my project.
    • As a collaborator, I can view and update tasks within a project I’ve been invited to.

Technical Requirements

Backend (Node.js, Express, MongoDB)

  • Modular API: Structure your API with a clear separation of concerns (e.g., models, routes, controllers, middleware).
  • RESTful Endpoints: Design and implement a full suite of RESTful API endpoints for Users, Projects, and Tasks.
  • Database Schemas: Create robust Mongoose schemas for User, Project, and Task models, establishing clear relationships using ref.
  • Authentication: Implement secure user registration and login using JWTs. All sensitive routes must be protected.
  • Authorization: Implement strict, ownership-based authorization. A user must only be able to view or modify data they own. This is the most critical security requirement.
  • Password Security: Hash all user passwords using bcrypt before storing them in the database, preferably using a pre-save hook in your User model.

Frontend (React)

  • Component-Based Architecture: Build the UI using small, reusable functional components.
  • State Management: Use useState for local component state and the Context API for managing global state (like user authentication).
  • Client-Side Routing: Use a library like react-router-dom to create a single-page application (SPA) experience with distinct pages/views for login, registration, a project dashboard, and individual project details.
  • API Integration: Fetch data from your backend API to dynamically render content. All authenticated requests must include the user’s JWT.
  • User Experience: The application should provide clear feedback for loading and error states.
  • Responsive Design: The UI must be fully responsive and usable on desktop, tablet, and mobile screen sizes.

Getting Creative

Have a worthwhile project idea that you’d like to build?

As long as it is a full-stack application that uses the MERN stack, highlights everything you have learned so far, and is something you’d be proud to show off, then we’re open to it!

A different project must be gradeable via the rubric below, which means it must have all of the same features and requirements as the project described above. This is intended to give you creative freedom while adhering to the course requirements and providing an equitable grading experience for your peers.

In order to be eligible, you must submit a project proposal to the instructor for approval. This can take time to review, so please submit your proposal as soon as possible. Your instructor has the right to reject a project proposal for any reason or none at all.

Your project proposal should include:

  • A description of the project.
  • A list of the features you plan to include.
  • A list of the technologies you plan to use.
  • A timeline for the project (make sure it is reasonable in scope for the time remaining).

Instructions & Phased Approach

Phase 1: Planning & Backend Foundation

  1. Reuse & Plan: Start with your code from the the backend development project (“TaskMaster”). Plan the additional features and API endpoints you will need for this capstone. Document your API design in your README.md.
  2. Setup & Structure: Ensure your backend has a clean, modular structure and that all secrets are managed via a .env file (which must be in .gitignore).
  3. Authentication: Implement robust user registration and login. Create reusable authentication middleware to protect your API routes.

Phase 2: Core Backend API

  1. Project API: Build the full CRUD API for projects (/api/projects). Every endpoint must verify that the logged-in user is the owner of the resource being requested.
  2. Task API: Build the full CRUD API for tasks. These routes should be nested under projects (e.g., POST /api/projects/:projectId/tasks) and must include authorization checks to ensure the user owns the parent project.

Phase 3: Frontend Development

  1. Project Setup: Create a new React application using a tool like Vite.
  2. Routing & Pages: Set up client-side routing and create page components for all the main views (Dashboard, Project Page, Login, etc.).
  3. Authentication Flow: Implement the full login/registration flow. Use the Context API to provide authentication status and user data throughout the application. Store the JWT securely in the browser.
  4. Build UI Components: Develop a library of reusable components for displaying projects, tasks, forms, buttons, etc.
  5. Connect to API: Integrate your components with your live backend API to perform all CRUD operations. Implement loading and error states for a smooth user experience.

Phase 4: Deployment & Presentation

  1. Deployment: Following the process from the deployment lab, deploy your application.
    • Deploy the backend Express app as a Web Service on Render, connecting it to your MongoDB Atlas database.
    • Deploy the frontend React app as a Static Site on Render.
    • Ensure your live frontend is correctly configured to communicate with your live backend.
  2. Presentation Prep: Prepare a short presentation (5-10 minutes) to demonstrate your live application. You should walk through the main features, explain your technical decisions, and discuss any challenges you faced.

Submission Requirements

  1. GitHub Repository: A link to your public GitHub repository containing all frontend and backend code.
  2. Live URLs:
    • The URL for your deployed backend web service on Render.
    • The URL for your deployed frontend static site on Render.
  3. Documentation: Your repository must include a README.md file that contains:
    • A description of the project.
    • Instructions for setting it up and running it locally.
    • A list and description of your API endpoints.
  4. Presentation: Be prepared to present and demonstrate your project.

Evaluation Rubric (1000 Points)

CriteriaExcellent (90-100%)Good (75-89%)Satisfactory (60-74%)Needs Improvement (<60%)Points
Part 1: Backend Architecture & Implementation400
Project Setup, Modularity, & Security(45-50 pts)
Project has a flawless modular structure with clear separation of concerns. All secrets are managed via .env, and .gitignore is perfect.		(38-44 pts)
Project has a good structure, but some logic might be slightly misplaced. One minor secret may not be in .env.		(30-37 pts)
A structure exists but is inconsistent. Some secrets may be hardcoded or the .gitignore is incomplete.		(0-29 pts)
Project lacks a logical structure. Secrets are hardcoded. .gitignore is missing or incorrect.		50
Database Schema Design(90-100 pts)
All schemas (User, Project, Task) are robustly defined with correct types, validation, and flawless ref relationships.		(75-89 pts)
Schemas are well-defined, but may have minor omissions in validation or a slight error in one ref relationship.		(60-74 pts)
Schemas are functional but lack validation or have incorrect data types. Relationships may be flawed.		(0-59 pts)
Schemas are incomplete, incorrect, or missing. Relationships between models are non-functional.		100
Authentication API (JWT & Bcrypt)(90-100 pts)
A pre-save hook flawlessly hashes passwords. Registration and Login endpoints are robust and secure, issuing and validating JWTs perfectly.		(75-89 pts)
Hashing is implemented but perhaps not in a hook. Auth endpoints work well but may lack robust error handling.		(60-74 pts)
Auth endpoints are functional but may have minor security flaws or bugs. JWT implementation may be imperfect.		(0-59 pts)
Password hashing is missing or insecure. Auth endpoints are non-functional or have major security flaws.		100
API Functionality & Authorization(135-150 pts)
All CRUD APIs are flawless. Authorization logic is implemented perfectly on all routes, correctly handling ownership and protecting data.		(113-134 pts)
Most APIs are functional, but a few minor bugs may exist. Authorization is present but may be missing on one or two endpoints.		(90-112 pts)
Several API endpoints have bugs or are incomplete. Authorization is attempted but is inconsistent or easily bypassed.		(0-89 pts)
Major APIs are non-functional or missing. Authorization is completely missing or fundamentally broken.		150
Part 2: Frontend Architecture & Implementation400
Component Architecture & Reusability(90-100 pts)
Application is built with small, highly reusable components. Custom hooks are used effectively to abstract all reusable logic.		(75-89 pts)
Components are mostly reusable. Custom hooks are used, but some opportunities for abstraction were missed.		(60-74 pts)
A component structure exists but components are large. Logic is repeated across components instead of using hooks.		(0-59 pts)
Application is monolithic. There is little to no component reuse or logical structure.		100
State Management (Local & Global)(90-100 pts)
Flawless use of useState for local state and Context API for global state (e.g., auth). State updates are efficient and correct.		(75-89 pts)
State management is good, but there may be minor issues, such as putting local state in a global context unnecessarily.		(60-74 pts)
State management is functional but with some anti-patterns (e.g., prop drilling instead of context).		(0-59 pts)
State is poorly managed, leading to bugs, unnecessary re-renders, or unpredictable behavior.		100
API Integration, Routing & UX(90-100 pts)
Data fetching is efficient, with perfect useEffect dependencies. Loading/error/empty states are handled gracefully everywhere. Protected routes are secure.		(75-89 pts)
Data fetching works well, but with minor issues in dependencies. Loading/error states are present but may be missing in some areas.		(60-74 pts)
Data fetching is functional but may be inefficient. Loading/error states are inconsistently handled. Routing is basic.		(0-59 pts)
Data fetching is buggy or causes performance issues. Loading/error states are not handled. Routing is broken.		100
UI Implementation & Responsiveness(90-100 pts)
The UI is polished, intuitive, and implements all features. It is perfectly responsive across desktop, tablet, and mobile.		(75-89 pts)
The UI is good and functional, but may have minor cosmetic issues. Responsiveness is good but may have small bugs on one screen size.		(60-74 pts)
The UI is functional but unpolished. Responsiveness is attempted but has significant layout issues on some screen sizes.		(0-59 pts)
The UI is difficult to use or incomplete. The application is not responsive.		100
Part 3: Deployment, Documentation & Presentation200
Backend & Frontend Deployment(90-100 pts)
Both backend and frontend are flawlessly deployed on Render and are fully functional, communicating with each other without any issues.		(75-89 pts)
Both services are deployed, but there may be minor configuration issues or intermittent errors.		(60-74 pts)
One or both services are deployed but have significant runtime errors, making the application partially non-functional.		(0-59 pts)
Deployment was not attempted, failed, or the live URLs are non-functional.		100
Documentation & Version Control(45-50 pts)
README is professional and thorough. Git commit history is clean, frequent, and descriptive.		(38-44 pts)
README is good but missing some details. Commit history is mostly clean but could be more descriptive.		(30-37 pts)
README is incomplete. Commit history is messy or infrequent.		(0-29 pts)
No README or version control history is poor.		50
Live Presentation(45-50 pts)
Presentation is clear, confident, and professional. The demo is smooth, and technical explanations are insightful.		(38-44 pts)
Presentation is good, but may lack clarity in some areas. The demo is functional but not completely smooth.		(30-37 pts)
The demo has technical issues, or the explanation of the project is unclear and lacks depth.		(0-29 pts)
Presentation is not delivered, or is of very poor quality.		50
Total1000

Building a Portfolio

With any time remaining in class after you have completed the project, you will be working on building a portfolio of your work. This will be a collection of all the projects you have worked on throughout the course, and it will be used to showcase your skills to potential employers.

A portfolio can take many forms. The simplest is a directory containing all of your project repositories.

A more sophisticated portfolio will be a full-fledged website that includes a landing page with a short introduction to you, your projects, and how to contact you. This landing page will also include links to all of your project repositories or deployed applications.

Work on a portfolio at your own pace! It will not be graded, but it will be a valuable asset to your job search.

Some portfolios can get very creative! There are advantages and disadvantages to this, but it is a great way to stand out to employers that will actually take the time to review your portfolio. For inspiration, do a quick web search. This is your opportunity to be wholly yourself!