Building a Full Stack Social Media Application

Overview

• Creating a social media app using Next.js latest version.
• Features of the application include profile cards, menu, advertisements, post feeds, user stories, and user profiles.
• Using the latest React 19 features, including server actions and use optimistic hook.
• Deployment on Hostinger VPS with Cloud panel.

Application Structure

Home Page Components

• Left Side: Profile card, menu, advertisement component.
• Right Side: Follow requests, birthdays, advertisement component.
• Center: Post feed, user stories (available for 24 hours), add new post, add new story.

User Profile Page

• User Details: Follow/unfollow user, send a follow request.
• Block User: If blocked, the user profile page is not visible.
• Update Profile: Update user information and account details.

Building the Application

Next.js and React 19 Features

• Using server actions to send forms.
• useFormAction hook to receive data from the backend.
• useOptimistic hook to update the UI immediately.

Deployment

• Deploy using Hostinger VPS with Node.js via Cloud panel.
• Use Cloudinary for storing images.

Database Integration

Prisma ORM

• Install Prisma: npm install prisma and initialize with npx prisma init.
• Database Configuration: Define the database URL in the .env file.
• Schema Design: Create models for User, Post, Like, Comment, Follow, FollowRequest, Block, and Story.
• Pushing to Database: npx prisma db push.
• Prisma Studio: Used for viewing and managing database entries.

Authentication with Clerk

• Setting up Clerk for user authentication and handling sessions.
• Using Clerk webhooks to synchronize users with the database.

Frontend Components

Layout and Navbar

• Creating navbar components accessible in all pages.
• Mobile Menu: Design flexible and responsive navigation for mobile screens.

Home Page Components

• Left Menu: User profile and menu items with additional content for larger screens.
• Right Menu: Friend requests, birthdays, and advertisements.
• Center Feed: Add posts, view posts, and user stories.
• Optimistic UI Updates: Immediate UI updates using useOptimistic and useFormAction hooks.

Profile Page Components

• Profile Details: Display user information, follow/unfollow, block users, and update profile.
• User Media: Display user posts and media items with pagination for multiple posts.

Server Actions

Backend Operations

• Adding Posts: Server action to handle form data and add new posts to the database with server validation.
• Following Users: Follow/unfollow users with immediate UI updates.
• Handling Comments: Add, view, and manage comments with optimistic UI updates for a smoother user experience.

Deployment Notes

• Use pm2 for production to keep the node process running.
• Ensure that all environment variables are secured and database connections are properly configured.

Testing and Final Setup

• Testing Application: Test different functionalities to ensure smooth operations and user experience.
• Final Adjustments: Update hooks, components, and states to handle edge cases and improve performance.