MERN Stack Event Booking & Management App 2024

design and implement authentication screens with react router dom routing, creating login, register, and home pages; implement a two-pane layout with route-based right-side forms and responsive mobile and desktop views.

Build the register your account form with an entity form component, collecting name, email and password, using on finish and required validations, plus a login link via React Router Dom.

Verifies email and password, compares passwords with bcrypt, generates a JWT token containing the user id using a secret, and returns the token with a login successful message.

Integrate registration and login API endpoints with the front end using axios and a dedicated user service. Configure the proxy, handle loading and errors, and navigate to login after registration.

Learn to integrate a login API in a MERN stack app by storing the returned token in browser cookies with js-cookie, manage loading, errors, and post-login navigation.

Implement authorization across front end and back end by building a validate token function and enforcing access: hide login/register for valid tokens and require a token for private pages.

Integrate get current user API on the front end using Axios, pass tokens via cookies or headers for protected API requests, and display a welcome message when token is valid.

Implement public and private layouts to enforce token-based access, redirect with cookies, and prevent the content blink.

Render dynamic admin and user menus with lucid react icons, each item defined by name, icon, path, and active state; wire through private layout and map over items.

Develop and expose full event CRUD APIs in a MERN stack app, including create, edit, delete, and fetch operations with token validation and event model integration.

Create an event form with a reusable steps component for create and edit modes, organizing steps as general, location and date, media, and tickets.

Builds the general step of the event form in a MERN stack app, capturing event name, description, organizer, and a dynamic guest list with add and remove chips.

Guides testing and bug fixing for the save event flow, validating future dates, ensuring loading state management, and disabling step navigation until the current step is complete.

Fetch events from the get events API, render them in the admin events table, manage loading and errors, and prepare date formatting with the deejays library.

Learn to design a responsive event card with a left image and right text, showing name, description, address, location, date, time, and a view event button.