React 19 & Next.js 15 & MySql- Full-Stack Social Media App Tutorial

React 19 & Next.js 15 & MySql- Full-Stack Social Media App Tutorial

throughout this tutorial, we'll learn how to build a full-stack social media application similar to Facebook with the latest cutting-edge technologies including the latest version of Next.js which Next.js 15 alongside React 19 for frontend and Prisma for database access.

If you're looking to build a social media app using the latest version of Next.js, this comprehensive tutorial will walk you through every step of the process. Whether you're a seasoned developer or just getting started, this tutorial is designed to cover all the essential aspects from installation to deployment.

You can find the complete source code from this link.

Here is the detailed outline:

Introduction

We begin our journey with a brief introduction, setting the stage for what’s to come. We'll be diving into the nuts and bolts of building a full-featured social media application using Next.js 15.

Installing the New Version of Next.js

At 4:00, we get our hands dirty by installing the latest version of Next.js. This step is crucial as it lays the foundation for everything that follows.

Social Media App Structure (Backend and Database Design)

By 7:00, we move on to structuring our app. This involves designing the backend and setting up the database, which are critical components for any social media platform.

Next.js 15 App Router Pages and Layout

At 12:30, we explore the new app router pages and layout features in Next.js 15, helping us organize our application efficiently.

Next.js Responsive Navbar with Tailwind

Jumping to 18:09, we design a responsive navbar using Tailwind CSS, ensuring our app looks great on all devices.

React Next.js Hamburger Menu Design

At 22:30, we implement a stylish hamburger menu for better navigation on mobile devices.

Mobile First Design with Tailwind CSS

By 27:00, we focus on a mobile-first design approach, ensuring our app is optimized for smaller screens from the get-go.

Next.js Authentication Structure

At 33:27, we tackle the authentication structure, a key aspect of any social media app to manage user accounts securely.

Next.js 15 Clerk Auth Tutorial

Moving to 36:28, we dive into Clerk authentication with Next.js 15, simplifying the process of adding robust auth features.

Next.js Social Media App Homepage Design

At 50:17, we design the homepage, which is the heart of our social media app, making sure it’s engaging and user-friendly.

User Stories Component Design

By 53:25, we create the user stories component, a popular feature in many social media platforms today.

Social Media App New Post Component Design

At 58:30, we build the new post component, allowing users to share updates and content easily.

React Next.js Social Media App Post Card Design

At 1:04:50, we design post cards to display user posts neatly and attractively.

Comments Section Design

At 1:13:09, we implement a comments section to foster interaction and engagement among users.

React Next.js Rightbar (Menu) Design

By 1:20:58, we design the right sidebar menu for additional navigation options.

React Next.js Leftbar (Menu) Design

At 1:47:20, we complement our design with a left sidebar menu, balancing the layout.

React Next.js Social Media App User Profile Page Design

At 1:58:30, we focus on the user profile page, allowing users to manage their personal information and activity.

Next.js MySQL Installation with VPS

By 2:03:10, we install MySQL on a VPS, setting up our database environment.

Next.js 15 Prisma CRUD Tutorial

At 2:06:05, we delve into Prisma CRUD operations, simplifying database interactions.

Prisma ORM Social Media App Database Design

At 2:10:50, we design the database schema using Prisma ORM, aligning it with our app's requirements.

Next.js Prisma Server Actions Tutorial

At 2:26:45, we explore server actions with Prisma, enhancing our backend functionality.

Next.js 15 Clerk Webhook Tutorial (How to Add Clerk User to Database)

By 2:31:50, we integrate Clerk webhooks to manage user data effectively.

Next.js 15 Data Fetching on Server Components

At 2:43:36, we discuss data fetching techniques on server components, optimizing performance.

Next.js 15 Server Actions

At 3:10:30, we look at server actions in Next.js 15, a powerful feature for backend operations.

useOptimistic Hook Tutorial

By 3:19:02, we learn about the useOptimistic hook, improving user experience by handling updates smoothly.

Fetch User Media

At 3:31:50, we implement media fetching for user profiles, enhancing the visual appeal.

Next.js Prisma Social Media App Following Requests

At 3:37:36, we add functionality for following requests, a key social feature.

Next.js Update User Profile with Server Actions

By 3:52:13, we enable profile updates using server actions, keeping user data current.

Next.js Server Actions Zod Form Data Verification

At 4:07:10, we ensure data integrity with Zod form data verification.

Next.js How to Upload Image?

At 4:13:25, we cover image upload capabilities, essential for user-generated content.

Next.js 15 useActionState Hook Tutorial

By 4:20:28, we explore the useActionState hook, managing action states effectively.

Next.js 15 useFormStatus Hook Tutorial

At 4:27:54, we delve into the useFormStatus hook, tracking form submission states.

Next.js Social Network App Fetch Friend and Profile Posts

At 4:30:00, we fetch posts from friends and user profiles, populating the feed.

Next.js Social Media App Like Functionality with useOptimistic

By 4:40:58, we implement like functionality, enhancing user interaction.

Next.js 15 useOptimistic Hook (Add a Post/Comment Optimistically)

At 4:50:26, we use the useOptimistic hook to add posts and comments, ensuring a seamless experience.

Add a New Post

At 5:06:12, we focus on the feature to add new posts, a core function of the app.

Next.js Social Media App User Stories

By 5:17:30, we revisit user stories, adding final touches.

Next.js Social Network App Delete User

At 5:35:24, we enable user deletion, a necessary administrative function.

How to Deploy Full-stack Next.js App to a VPS with a database?

At 5:42:01, we cover the deployment process, ensuring your app goes live smoothly.

Outro

Finally, at 5:54:17, we wrap up with a brief outro, summarizing what we've learned and achieved.

This guide takes you through the entire process of building a social media app with Next.js, from installation to deployment, covering every essential feature and functionality along the way.

  • Date: