A next-generation social media platform built on the MERN stack. Nexus features a stunning glassmorphic UI, real-time messaging, ephemeral stories, and a robust social graph, designed to connect people in a modern, engaging environment.
- Demo
- Key Features
- Technology Stack
- Getting Started
- Screenshots
- Future Work
- Contributing
- Acknowledgments
- Contact
- Live Deployed Site: https://nexus-social-app.vercel.app/
- GitHub Repository: https://github.com/CaSh007s/nexus
Nexus provides a comprehensive social experience with a focus on aesthetics, performance, and real-time interaction.
- Modern & Premium UI:
- Glassmorphism Design: A visually striking interface using frosted glass effects, vibrant gradients, and smooth Framer Motion animations.
- Responsive Layout: A 3-column layout that adapts seamlessly to all screen sizes, featuring a dedicated sidebar for navigation and trending content.
- Real-Time Communication:
- Instant Messaging: Built with Socket.IO, allowing users to chat in real-time with typing indicators and online status updates.
- Media Sharing: Users can share images directly within chats, powered by Cloudinary.
- Social Interaction:
- Posts & Feed: Create rich posts with images, captions, and location tags. Interact with content through likes, comments, and saving posts.
- Stories: Share ephemeral moments that disappear after 24 hours. Includes view counting and liking features.
- Follow System: A robust follow/unfollow mechanism with support for Private Accounts and follow requests.
- Discovery & Trending:
- Trending Feed: Real-time algorithm to highlight the most popular posts and discussions.
- Suggested Users: Intelligent recommendations for "Who to follow" based on network connections.
- Location Services: Integrated OpenStreetMap for location tagging and autocomplete in posts and profiles.
- Security & Privacy:
- Secure Auth: JWT-based authentication with encrypted passwords and secure cookie management.
- Private Profiles: Users can toggle their account to private, requiring approval for new followers.
The project utilizes a modern MERN stack with a decoupled frontend and backend architecture.
| Category | Technology |
|---|---|
| Frontend | React, Redux Toolkit, Tailwind CSS, Framer Motion, Socket.IO Client, Axios |
| Backend | Node.js, Express.js, Socket.IO, JWT |
| Database | MongoDB with Mongoose |
| Services | Cloudinary (Media Storage), OpenStreetMap (Location Data) |
| Deployment | Frontend on Vercel, Backend on Render |
To get a local copy up and running, please follow these steps.
- Node.js (v18 or newer recommended)
- npm (or yarn)
- A MongoDB database instance (local or MongoDB Atlas)
- A Cloudinary account for image storage
-
Clone the Repository:
git clone https://github.com/CaSh007s/nexus.git cd Nexus-Social-App -
Backend Setup:
- Navigate to the backend directory:
cd backend - Install dependencies:
npm install
- Create a
.envfile and populate it with your keys:PORT=8000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_super_secret_jwt_key FRONTEND_URL=http://localhost:5173 CLOUDINARY_CLOUD_NAME=your_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret
- Start the backend server:
npm run server
- Navigate to the backend directory:
-
Frontend Setup:
- Open a new terminal and navigate to the frontend directory:
cd frontend - Install dependencies:
npm install
- Create a
.envfile and add the following variables:VITE_API_URL=http://localhost:8000
- Start the frontend development server:
npm run dev
- Open a new terminal and navigate to the frontend directory:
|
Home Feed The main feed with glassmorphic posts and stories. 
|
Chat Interface Real-time messaging with media support. 
|
|
User Profile Profile page with posts, bio, and stats. 
|
Settings Dashboard Manage account, security, and privacy. 
|
|
Create Post Rich text editor with image and location support. 
|
Dark Mode Sleek dark theme for low-light usage. 
|
|
Sign Up Modern onboarding experience. 
|
Login Secure authentication entry point. 
|
Nexus-Social-App/
├── backend/ # Node.js & Express Backend
│ ├── config/ # Database & Cloudinary Config
│ ├── controllers/ # Route Controllers
│ ├── middleware/ # Auth & Error Middleware
│ ├── models/ # Mongoose Models
│ ├── routes/ # API Routes
│ └── server.js # Entry Point
│
└── frontend/ # React Frontend
├── public/ # Static Assets
├── src/
│ ├── components/ # Reusable Components
│ ├── pages/ # Page Components
│ ├── services/ # API Services
│ ├── store/ # Redux Slices
│ └── App.jsx # Main App Component
└── vite.config.js # Vite ConfigurationWhile the core functionality is complete, there are several exciting features that could be added to enhance the platform:
- Video Calls: Implement WebRTC for peer-to-peer video and voice calling.
- Group Chats: Create group conversations for communities.
- Advanced Search: Filter search results by tags, location, and people.
- Admin Dashboard: A panel for moderation and user management.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Made with ❤️ by:
- Kalash Pratap Gaur (@CaSh007s) | LinkedIn
- Divyanshu Raj (@divyanshu02raj) | LinkedIn
- Priya Sah (@PRIYA300705) | LinkedIn
- Krishna Sahu (@sahukrishna27) | LinkedIn
Special thanks to the open-source community and the creators of the libraries used in this project:
- React & Redux Toolkit
- Socket.IO
- Tailwind CSS
- Framer Motion
Kalash Pratap Gaur
- LinkedIn: https://www.linkedin.com/in/cash007s
- GitHub: https://github.com/CaSh007s
- Email: kalashpgaur76@gmail.com