100 Hours Web Development Bootcamp - Build 23 React Projects

Build a beginner friendly full stack note taking app using the daemon stack (MongoDB, Express, React, Node), starting with api creation, testing, a responsive front end, rate limiting, and deployment.

Set up the backend and frontend using the MERN stack, install Node.js, and build a simple Express API with a React frontend. Explore API concepts, routing, and HTTP status codes.

Use nodemon for automatic restarts in development, configure production start scripts, and build routes with get, post, put, and delete for nodes using dynamic IDs and JSON responses.

Organize a growing web app by separating routes into dedicated folders and controllers, modularizing with express routers, and prefixing API paths for scalable structure.

Set up a free MongoDB NoSQL database, connect with mongoose, and securely store the connection string in a .env file for backend development.

Build and test async controllers to manage nodes in a MongoDB collection, enabling fetch all nodes, create, update, fetch by id, and delete nodes via Express.json middleware.

Explore middleware concepts and implement rate limiting in a Node app, using app.use, request and response objects, next, and a 429 rate limit response to protect servers from abuse.

Set up a front-end React app with Veet, install dependencies, and run the dev server. Build home, create, and detail pages with React Router, Tailwind CSS, and Daisy UI.

Build a home page with a navbar and create link, use lucid react icons and tailwind, fetch notes with axios, display a grid of node cards, and handle rate limit.

Create a functional create page with title and content inputs, loading state, and form submission. Post to localhost:5001/api/notes via a shared axios instance, navigate home on success, and handle errors.

Learn to implement delete functionality in the notecard component by handling events, confirming deletion, sending an API delete request, and updating the user interface by filtering the nodes.

Build a detail page that fetches a node by id from the URL, displays its title and content, shows loading state, and enables updating or deleting via API calls.

Push to GitHub, deploy on render.com’s free plan, hide credentials with a gitignore and dot env, then install dependencies and build front and back ends to generate a dist folder.

Build and deploy your first full stack MERN app to create, delete, and update products stored in a database, with a modular, maintainable codebase and responsive UI with light/dark mode.

initialize a root project, install express, mongoose, and dotenv, and run a node server with es modules and nodemon; connect to MongoDB Atlas via a .env mongo_uri.

Learn to build a products API with MongoDB and Mongoose, create a product model, and implement CRUD endpoints and testing with Postman.

Learn Chakra UI setup for a React app by configuring environment ports from .env, installing version two of Chakra UI, wrapping the app with ChakraProvider, and building a navbar.

Build a multi-page React app with a navbar and create page using react-router-dom and Chakra UI, featuring a light/dark toggle and a product creation form.

Learn to build a global product store with Zustand, implement a create product flow using an API endpoint via proxy, validate input, and show toast notifications across app components.

Build a responsive home page that lists products as cards with edit and delete actions, fetches data from an API, and uses Chakra UI components and a modal for updates.

Learn how to deploy a full-stack application on a single domain by serving the React dist as static assets through Express, configuring production, and deploying to Render.com.

Build a full stack real-time chat app with a React front end and Node.js backend using web sockets. Includes signup, login, messaging, JWT authentication, security, profile themes, and free deployment.

Set up a backend for a chat app by creating a backend folder, initializing a Node project, installing Express, mongoose, dotenv, jsonwebtoken, bcryptjs, and socket.io, and scaffolding routes and controllers.

Set up a MongoDB database with a dotenv config, connect with mongoose, and build user and message models with timestamps, enabling sign-up flow and chat data persistence.

Implement a secure signup flow on the backend by validating input, hashing passwords with bcrypt js, creating the user, generating a JWT, and returning it in an http-only cookie.

Implement login, logout, and profile update backend features, including bcrypt password check, JWT cookies, protect routes, cloudinary image uploads, and a check endpoint to verify authentication.

Explore building message routes and a message model in an Express and MongoDB backend, including protected endpoints to list users, fetch chat history, and send text or image messages.

Select tailwind css version three and use veed to initialize a react app. Install the exact version four 4.12.23 for tailwind ui and update the tailwind config.

Set up a React app with react router dom routing and tailwind CSS; install axios and zustand, build a global auth store, and protect routes with backend cors.

Build frontend login and signup pages in React, with form validation and show/hide password, using an auth store for signup and login via axios and toasts.

