Full-Stack Next.js + MongoDB Tutorial for Beginners - Story Voter App #1

#nextjs #nextjstutorial #mongodb #mongodbatlas #mongodbtutorialforbeginners #nextjstutorial #mongodbtutorial #typescript #tailwindcss
Hi Everyone!
In this video, I will teach you how to build a full-stack app with Next.js and MongoDB Atlas. This is a simple full-stack Story Voter application built with Next.js and MongoDB Atlas. Users can browse stories, vote or unvote them, and view their voted stories. Votes are persisted in an online MongoDB Atlas cluster.

*-*-*-*-* Get Alerts for New Courses and Content Releases
https://arnacode.com/

*-*-*-*-* Features
- Browse Stories: View a list of all available stories with cover images and titles.
- Vote / Unvote Stories: Cast or retract your vote on individual stories.
- Voted Stories: See all the stories you have voted for in one place.
- Story Details: Read the full description and view the larger cover image on an individual story page.
- Persistent Votes: Votes are stored in a MongoDB Atlas database, so your votes remain across sessions.

Chapters
00:00:00 App Overview
00:06:07 App Setup
00:09:20 Implementing the Routing - App Router
00:20:20 Coding the Stories Page
00:34:50 Implementing Route Parameters - Individual Story Page
00:56:55 Coding the Voted Stories Page
01:16:14 Coding the 404 Page
01:19:45 Coding the Navigation
01:22:15 Creating the App Layout
01:26:34 Loading all Stories - GET Route Handler
01:51:49 Loading an Individual Story - GET Route Handler
02:04:26 Loading Voted Stories - GET Route Handler
02:22:11 Voting Stories - POST Route Handler
02:42:15 Unvoting Stories - DELETE Route Handler
02:59:33 Setting Up MongoDB Atlas
03:39:04 Modifying the all Stories GET Route Handler
03:49:29 Modifying the Individual Story GET Route Handler
03:53:20 Modifying the Voted Stories GET Route Handler
04:05:42 Modifying the Voting Stories POST Route Handler
04:18:17 Modifying the Unvoting Stories DELETE Route Handler
04:27:23 Loading all Stories - Connecting Front-end to Back-end
04:32:45 Loading an Individual Story - Connecting Front-end to Back-end
04:36:52 Loading Voted Stories - Connecting Front-end to Back-end
04:46:10 Voting/Unvoting Stories - Connecting Front-end to Back-end
05:06:55 Styling the App + Final Touches
05:12:00 Conclusion

*-*-*-*-* Source Code
https://github.com/ArnaCode/Next-JS-MongoDB-Story-Voter-App

Видео Full-Stack Next.js + MongoDB Tutorial for Beginners - Story Voter App #1 канала Muslim Helalee