MERN Stack Resume Builder - React , Node , Mongo DB , AntD

Set up a react app for resume builder by creating a client with create-react-app, installing Ant Design and Axios, and running on localhost:3000 with project title shared a zoom builder.

Set up a folder structure with pages, components, and resources for the monster classroom builder. Implement routing with react-router-dom for login and register pages, and outline protected and non-protected layouts.

Create a reusable default layout component for protected pages that renders page content via props in a two-part header and content area, styled in a black and white theme.

Style the header and layout for a mern stack resume builder in react, add monserrat typography and bootstrap, and prepare for backend setup with node.js, login, and default layout.

Set up a Node.js backend with Express and MongoDB, create the server entry point, install dependencies, and connect Node.js to MongoDB Atlas for a functional backend.

Learn to connect a MongoDB Atlas database to a Node.js app using Mongoose, create a share resume database with a users collection, and verify a successful connection.

Create a user model with a mongoose schema for login and registration, including username and password as required fields with timestamps, exporting the user model for login and registration endpoints.

Develop authentication APIs for login and registration in a MERN stack app by creating endpoints with express, using a user model, and handling success and error responses.

Develop and style login and register authentication screens using entity forms with username, password, and confirm password, including on finish handling, layout configuration, and navigation between register and login links.

Integrate login and register APIs in the MERN stack resume builder by configuring a proxy, posting with Axios to /api/user/register and /api/user/login, and storing user data in localStorage.

Add loading indicators for authentication by integrating a spinner during login and registration. Center the spinner and manage loading state before and after api calls, and plan for protected roles.

Learn how to implement protected routes in a MERN stack app by guarding screens with a login check in local storage, redirecting unauthorized users to the login page.

Build a dynamic profile page in a MERN resume builder with three tabs—personal info, skills and education, and experience and projects—using AntD dynamic forms to update the resume.

Create a responsive personal info form in the update profile tab, collecting first name, last name, email, mobile, portfolio, and address with form items, inputs, and validation rules.

Master dynamic forms in the update profile section by adding multiple education and skills entries using form list, with fields such as qualification, percentage, institution, year range, technology, and rating.

Learn to convert education form patterns into the experience and projects section, replicating dynamic form logic, and implement company, years, place, title, description, and range fields for resume building.

Extend the user model to support profile updates and implement a back-end update profile API using findOneAndUpdate to update MongoDB, with front-end integration via profile page and axios.

Test and implement update profile integration by validating MongoDB user schema, registering users, and auto-populating the profile form from local storage to support seamless resume data updates.

Introduce templates by creating a templates folder with index and template pages, render the first template from update profile form data stored in local storage, and set up routing.

Create the first resume template in the MERN stack resume builder, outlining header layout, sections (education, experience, projects, skills), and local storage integration to render multiple templates.

Learn to build the first resume template by organizing education, experience, and projects, render skills, and fine-tune a responsive flex layout for a MERN stack resume.

Design a homepage that displays available resume templates as thumbnails and navigates to the template page. Clicking a thumbnail loads the resume data into the selected template.

Navigate from the home page to dynamic templates using useNavigate and useParams, render template one or two by id, and support printing or downloading the template.