A production-grade social networking application with real-time messaging, user connections, and rich media support. Built with modern web technologies and deployed on scalable cloud infrastructure.
Live Demo: https://connect-now-bice.vercel.app
GitHub Repository: smithayenugu/connectNow
- Posts & Media – Create, edit, and delete posts with optional image uploads
- Interactions – Like, comment, and share posts with real-time engagement tracking
- User Connections – Follow/unfollow users, manage connection requests with accept/reject functionality
- Direct Messaging – Real-time one-on-one messaging with message history, edit, and delete capabilities
- User Profiles – Customizable profiles with profile pictures, post history, follower/following counts
- Search – Discover and connect with other users through user search
- Saved Posts – Bookmark posts for later viewing
- Dark/Light Theme – Toggle between dark and light modes
- Responsive Design – Fully responsive UI optimized for desktop and mobile
- Authentication – Email/password signup with Google OAuth integration for seamless login
- Password Reset – Email-based forgot password / reset password flow
- Real-time push notifications (planned for future updates)
Email/Password and Google OAuth login options
Browse posts from connected users with likes, comments, and shares
Share your thoughts with optional image uploads
Real-time messaging with edit and delete capabilities
Customize your profile with picture
Save other's posts
Chat with your friends
Comment on other's posts and share you thoughts on the posts
View your connections , see their profile , message them
Set the theme according to your vibe
See all the connection request you got and extend your friend circle
- React.js – Component-based UI with hooks and state management
- HTML5 & CSS3 – Semantic markup and modern styling
- Responsive Design – Mobile-first approach with media queries
- Node.js & Express.js – RESTful API with proper request validation and error handling
- Authentication – JWT-based auth with Google OAuth integration
- Password Security – BCrypt hashing with password reset functionality
- MongoDB Atlas – NoSQL document database with optimized indexing
- Database Schema – Properly normalized schemas for users, posts, comments, messages, and connections
- Query Optimization – Indexed queries for efficient data retrieval
- Frontend: Vercel (Next.js/React hosting with automatic deployments)
- Backend: Render (Node.js hosting with environment management)
- Database: MongoDB Atlas (cloud-hosted with connection pooling)
- Media: Cloudinary (cloud-hosted image storage)
Users
├── Profile (picture, bio, follower/following counts)
├── Authentication (email, hashed password, OAuth credentials)
└── Metadata (created_at, updated_at)
Posts
├── Content (title, description, images)
├── Author (user reference)
├── Relationships (likes, comments, shares)
└── Timestamps
Comments
├── Post reference
├── Author reference
└── Nested replies support
Messages
├── Sender & Recipient references
├── Edit/Delete tracking
└── Conversation history
Connections
├── Following relationships
└── Connection request management
- RESTful endpoints for all CRUD operations
- Proper HTTP status codes and error responses
- Input validation and sanitization
- User authorization checks for sensitive operations (edit/delete)
- Efficient message delivery with proper timestamps
- Edit and delete capabilities with audit trails
- Conversation history management
- Migrated image uploads from local disk storage to Cloudinary, solving the data-loss problem caused by Render's ephemeral filesystem on free-tier deployments
- Updated both backend (Cloudinary SDK + multer-storage-cloudinary) and frontend (URL handling) to support persistent, CDN-backed image delivery
- Complex document references between users, posts, and comments
- Optimized indexes for frequently queried fields (email, userId, postId)
- Proper handling of one-to-many and many-to-many relationships
- Role-based access control (users can only edit/delete their own posts and messages)
- Secure password handling with bcrypt
- OAuth integration for social login
- Mobile-optimized layout that works seamlessly across all devices
- Theme persistence with local storage
- Smooth navigation with React Router
- User search with case-insensitive matching
- Efficient database queries for discoverability
- Node.js (v14+)
- npm or yarn
- MongoDB Atlas account (or local MongoDB)
- Cloudinary account (free tier)
-
Clone the repository
git clone https://github.com/smithayenugu/connectNow.git cd connectNow -
Frontend Setup (React on Vercel)
cd social_frontend npm install npm startThe app will run on
http://localhost:3000 -
Backend Setup (Node.js/Express on Render)
cd social_backend npm install -
Environment Variables Create a
.envfile in thesocial_backendfolder:PORT=5000 MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/connectnow JWT_SECRET=your_jwt_secret_key GOOGLE_CLIENT_ID=your_google_oauth_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret EMAIL_USER=your_email_for_password_reset EMAIL_PASS=your_email_app_password -
Start the Backend
npm start
The API will run on
http://localhost:5000 -
Open your browser and navigate to
http://localhost:3000
- Create an account with email and password, or use Google OAuth
- All passwords are securely hashed using bcrypt
- Click "Create" in the sidebar
- Add a title, description, and optional image
- Click "Create Post" to publish
- Use "Search users" at the top to find other users
- Visit their profile and "Connect" to send a follow request
- Manage pending requests in "Connection Requests"
- Navigate to "Chat" section
- Click on a connection to open the conversation
- Type and send messages in real-time
- Edit or delete your own messages
- Click the bookmark icon on any post to save it
- View all saved posts in "Saved Posts" section
- Click "Profile" → "Edit Profile" to update your information
- Add a profile picture and bio
connectNow/
├── screenshots/ # App screenshots for README
│ ├── login.png
│ ├── feed.png
│ ├── create-post.png
│ ├── messaging.png
│ ├── profile.png
| ├── save-posts.png
| ├── chat.png
| ├── comments.png
| ├── connections.png
| ├── light-theme.png
| └── connection-request.png
|
│
├── social_frontend/ # React Frontend (Deployed on Vercel)
│ ├── public/ # Static files
│ ├── src/
│ │ ├── components/ # Reusable React components
│ │ ├── pages/ # Page-level components
│ │ ├── styles/ # CSS files
│ │ └── App.js # Main app component
│ └── package.json
│
│
├── social_backend/ # Node.js/Express Backend (Deployed on Render)
│ ├── models/ # MongoDB schemas (User, Post, Message, etc.)
│ ├── router/ # API routes and endpoints
│ ├── scripts/ # Helper scripts and utilities
│ ├── server.js # Express server entry point
│ ├── package.json
│ └── package-lock.json
│
└── README.md # Main project README
Test Account:
- Email:
test@example.com - Password:
TestPassword123
Or create your own account and start connecting with other users!
✅ Password Security – Bcrypt hashing with salt rounds
✅ Authentication – JWT tokens with expiration
✅ Authorization – User-specific access control
✅ Input Validation – Server-side validation of all inputs
✅ OAuth Integration – Secure Google login
✅ Password Reset – Secure email-based password recovery
✅ CORS Configuration – Restricted to known frontend origins only
- Database Indexing – Optimized queries for posts, users, and messages
- Pagination – Infinite scroll for posts to reduce load
- Image Optimization – Efficient image storage and retrieval
- Lazy Loading – Load posts and messages on demand
- Push notifications for messages and post interactions
- Video/audio calling integration
- Post analytics and engagement insights
- Hashtag and mention support
- Post collections and curated feeds
- User verification badges
- Advanced privacy controls
For questions or feedback, feel free to reach out:
- Email: smithayenugu@gmail.com
- LinkedIn: Smitha Yenugu
- GitHub: @smithayenugu
Built with ❤️ by Smitha Yenugu