Mern Stack Charity And Crowd Funding App

Build a real-time Charity and Crowd Funding App using the most powerful web tech-stack MERN.

What you'll learn

Build beautiful UI components using a combination of Tailwind CSS and Ant Design.

Implement a robust and secure authentication system using JWT.

The project will have two user roles: Admin and Normal User.

The primary function of the Admin is to create campaigns based on requests from different organizations or charity works.

Only the Admin will have access to all CRUD operations for the campaigns.

Users can create an account and select campaigns to donate to.

User donations will be processed using the Stripe payment gateway.

Once a donation is made, it will be reflected on both the user's donations page and the Admin's donations page.

Admins can view donations for all campaigns.

Admins can view reports for the campaigns.

User reports will include information on the campaigns they have donated to and the amounts donated.

Requirements

Basic knowledge in React

Basic knowledge in backend technologies like node , express

Description

Hello, Welcome to the course MERN Stack Charity and Crowd Funding AppCertainly, I'd be happy to elaborate on the features included in the MERN Stack Charity and Crowd Funding AppCreate a React app with Vite.Build beautiful UI components using a combination of Tailwind CSS and Ant Design.Implement a robust and secure authentication system using JWT.The project will have two user roles: Admin and Normal User.The primary function of the Admin is to create campaigns based on requests from different organizations or charity works.Only the Admin will have access to all CRUD operations for the campaigns.Users can create an account and select campaigns to donate to.User donations will be processed using the Stripe payment gateway.Once a donation is made, it will be reflected on both the user's donations page and the Admin's donations page.Admins can view donations for all campaigns.Admins can view reports for the campaigns.User reports will include information on the campaigns they have donated to and the amounts donated.Complete source code access and QA support.The MERN stack, comprising MongoDB, Express.js, React, and Node.js, is a powerful combination for building modern web applications. Its end-to-end JavaScript usage streamlines development, allowing for a seamless and efficient workflow. MongoDB offers a flexible, scalable NoSQL database, ideal for handling diverse data types and structures. Express.js and Node.js provide a robust backend framework, enabling the creation of fast, scalable server-side applications. React enhances the user experience with dynamic, high-performing front-end interfaces, making the MERN stack a popular choice for developers aiming to build full-featured, responsive web applications.

Overview

Section 1: Frontend setup

Lecture 1 Promo

Lecture 2 Create react app using vite

Lecture 3 Tailwind css setup

Lecture 4 Ant design setup

Lecture 5 Override ant design styling

Section 2: Authentication - Frontend

Lecture 6 Setup authentication routes

Lecture 7 Register page welcome content

Lecture 8 Register form

Lecture 9 Login form

Section 3: Backend setup

Lecture 10 Node + express server connection

Lecture 11 Mongo DB setup

Section 4: Authentication - Backend

Lecture 12 User model

Lecture 13 Register api

Lecture 14 Login api

Section 5: Authentication apis integration

Lecture 15 Register api integration

Lecture 16 Login api integration

Lecture 17 Authentication middleware

Lecture 18 Protecting routes

Section 6: Layout

Lecture 19 Layout part - 1

Lecture 20 Layout part - 2

Lecture 21 Restrict admin routes for normal users

Lecture 22 Common components

Section 7: Campaigns - Backend

Lecture 23 Campaign model

Lecture 24 Campaign apis

Section 8: Campaigns - Frontend

Lecture 25 Campaign form

Lecture 26 Firebase integration

Lecture 27 Save images to firebase

Lecture 28 Save campaign

Section 9: Show , edit , delete campaigns

Lecture 29 Display campaigns

Lecture 30 Campaigns actions

Lecture 31 Edit campaign

Lecture 32 Delete campaign

Section 10: Homepage and campaign info page

Lecture 33 Test campaigns data

Lecture 34 Show campaigns in homepage

Lecture 35 Campaign info page

Lecture 36 Donation card in campaign info page

Section 11: Donations - Backend

Lecture 37 Donation model

Lecture 38 Donation apis

Section 12: Donations - Frontend

Lecture 39 Integrate stripe

Lecture 40 Stripe backend

Lecture 41 Stripe frontend

Lecture 42 Make payment and save donation

Section 13: Show donations

Lecture 43 Test donations data

Lecture 44 User donations

Lecture 45 Admin donations

Section 14: Reports

Lecture 46 Admin reports API

Lecture 47 Admin reports UI

Lecture 48 User reports UI

Section 15: User profile and users list

Lecture 49 User profile

Lecture 50 Users list in admin

Lecture 51 Show campaign level donations

Section 16: Deployment

Lecture 52 Deployment part - 1

Lecture 53 Deployment part - 2

Beginner and intermediate web developers curious about real-time projects