Build a profile page showing read-only full name and email, with an image upload to Cloudinary that updates the backend and displays a loading state.

Build a settings page that lets users select from 32 Daisy UI themes using a Zustand store and local storage, applying the chosen theme with data-theme.

Build a React chat interface with a left sidebar of users and a placeholder, using a Zustand chat store to fetch users and messages and manage loading states and skeletons.

Build a chat container with a header, message history, and a message input that fetches messages for the selected user and shows a loading skeleton.

Explain and implement real-time features with socket.io on top of an existing Node.js and Express REST API, covering client and server events, online users, and private message delivery.

Deploy this full stack app by building the front end, serving it with the back end under a single domain, and configuring production versus development environments for axios requests.

build a full stack real-time chat app with iOS notifications, online status, and glass morphism ui using tailwind and daisy ui, with jwt auth and socket.io.

Create a full stack setup by scaffolding a front-end and back-end with an express server. Build authentication routes with sign up, login, and logout using dotenv, mongoose, and jsonwebtoken.

Set up MongoDB Atlas, connect with Mongoose, create and sign up a user model, hash passwords with bcrypt, generate a JWT token, and set an http-only cookie.

Implement login and logout routes with signup flow, using bcrypt to verify passwords, generate tokens, and manage cookies, including robust error handling and token-based authentication.

Design a MongoDB messaging system with messages and conversations collections, including timestamps and references, and build protected jwt-based routes to send and fetch messages.

Build and secure api/users routes in Express to fetch sidebar users, exclude the logged-in user, and omit passwords, using a dedicated controller and protect middleware.

Learn to initialize a React app with Veed using Tailwind CSS version three, install UI version four via 4.12.23, and update Tailwind CSS config with version four settings.

Design and implement frontend auth pages using React and Tailwind CSS, creating login and signup forms with a glass morphism interface, a chat home page, and a git-managed project setup.

Create a responsive home page with a left sidebar and right message container using Tailwind CSS. Build modular UI components like search input, conversations, and messages, using React Icons.

Connect the front end to the back end using react router dom, implement signup and login flows, and protect routes with a context-driven auth state that persists via local storage.

Use zustand to manage a global chat state with selected conversation and messages, fetch conversations via a dedicated hook, show loading, and reset on unmount.

Add send message functionality with a hook, post messages to an API, manage loading and local state, fetch messages, render with skeletons, auto-scroll, and implement search for conversations.

Learn to add a socket.io based real-time messaging and online user presence to a full-stack app, with server and client integration, event handling, and cleanup to prevent duplicate listeners.

Deploy a full stack React app by building the front end into dist, serving it with Express static, and deploying via Git to Render with production env vars and socket.io.

Build a real-time Spotify-inspired React app with chat, online status, activity tab, and a queue-based playback; create an admin dashboard and deploy a full-stack app for free.

Set up a TypeScript front end and a JavaScript back end, configure Tailwind and Shatkin UI, and implement Clerk authentication with Google before building an Express API.

Set up an express server with nodemon dev script and modular routes, environment variables, creating user, auth, admin, song, album, and stats routes, plus MongoDB integration.

Set up a MongoDB database with mongoose, build user, song, album, and messages models, and implement clerk-based signup and login with an auth callback.

Attach clerk express middleware to requests to authenticate users, exposing request.auth.userId, and implement protect route and require admin middleware to enforce login and admin access.

Learn to build secure admin routes and controllers for managing songs and albums, including uploading images and audio with Cloudinary, and implement robust error handling and middleware.

Implement album routes and controllers to fetch all albums and fetch an album by id with populated songs using Mongoose populate and proper error handling.

Create admin routes to fetch all songs newest first, and expose featured, made-for-you, and trending endpoints returning random songs via MongoDB aggregation, including image, title, artist, and audio URL.

Build protected user routes to fetch all users except the current one and implement admin stats for songs, albums, users, and unique artists using parallel queries with scikit io.

Create an auth provider that injects a token into axios requests with bearer header. Implement an auth callback page to handle google sign-in and save new users to the database.

Build a layout with left hand side, main content, and right hand side 'friends activity'—shared by home, chat, and album, via outlet, while admin and oath callback pages omit it.

