MERN Stack Job Portal App : React ,Redux ,Node ,Mongo 2021

Learn to install Ant Design in a React app, import the component library, and use Button and other components with props to build forms, tabs, and app interfaces.

Learn to build and customize forms with entity forms in React, creating a login form, handling submit to show values, and exploring layouts, props, and the documentation.

Learn how to implement ant design form rules for validation in a react node mongo MERN app, including required fields, minimum length, and input type validations for username and password.

Learn to build nested forms with a form list to manage multiple emails, adding and removing fields, and submitting the array of values.

Learn to implement ant tables with dataSource and columns, display static and dynamic data, and enable pagination by mapping dataIndex to header fields.

Learn to implement ant tabs in a MERN app by building a simple tabs component with tab items and keys, and observe switching behavior.

Scaffold a React client and Node server in a shared project folder, run locally, and style with antd, importing components as shown in the documentation.

Learn to build a default layout for a MERN job portal, set up React Router DOM, and implement navigation with active highlighting across the main pages.

Connect a MongoDB Atlas database to a Node.js app using Mongoose, creating the database and collections and copying the connection URL.

Create a mongoose job model and schema for a MERN stack portal, defining title, department, salary from, salary to, experience, minimum qualifications, skills, descriptions, and applied candidates.

Seed static job data into MongoDB by importing a json file into the jobs collection, aligning with the job model properties to enable the home screen and future api calls.

Build the get all jobs API in a MERN stack app by creating a Mongo model and express router to return all jobs to the client for the home screen.

Access the redux store in home page components using useSelector and useDispatch, retrieve the jobs reducer data, and display its length while preparing to dispatch actions like get all jobs.

Learn to fetch all jobs in a MERN app by building get all jobs action, dispatching via useEffect with redux to call API, and update the reducer with results.

Introduce a loading reducer in a MERN stack job portal, use react-spinners to display a loader during API requests, and read loading state with a selector to show the overlay.

Design the homepage for a mern stack job portal by mapping Redux jobs data into a responsive Andretti grid system, showing each job's title, company, salary, and experience.

Designs a job info page that fetches all jobs once and filters by id from the url to display title, company, description, skills, salary, and department, with an apply button.

Create the user model on the backend with mongoose, defining required fields (username, password) and profile data (first name, last name, email, mobile) plus education, skills, projects, and experience.

Implement and test a MERN stack user authentication API with register and login routes, validate username and password, and integrate with MongoDB user model.

Design and implement login and registration screens with username, password, and confirm password fields, routes, and client-side validation with error messages.

Implement axios-based user authentication actions to register and log in users, manage loading states, display messages, store user data in local storage, and navigate between login and home pages.

Build and update a user profile in a MERN stack job portal, using a multi-tab form for personal info, education, and skills, and ensure profile data accompanies job applications.

Build a dynamic update for the user profile form, including education, skills, projects, and experience. Preload initial values from local storage and submit a final merged object.

implement the update profile feature in a MERN stack app, including backend update route and frontend actions, dispatch, and refreshing local storage with updated user details.

Implement a two-step client-side post job flow with job and company profile tabs, collecting salary from-to, skills, minimum qualifications, and logging the final object to the console.

Implement the post job feature with a back-end route and front-end actions to submit job data via the API, including salary range and skills required.

Display jobs posted by the logged-in user by fetching all jobs, filtering by user ID, and rendering a table of title, company, posted on, and applied candidates.

Design the edit jobs feature by adding an actions column with icons and routing to the edit page using complete job data for pre-filled update forms.

Implement edit jobs with actions and API in a MERN stack app, updating jobs via backend routes with axios and conditionally rendering the edit button by user id.