Rizzit - A MERN Stack Social Media Platform
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:
Install dependencies:
Create a
.env file and configure your environment variables:Start the backend server:
Frontend Setup
Navigate to the frontend folder:
Install dependencies:
Set up Firebase configuration:
Create a
.env file with your Firebase credentials:Start the React app:
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.