Learn to build an album page that fetches a specific album by id, renders a header with image, title, artist and year, and shows a song list with duration formatting.

Create the friends activity tab by fetching users via a Zustand chat store, with a login prompt and a scrollable avatar list for real-time messaging later.

Build the homepage by wiring admin status checks with a Zustand store, fetch featured, made-for-you, and trending songs, and render a responsive section grid with skeletons for loading states.

Build and integrate an audio element-based player in React using Zustand, managing a song queue, play/pause, next/previous, and auto-advance on song end for seamless album playback.

Build a reusable play button component for a featured grid, handling current song, play/pause toggling, hover visibility, and integration with a player store for playback controls.

Build a playback controls component in the main layout, wiring play, next, previous, and volume with an audio element and player store. Implement time updates, duration formatting, and queue initialization.

Create an admin page with song and album views, top analytics, a songs table, and dialogs to upload image and audio files to create songs and link them to albums.

Build the admin albums interface with an albums table and add album dialog, enabling fetch, display, delete, and creation of albums with cover image, title, artist, and release year.

implement real-time features using socket.io on an express server, handling user connections, broadcasts, private messages, and online status with a synchronized server-client event flow.

Build a responsive chat page UI in a React app with a header, message area, and input, enabling real-time messaging, online status, and user activity updates via sockets.

Design a 404 not found page within the main layout, using a catch-all route and a back-to-home button with React Router navigation, ready for deployment.

Deploy a full stack app to Render with a single domain, using a production dist build and dynamic api URLs, and automate temp file cleanup with cron jobs.

Build a full-stack social app with the MERN stack, implementing authentication, posts with text or images, comments, likes, notifications, users, profile updates, and reusable components, styled with Tailwind Daisy UI.

Explore backend setup with MongoDB and JWT auth, UI design with Tailwind CSS and routing, React Query integration, deployment with Render, plus prerequisites HTML and CSS.

Initialize a full stack setup by creating front-end and back-end folders, bootstrapping a React app, and wiring Express, Mongoose, JSON Web Token, and route/controller/model structure for MongoDB.

Creates a mongoose user model for a NoSQL collection with username, email, password, followers, following, and profile fields; implements signup, login, and logout using JWT cookies and protected routes.

Define user routes and controllers, implement get profile, follow/unfollow, and update profile endpoints, ensure authentication, and integrate Cloudinary image handling.

Build post model with mongoose, including user, text, image, likes, and comments; implement protected routes for create, delete, like, comment, and fetch all, following, and user posts with populate.

Build and test notification routes and controllers in a Node.js backend, including protected get and delete endpoints and user-populated notification data.

Learn to initialize a React app with Veed, use Tailwind CSS version three, and apply the UI version four component library, with notes on upcoming Tailwind CSS changes.

design and implement a React UI rapidly using tailwind css and daisy ui, wiring routes, components, and mock data to deliver a responsive front-end prototype.

Protects frontend routes using react query for signup, login, and logout flows; employs auth user queries and invalidation to guard pages and manage user state.

Fetch posts for the home page using a feed type switch to show all posts or following posts, fetch with useQuery, handle loading, refreshing, and refetch on feed type change.

Implement post deletion by verifying ownership with the authenticated user, display a trash icon for owned posts, and perform a delete mutation that refreshes data via query invalidation.

Create posts in a React app by handling text and image inputs, uploading images, and posting via a mutation with react query that invalidates queries to refresh the UI.

Fetch suggested users from the API and display them in the right panel using react-query, handling loading and empty states, then replace fake data with real endpoint data.

Create a reusable follow and unfollow hook in React, using mutation and the query client to invalidate queries across right panel and profile page, with error handling and loading state.

Implement a like post mutation in the post component, toggling the like state and showing a loading spinner. Update the cache with the new likes array to avoid refetching.

Add a comment mutation using useMutation and react-query to post comments to /api/posts/comment with a post id and text. Handle success with toasts and invalidate queries.

Build a notifications page using react query to fetch api notifications, delete with a mutation, show toasts for results, and invalidate queries to refresh the UI.

Create a dynamic profile page that fetches user data via an endpoint using the username from React Router, renders profile details and posts, and implements prefetching and refetching for updates.

Update user profiles and follow interactions using a modal, enabling profile and cover image updates via API mutations with query invalidation.

