A modern, responsive social media platform for sharing thoughts, images, and connecting with others.
- 🔐 Authentication: Secure user registration, login, and JWT-based session management.
- 📝 Dynamic Feed: View the latest posts, sort by Most Liked, Most Commented, or filter by your own posts.
- 📸 Rich Media Posts: Share text, upload images, or combine both in a single post.
- ❤️ Interactive Posts: Like and unlike posts. Click the likes count to instantly see a popup of who liked it!
- 💬 Comment System: Engage in conversations directly on user posts.
- 💅 Modern UI: Built with raw CSS featuring smooth animations, glassmorphism, and responsive design.
- React 18 (Hooks, Context API)
- Vite (Lightning fast build tool)
- Axios (API requests)
- React Router v6 (Client-side routing)
- Node.js & Express (RESTful API architecture)
- MongoDB & Mongoose (NoSQL Database)
- JWT & bcryptjs (Authentication & security)
- Multer (Handling multipart/form-data for image uploads)
Make sure you have Node.js installed on your machine and a MongoDB Atlas connection string.
git clone https://github.com/your-username/socialmedia.git
cd socialmediacd backend
npm installCreate a .env file in the backend/ directory:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_keyStart the backend server:
npm run devOpen a new terminal window:
cd frontend
npm installStart the frontend development server:
npm run devThe app should now be running locally at http://localhost:5173.
This project is configured to run smoothly on cloud platforms:
- Frontend: Deployed seamlessly on Vercel. Set the
VITE_API_URLenvironment variable to your backend domain. Thevercel.jsonfile handles React routing fallback. - Backend: Hosted on Render (Node Web Service). The CORS environment variable
FRONTEND_URLis used to firmly secure cross-origin requests.
Made with ❤️ by Smith