Build MERN Stack Apps with AI & Coding Agents

Set up the frontend for the monstack project with vite to create a React TypeScript app, update the title to monjob board with ai, and prepare a minimal home page.

Learn to install and configure Tailwind CSS in a React application, including configuring tailwind.config.ts, importing Tailwind CSS, restarting the dev server, and applying utility classes and a Montserrat font.

Learn to customize the shadcn theme by picking a primary color from official options or tweak cn, then update root and dark in CSS and adjust focus rings and heights.

Set up frontend routes in a monstack app using react router dom, create public and private pages (home, login, index/register), and verify via localhost 5173 with npm run dev.

Create the backend folder, initialize package.json, install express, write index.js, and run with nodemon on port 5000 as you prepare the MongoDB connection.

Learn to set up a local MongoDB connection for a Node.js backend using mongoose, dotenv, and a .env file, including connecting via MongoDB Compass and testing with localhost:27017.

Create login and register endpoints in a MERN backend by building a routes folder with user routes, exporting the router, wiring it under /api/users, and testing with Postman.

Create a pixel-perfect MERN stack authentication homepage using AI-assisted prompts and tailwind grid and flex layouts, with login and register navigation.

Build login page by referencing the register page, remove the name field, and add a role selection with email and password for job seeker or recruiter, completing the front-end authentication.

Create the user model in Mongoose and implement the register API with bcrypt hashing and JSON Web Token for authentication, including checks for existing users.

Test the user registration API from the front end using Axios, with react-hot-toast for success and error messages, environment-based API routes via .env and import.meta, and loading states during submission.

Implement and integrate the login API in a MERN stack app, generate a JWT token from user data, store it in browser cookies, and route users to the correct dashboard.

Implement front-end route protection with private and public layouts that use a token in browser cookies to redirect users to login. Store user role for dynamic redirects to role-based dashboards.

Designs the private layout header and a role-based drawer, showing the project title and user details, while fetching user data once and storing it globally with Zustand for reuse.

Fetch and store the user in a global Zustand store, manage loading, call the backend api for profile data, and access the user across header and dashboards.

Build a role-based sidebar in a MERN app, rendering recruiter and job seeker menus with a sheet component, icons, routes, active highlighting, and styling tweaks.

Build responsive loading experiences by replacing plain text with a spinner component, simulate api delays, and integrate the spinner into the private layout for MERN stack apps.

Define a mongoose job model with fields title, description, skills, location, job type, salary range, apply date, experience, status, and recruiter reference to users; enabling create, read, update, delete endpoints.

Develop the frontend for the jobs module by creating folders and pages, setting up add/edit routes, and building a reusable page title and job form with AI assistance.

Master add job API integration in a MERN app by wiring create, edit, get, and delete endpoints, handling cookies-based auth, form references, loading states, and success toasts.

Display, edit, and delete recruiter jobs by fetching data with axios, rendering in a table, pre-populating the edit form, and using dayjs for date formatting and short-CN dialogues for delete.

Build jobs listing and job info pages for job seeker portal in a MERN app, fetch open jobs via API, and enable apply with cover letter and resume upload.