MERN Stack Charity and Crowd Funding App

Set up front-end authentication routes by creating login and register pages, wiring them with react router dom, and routing to the home page after login or registration.

Design a two-block register page for the MERN stack charity app, with a welcome content panel in the primary color, including Seh funds logo and a name, email, password form.

Create a register page in the mern stack charity app with full name, email, and password fields, vertical layout, validations, a submit button, and a login link.

Replicate the register form to design the login page, apply responsive mobile styling by hiding welcome content, and wire on finish to capture email and password values.

Set up the MERN stack charity app back end server by initializing npm, installing express, mongoose, dotenv, and nodemon, and creating index.js to run on a port.

Learn to configure a MongoDB connection in a Node.js app with mongoose and dotenv, using a db config module and .env URL to connect to the Shea funds mana database.

Define a mongoose user model with name, email, password, isAdmin, and isActive. Enable timestamps, enforce unique email, and export the users model.

Implements the register api in Express, checks for existing users, and saves the new user. Hashes the password with bcrypt js and notes the json web token library for login.

Explain how the login api endpoint validates a user, compares passwords with bcrypt, and issues a json web token containing the user id and email with a 24-hour expiry.

Integrate the register API endpoint with the UI by configuring the server and front-end proxy, using an async axios post to /api/users/register, and navigate to login on success.

Integrate the login API by posting to /api/users/login and store the JWT token in browser cookies for authorized requests. Handle errors, show loading state, and navigate to home on success.

Implement and apply an authentication middleware that verifies front-end tokens stored in cookies using JWT, attaches the decoded user to requests, and protects all API routes except login and register.

Protect routes by checking a token in browser cookies and redirect users to login or home, using public and private layouts for login, register, and home pages.

design and implement a header-based layout with role-based dropdown items: normal users access dashboard and donations, admins access dashboard, campaigns, users, and donations, plus a logout flow.

Fetch the current user in the private layout and store it in a Zustand store to render the header and menus without prop drilling, including admin vs user views.

Guard admin routes by validating the current user and admin status to prevent non-admin access. Show a not authorized message and a loader while fetching user data.

Create a reusable page title component for the MERN stack charity app by passing a title prop and applying shared styling, using Lucid React icons on home and campaigns.

Explore the campaign model in the MERN stack charity app, detailing fields like name, description, organizer, target amount, dates, category, media, and show donors, with API routes next.

Build campaign APIs by implementing create, read, update, delete routes with express router, authentication middleware, and the campaign model, including get all and get by id.

Create and edit campaign flows share a single campaign form component. The form collects name, description, organizer, target amount, category, dates, status, and handles on submit with multiple image uploads.

Learn to integrate Firebase by creating a project, configuring a web app, and setting up storage to upload campaign images and obtain URLs for the charity and crowd funding app.

Learn to upload images to Firebase storage from the frontend by building an uploads.ts helper that uploads multiple files and returns their download URLs.

Implement the save campaign feature by uploading images to Firebase and posting to the campaigns create endpoint, returning image URLs on submit. Handle loading and errors during submission.

Display campaigns in admin campaigns route by fetching data from the get all API and rendering an entity table with name, organizer, target amount, collected amount, category, and active status.

In this lecture, implement campaign actions in the table by rendering delete and edit icons, and wire the edit icon to navigate to admin/campaign/edit/{record_id} wrapped in bordered buttons.

Learn to implement the edit campaign flow by fetching campaign data with the id, pre-populating the form and images, and updating the campaign via a put api call.

Master the delete operation for campaigns in a MERN app by implementing Axios delete calls, error handling, and loading states, then refresh data after successful removal.

Mern stack charity app developers seed three real campaigns data—school in rural Kenya, medical aid for refugees, and the Amazon forest—while fixing null image handling and introducing AI-assisted test prompts.

Designs the home page to fetch all campaigns via axios, render them in a responsive grid with images, titles, and a progress bar, and navigate to campaign detail pages.

Build a campaign information page with a back to campaigns button, image gallery, description, and a donation card showing total donations and a donate now option, fetched by id.

Builds the donations card on the campaign info page, featuring a funds progress bar, amount and message inputs, a full-width donate button, and a modal payment flow that records donations.