Rizzit - A MERN Stack Social Media Platform

Dhruv

Dhruv Bhanushali

Rizzit - A MERN Stack Social Media Platform

Rizzit is a full-stack social media platform built using the MERN (MongoDB, Express.js, React, Node.js) stack. It includes real-time features, user authentication, and a seamless UI similar to popular social media platforms.

Features

User Authentication

Secure user authentication using JWT.
Registration and login with email and password.
Profile management.

Instagram-like Posts

Create Posts: Add text, images, and videos to your posts
Media Uploads: Upload images and videos directly from your device using Firebase Storage
Post Management:
Edit post text after publishing
Delete unwanted posts with confirmation dialog
Interactive Elements:
Like/unlike posts with real-time counter updates
Save/bookmark posts for later viewing
Comment on posts (view all comments)
Rich Media Support:
Image display with responsive sizing
Video playback directly in the feed
User Experience:
Instagram-style post layout
Optimistic UI updates for instant feedback

Stories

Users can upload and view stories.
Unwatched stories are indicated with an orange circle.

Database & Backend

MongoDB for efficient NoSQL data storage.
API authentication with headers for secure data fetching.
Optimized queries for better performance.
Firebase Storage integration for media files.

UI & Frontend

Clean and intuitive UI inspired by modern social media platforms.
Sidebar with icons using lucide-react.
Responsive design for mobile and desktop.

Installation & Setup

Prerequisites

Make sure you have the following installed:
Node.js
MongoDB
npm or yarn
Firebase account with Storage enabled

Backend Setup

Clone the repository:
git clone https://github.com/Dhruv1175/Social_Media_App.git
cd Social_Media_App/backend
Install dependencies:
npm install
Create a .env file and configure your environment variables:
JWT_SECRET=your_secret_key
PORT=your_backend_port
Start the backend server:
npm run dev

Frontend Setup

Navigate to the frontend folder:
cd ../apk
Install dependencies:
npm install
Set up Firebase configuration:
Create a .env file with your Firebase credentials:
Start the React app:
npm start

Usage Guide

Creating a Post

Navigate to the Feed page
Use the "Create Post" form at the top of your feed
Add text to describe your post
To include media:
Click the "Image" button to upload an image
Click the "Video" button to upload a video
Preview your media before posting
Click "Post" to publish to your feed
Your post will appear in the feed immediately

Editing a Post

Find the post you want to edit in your feed
Click the three dots (⋯) menu in the top-right corner of your post
Select "Edit" from the dropdown menu
Modify the text as needed in the text editor
Click "Save" to update your post or "Cancel" to discard changes
Your post will be updated instantly

Deleting a Post

Find the post you want to delete
Click the three dots (⋯) menu in the top-right corner of your post
Select "Delete" from the dropdown menu
Confirm deletion in the dialog that appears
The post will be permanently removed from your feed

Interacting with Posts

Like: Click the heart icon to like a post
Comment: Click the comment icon to view or add comments
Save: Click the bookmark icon to save a post for later viewing

Tech Stack

Frontend: React, Redux
Backend: Node.js, Express.js
Database: MongoDB
Real-Time: Socket.IO
Authentication: JWT
Storage: Firebase Storage for media files

Contribution

Contributions are welcome! Feel free to fork this repo, make changes, and submit a pull request.

License

This project is licensed under the MIT License.
Like this project

Posted Jul 6, 2025

A modern, responsive social media app clone featuring user profiles, post feeds, likes, and comments — built with React and styled for mobile-first design.