MERN Stack Movie Reviews and Recommendations App

Set up the front end of the mon stack app by creating a React project with the wheat tool, then explore its setup, framework options, and folder structure.

Learn to install and configure tailwind css in a react app using the wheat setup, including tailwind.config.js and postcss adjustments, with practical styling examples and hot reloading.

Install remaining front-end dependencies, set up Tailwind CSS with the entity component library, and configure a primary color theme using the entity config provider.

Build the front-end authentication module by creating login, register, and home pages, configuring routes with react-router, and implementing an entity form for login styled with index.css and Montserrat.

Develop and align the login and registration screens for the MERN stack movie reviews app, implementing left panel styling, authentication forms, and field types for password inputs.

Learn to connect a node.js server to mongodb using mongoose, environment variables, and atlas, including configuring the connection, handling success and error events, and verifying the setup.

Define the MongoDB user model for a MERN app, including name, profile pic, email, password, is admin, and is active, and outline login, registration, and get user endpoints.

Implement a register api endpoint that checks for existing users by email, hashes passwords with bcrypt, saves the user, and returns a 201 response with message, success, and data.

Build a login API with JWT authentication in a MERN app by validating user credentials with bcrypt and returning a signed token for the frontend.

Configure an Axios API client and proxy for backend authentication. Create a reusable API request with method, endpoint, payload, and query strings, with error handling and header support for tokens.

Learn to build and integrate a register API with a dedicated users.js file, posting to /api/user/register, handle errors with a try catch, show success messages, and navigate to login.

Integrate login by calling back-end APIs from the frontend, handle errors with try/catch, store the JWT token in local storage, and set the authorization header for protected routes.

Solidify authentication in Mern stack app with token-based protection of routes and login redirection when no token exists, and add a shared validation helper and nodemon.json to prevent backend restarts.

Implement a JWT authentication middleware to protect routes in the MERN stack movie reviews app, decrypting tokens, validating bearer, and attaching user id for secure frontend API calls.

Wrap the home page in a protected page and call get current user with the token from local storage to show the user name and protect data.

Master a simple app layout with a top header showing the logged-in user and a profile and home content area, featuring protected pages, login/logout flow, and remix icons for navigation.

Set up redux state management with redux toolkit to globally manage loading spinners during api calls, create the loader slice and store, and access user data across pages.

Learn to implement a Redux-driven loader spinner that appears during API requests, using a dedicated spinner component, centered overlay, and loading state management across protected, login, and registration pages.

Develop the artist model and backend endpoints for the MERN stack app, then design the form and integrate the UI with MongoDB artist data fields.

Implement CRUD operations for the artist resource in a MERN stack app, including add, get all, get by id, update, and delete with auth middleware.

Set up the admin user interface and routes, enabling admin-only access to movies, artists, and users, with protected rendering based on the user's admin status.

Build the artist front-end CRUD with a modal form. Capture name, profession, dob, debut year, debut movie, bio, and profile pic, with validation and form submission.

Implement artist create, read, update, and delete operations in a MERN app by wiring post, get, put, and delete requests to /api/artist, handling loading states and backend validation.

Show artists using an entity table with a data source and columns, render profile pictures, format birth dates, and implement edit and delete actions for each artist.

Implement edit artist functionality by selecting a row to pass the selected artist to the model pop up, pre-populating details and performing update or add operations, then reloading data.

Demonstrates deleting artists in a MERN stack app, with loading states and re-fetching to reflect changes. Highlights sorting by creation date and notes that file upload will be covered next.