Refactor profile updates with a custom use update user profile hook, passing form data to mutation, and reset image fields for a reusable, clean update flow.

Deploy a full stack React app for free on Render.com by linking a GitHub repo, configuring server.js to serve frontend and backend on one domain, and building for production.

Build an e-commerce store with stripe payments, gift cards, coupons, a $200+ cart discount, and success or cancel pages, plus an admin dashboard and Redis-powered analytics with a line chart.

Set up the backend for an ecommerce API by configuring a Node.js project with express, nodemon, dotenv, and MongoDB, wiring routes for signup, login, and logout.

Create an organization and a project, deploy a database using a free mongodb option, and connect your node.js app with mongoose using a connection string and environment variables.

Learn how to implement robust authentication in a Node.js/MongoDB app using bcrypt password hashing, JWT access and refresh tokens with Redis (Upstash), cookies, signup/login/logout flows.

Build product routes with admin-protected access, create the product model and controllers, and enable featured products caching via Redis with image uploads to Cloudinary, plus category and recommendations support.

Build cart routes in a react and express app by adding products to the cart, updating quantities, removing items, and retrieving all cart products through protected routes.

Build and secure coupon routes with a Mongoose coupon model, and create protected endpoints to fetch a user’s active coupon and validate codes with expiration and discount handling.

Create a payment workflow with an order model and Stripe checkout sessions, integrate coupon handling, environment variables, and payment routes to process, verify, and record orders.

Implement analytics routes in an admin-protected API, using an aggregation pipeline to compute total users, total products, sales, and revenue, and generate daily chart data for the last week.

Note Tailwind CSS version three and visit tailwindcss.com; select version three in the documentation framework guides, and use Veed to initialize a react application in the next part.

Set up a react front end with tailwind, configure routing for home, signup, login, and admin dashboard, and prepare to connect to an API for deployment.

Design a responsive signup page in a React app using Framer Motion for animations, with name, email, password, and confirm password fields and a US state select.

Build a login page and signup flow with Axios and a Zustand user store to protect routes, show toasts, and manage cookies and tokens.

builds a homepage user interface that demonstrates login flow, refresh token handling with Upstash, and a responsive categories grid using images from public, linking to category pages.

Build an admin dashboard to manage products, including a create product form with image upload, a products tab with delete and feature actions, and analytics guarded by admin access.

Build a dynamic category page that fetches products by category from the backend using the url parameter and renders product cards with motion effects, with loading and no-products handling.

Build a cart store with Zustand, fetch cart items via axios, add items with quantity management, and calculate subtotal and total with coupon updates that refresh the UI.

Build a protected React cart page that fetches and renders cart items, supports quantity updates and deletion, and includes an order summary with coupons, recommendations, and Stripe payments for checkout.

Learn how to implement stripe payments in a react app by wiring the frontend to a checkout session, handling quantity, coupons, and a purchase success flow with cart clearing.

Learn to implement coupons in the cart with get, apply, and remove functions, validate coupon codes, update totals, and handle edge cases like duplicate coupons and endpoint mismatches.

Build a reusable analytics card UI and a responsive, motion-enhanced dashboard with a daily sales chart, manage loading states, fetch analytics via axios, and render charts with recharts.

Fetch featured products on the homepage and render a responsive slider with next and previous controls, tracking current index and items per page for a smooth carousel.

Implement axios interceptors to automatically refresh expired access tokens with a refresh token, retry failed requests, and keep users logged in without re-authentication after 15 minutes.

deploy a full stack app by configuring build scripts, installing backend and frontend dependencies, creating a dist folder, and deploying via Fender.com and render with production env.

Build an authentication flow with sign up, log in, email verification (six-digit code), welcome and reset password emails, and secure JSON web tokens, using React, Tailwind, MongoDB, Node, and Express.

Initialize a backend project, install core packages (express, bcryptjs, mongoose, jsonwebtoken, dotenv, mailtrap), configure ES modules, create a server with a hello world route, and use nodemon for auto restart.

Set up MongoDB Atlas project and free cluster, store the connection string in a .env file, and build a mongoose user model with email, password, timestamps, and oauth routes.

Create a signup endpoint that validates input, hashes passwords with bcrypt, saves a new user, generates a verification token, issues a JWT, and stores it in an http-only cookie.

