Building a Full Stack Social Media Application

Jul 12, 2024

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.