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.

Learn to design a registration page using a two-column grid with a left welcome content pane and a right registration form, responsive for LG devices and mobile.

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.

Replicate the registration page as a login page with email and password, remove the name field, enable login validation, and link to the register page using Montserrat styling.

Set up the backend for the MERN stack event booking app by creating a node and express server, installing modules, and configuring index.js to run on port 5000.

Create a config/dbConfig.js to establish a mongodb connection in a node.js app using mongoose, exporting connectMongoDB and loading the mongo URL from dotenv.

Define a user model with name, email, password, isadmin flag, and profile picture in a Mongoose schema with timestamps, preparing authentication related APIs and a user route for registration.

Register a new user by posting to the registration endpoint, check for existing users, hash the password with bcrypt, and save to the database with clear responses.

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.

Implement a token validation middleware for all protected APIs using cookies and jwt, decrypt the token, and attach the user id to the request for fetching the current user.

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.

Create a responsive private layout with a left sidebar showing the project title and user name, featuring dynamic admin or user menus (home, events, bookings, users, reports, logout).

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.

Highlight menu items with is-active states using react router dom and use location, employing includes for nested admin routes. Wire desktop navigation with use navigate and prepare mobile sidebar styling.

Implement a responsive layout for the MERN stack event booking & management app, adding a hamburger-triggered left drawer on mobile, a full sidebar on large screens, and a cookie-based logout.

Use Zustand as a global state store for the current user. Share currentUser across private layout and home page to reduce API calls and avoid prop drilling.

Implement a spinner component to show a centered loader while waiting for the current user API response in a MERN stack event booking app.

Develop the event model and routes for the MERN backend, detailing a four-step event form and a MongoDB schema with name, description, organizer, guests, location, date, time, media, and tickets.

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.

Set up admin routes for events, create a reusable page title component, and implement create and edit event pages with protected routes and navigation to admin/event/create and admin/event/edit/:id.

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.

Fixes a bug in the guest remove function by using a guest key and the filter method to update the event's guest list, ensuring accurate deletion.

Add a multi-step event form with back and next controls in a MERN stack app, validating required location, date, and time fields and routing back to the admin events page.

Implement the media step of the event form with an entity upload component to select images, store them in selected media files, render previews, and prepare Firebase upload on save.

Learn to manage ticket types in the event form by adding, editing, and deleting tickets stored as an array with name, price, and limit.

Set up firebase for next.js, create Shay Events Mern project, install firebase and dotenv, configure environment variables, initialize firebase app in config.ts, and adjust storage rules to allow read/write.

Learn to implement Firebase image and media upload using cloud storage, obtain downloadable URLs via get download URL, and integrate into a create event flow with an API service.

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.

Standardize date and time across the app with a shared date time format helper using dayjs, then render edit and delete actions in the event table that navigate to admin/event/edit/{id}.

Learn to implement the edit event flow by fetching event data by id, populating the form with initial data, and handling tickets and media population and updates.

Learn to save updated data in the edit form, updating media with new images and adding a vip ticket type via the update event api using the event id.

Implement the delete operation for events in a MERN app by wiring the delete event API call to the events page button, handling loading, and refreshing the list after deletion.

Fetches events for homepage from real-time data, renders them in a card layout with images, location, date and time, and ticket types, and enables navigation to the detailed event page.

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.