Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Build a Full Stack Polling App using MERN Stack | MongoDB, Express, React, Node.js | MERN Project
Play lesson

Build MERN Stack Projects: Beginner to Advanced Tutorials - Build a Full Stack Polling App using MERN Stack | MongoDB, Express, React, Node.js | MERN Project

Master MERN with AI-Powered Apps: Transform Ideas into Reality!

4.0 (1)
10 learners

What you'll learn

Develop and integrate AI-powered features using the MERN stack
Create dynamic, full-stack web applications with React and Node.js
Utilize Express to handle server-side logic and routing efficiently
Implement MongoDB for scalable database solutions in applications

This course includes

  • 63.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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/timetoprogram/e/361129 🔥 Complete Web Developer Bundle Includes 100+ React Components, 12 Full Stack Projects, 5 Cheat Sheets & 500+ Interview Q&As 👉 Get it here: https://buymeacoffee.com/timetoprogram/e/474148 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 https://youtu.be/TYWQFSNY7Hg #reactjs #mernstack #reactjstutorial #mernproject Follow us on : Instagram: https://www.instagram.com/timetoprogram/ Facebook: https://www.facebook.com/TimetoProgram/​ Pinterest: https://pinterest.com/TimeToProgram/​ For more updates subscribe to your channel: https://www.youtube.com/channel/UCy6osK_bBJgvfeu8R1GGucw Please Like | Share | Subscribe for more such videos. Thank You.

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere