Build a Full Stack Polling App using MERN Stack | MongoDB, Express, React, Node.js | MERN Project
In this video, we will build a full-stack Polling App using the MERN stack (MongoDB, Express, React, Node.js). This app includes features like user authentication, creating polls, voting, bookmarking, closing polls, and managing bookmarked or voted polls. Perfect for mastering MERN stack development!
Get Source Code:
https://buymeacoffee.com/timetoprogra...
Here are the functionalities implemented in this project:
1. User Authentication: Secure login and signup functionality using JWT.
2. Create Polls: Users can easily create polls with various types (e.g., single-choice, yes/no, rating, open-ended, image-based).
3. View All Polls: Displays a list of all available polls.
4. Filter Polls by Poll Type: Allows users to filter polls based on poll type (e.g., rating, image-based).
5. Vote on Polls: Allows users to vote on polls and view the results.
6. Bookmark Polls: Users can bookmark their favourite polls for quick access.
7. Close Polls: Admin functionality to close polls once they’re finished.
8. View Voted Polls: Users can view polls they’ve voted on and their results.
9. Delete Polls: Admin functionality to delete polls.
Frontend React Project Setup
00:00 - Demo of Polling App
08:50 - Frontend React app setup
09:43 - Tailwind CSS setup
12:18 - Project folder setup
15:08 - react-router-dom installation & setup
19:56 - Login screen UI setup
37:40 - Login form validation
41:01 - Completing Login screen UI setup
58:39 - Sign Up form validation
Backend Project Setup
01:01:16 - Node.js Express project setup
01:06:39 - MongoDB connection
01:12:11 - User Schema
01:17:39 - Register User API
01:26:36 - Login API
01:30:59 - Get User Info API
01:34:08 - Upload Image API
Login Page
01:45:41 - Login API Integration
01:54:43 - Sign Up API Integration
Dashboard
02:02:18 - Dashboard Layout component
02:03:27 - Navbar Component
02:06:08 - SideMenu Component
02:15:55 - User Details Card
Create Poll Page
02:31:28 - Create Poll Page
02:40:10 - Poll Option Input Component
02:49:18 - Poll Image Option Input Component
Backend Poll APIs
03:06:30 - Poll Schema
03:10:26 - Create Poll API
03:25:53 - Get All Polls API
03:36:22 - Vote On Poll API
03:44:09 - Get Voted Polls API
03:48:09 - Get Poll By ID API
03:50:01 - Close Poll API
03:52:09 - Bookmark Poll API
03:56:23 - Get Bookmarked Polls API
03:59:00 - Delete Poll API
Frontend Poll Features
04:08:51 - Create Poll API Integration
04:23:46 - Dashboard Page UI
04:25:52 - Filter By Poll Type Component
04:31:41 - Fetching All Polls
04:36:45 - Poll Card Component
04:55:22 - Poll Content Component
05:14:33 - Handle Submission of Vote
05:17:03 - Fetch Poll Details By ID
05:22:33 - Toggle Poll Bookmark Status
05:26:58 - Poll Result Content Component
05:46:14 - Implementing Infinite Scroll Pagination
User Pages
05:50:35 - My Polls Page
06:01:24 - Integrating Close Poll API
06:03:15 - Integrating Delete Poll API
06:07:06 - Voted Polls Page
06:07:47 - Fetching Voted Polls Details
06:11:54 - Bookmarked Polls Page
06:25:42 - Trending Polls Section
Also, check out:
Responsive Portfolio Website Using React JS and Tailwind CSS
• Responsive Portfolio Website Using Re...
#reactjs #mernstack #reactjstutorial #mernproject
Follow us on :
Instagram: / timetoprogram
Facebook: /
Pinterest: /
For more updates subscribe to your channel:
/ @timetoprogram-yt
Please Like | Share | Subscribe for more such videos.
Thank You.
Смотрите видео Build a Full Stack Polling App using MERN Stack | MongoDB, Express, React, Node.js | MERN Project онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Time To Program 19 Январь 2025, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 7,637 раз и оно понравилось 283 людям.