Explore how to sign up for mail trap, configure a node js sender, and send verification emails with html templates to verify user accounts and manage transactional and bulk messages.

Implement verify email and logout workflows by validating verification tokens, updating user status, sending a welcome email via mail trap template, and clearing cookies on logout.

Implement a login endpoint that validates credentials, handles invalid credentials, compares passwords with bcrypt, issues a token in a cookie, updates last login, and redirects to the dashboard.

Explore implementing a forgot password flow: user requests a reset email, receives a tokenized link, and resets the password through a secure frontend and backend endpoint.

Learn to implement reset password with token-based verification, update hashed passwords, and build check auth endpoints using a verify token middleware and protected routes.

Before the next video, switch to Tailwind CSS version three by visiting tailwindcss.com and selecting version three, then follow the documentation for Veed to initialize a React app.

Build a React app in the front end folder, set up tailwind CSS and react router dom, and implement signup, login, and home routes with animated shapes with framer motion.

Create a responsive signup page UI with Framer Motion animations, Tailwind CSS gradient styling, and reusable input components; implement a password strength meter, icons, and a login link.

Build a login page user interface in React with email and password inputs, on-submit handling, and a loading spinner; provide navigation to forgot password and sign-up flows.

Build a six-field email verification UI in React, managing state with an array and refs, handling paste, keydown, and auto-submit when all fields are filled.

This lecture shows building a frontend signup flow with Zustand for auth state and axios for signup requests, including an auth store, sign-up handling, and navigation to email verification.

Implement an async verify email flow using Axios post with a verification code, manage loading and error states, then protect routes by redirecting authenticated and verified users to the dashboard.

Implement a login flow with email and password, handle loading and errors, issue a JWT for dashboard access, and prepare the dashboard, logout, and forgot password verification workflows.

Develop a forgot password flow in a React app, with routes for forgot and reset password, email input, and an API call to send a reset link.

Learn how to deploy a full stack application on a single domain, build production assets, configure express to serve the React dist, and deploy with Render using GitHub.

Build and deploy a responsive dating app with real-time matches and emoji chat, image uploads on profiles, and authentication, using NodeJS express, MongoDB, Socket.io, React, Tailwind, and Zustand.

Create api and client folders, initialize a node project, install Express, Mongoose, JSON web token, and auth tools, and build routes for oauth, users, messages, and matches.

Set up a MongoDB-backed authentication flow by creating a mongoose user model, hashing passwords with bcrypt, and implementing a sign up endpoint with JWT-based tokens stored in cookies.

Build and secure login and logout flows by hashing passwords before saving, validating credentials, issuing JWTs, and implementing a protected route with a cookie-based token check.

Learn to build protected user routes for updating profiles, handle image uploads with Cloudinary, and store image URLs in MongoDB using env configuration and error handling.

Build four protected api endpoints for swiping left and right, fetching matches and profiles, and implement controllers with data population and gender-filtering logic for a dating app prototype.

Implement message routes with a post /send to send messages and a get to fetch conversations, protected by route guards. Create messages model with sender, receiver, content, and timestamps.

Select Tailwind CSS version three and use Veed to initialize a React app, then install UI version four with the exact tag 4.12.23 and update the tailwind config.

Set up a react app in the client folder with veet, add Tailwind CSS, configure routing and state tools, and run the dev server to see hello world.

Build an authentication page with switchable login and signup cards using Tailwind. Use Zustand for auth state and Axios for API calls, securing routes and handling signup, login, and logout.

Build a responsive profile page in React with a header dropdown, prefilled form from the auth store, base64 image uploads, and profile updates via put to /users/update.

Design a responsive home page with a left sidebar, a top header, and swipeable user profiles in the center, including mobile sidebar toggle and loading and no matches found states.

Build and fetch matches and user profiles with a zustand store, implement loading states, and create a tinder-style swipe UI in React.

Learn to implement real-time communication with socket.io in a react app by building a server and client, authenticating sockets, and emitting and listening to events for messages and new matches.

Build a chat page with real-time messaging using socket.io, manage messages with a Zustand store, and implement API endpoints, emoji picker, and a responsive UI.

Learn to deploy a full stack app by configuring server.js to serve the React build on the same domain, building client assets, and deploying on Render with production env vars.