MERN Stack for Absolute Beginners - Stories Full Stack - App #1
#typescript #tailwindcss #react #reactfrontend #reactrouter #nodejs #firebase #firebaseauthentication #expressjs #axios
Hi Everyone!
Welcome to Stories, a full-stack MERN app. This app is designed to get you started with the MongoDB + Express + React + Node stack. We will write the frontend using React, TypeScript and Tailwind CSS. For backend, we will use Node and Express. And the database is MongoDB. We will also implement user authentication using Firebase.
*-*-*-*-* Get Alerts for New Courses and Content Releases
https://arnacode.com/
By the end of this app, you will be able to:
Code the frontend of an app using the modern stack, React, Typescript and Tailwind CSS
Create a backend server using Node and Express JS
Create a MongoDB database and connect it to the backend of the app
Implement user authentication with Firebase Authentication
Chapters
00:00:00 App Overview
00:08:24 Front-end Setup
00:12:02 Tailwind CSS V4 Installation
00:21:17 Implementing App Routing - React Router
00:40:44 Implementing the 404 Not Found Page
00:42:40 Implementing the Home Page
00:46:52 Implementing the Navigation
00:51:16 Implementing the Stories Page
01:14:40 Implementing the Individual Story Pages
01:29:41 Installing Postman
01:34:31 Back-end Setup
01:39:56 Setting Up the Express Server
01:51:12 Testing the name GET Endpoint
02:00:38 Creating/Testing the likes POST Endpoint
02:07:43 Creating/Testing the comments POST Endpoint
02:18:12 MongoDB Setup
02:28:22 Connecting the Express Server to MongoDB
02:41:33 Modifying the Express Server Endpoints to Communicate with MongoDB
02:56:42 Installing Axios
02:56:12 Creating a React Router Loader
03:01:32 Making the first HTTP Request with Axios
03:11:39 Displaying likes from MongoDB in the Browser
03:25:30 Displaying comments from MongoDB in the Browser
04:01:26 Firebase Setup
04:07:26 Implementing the Login Page
04:22:13 Implementing the Create Account Page
04:32:34 Creating a Firebase Auth Instance - Front-end
04:33:21 Creating the First User Account
04:35:13 Creating/Implementing a Custom Hook
04:58:36 Implementing Firebase Auth on the Back-end
05:06:01 Creating an Express Middleware
05:21:28 Implementing Auth Tokens on the Front-end
05:24:11 Conclusion
*-*-*-*-* Source Code
https://github.com/ArnaCode/MERN-Stor...
*-*-*-*-* Complete MongoDB Installation Guide
• How to install MongoDB 6 on Windows 10/ Wi...