A full-stack social media application where users can share images, create posts, and interact through comments. Built as part of the 100Devs bootcamp curriculum, demonstrating modern web development practices with Node.js and MongoDB.
[https://binary-upload-boom-d56c.onrender.com]
- User Authentication - Secure signup, login, and session management
- Image Upload - Upload and share images via Cloudinary integration
- Social Posts - Create, view, and manage posts with images
- Comments System - Interactive commenting on posts
- Responsive Design - Works seamlessly across all devices
- Secure Sessions - Protected routes and user data management
- Backend: Node.js, Express.js
- Database: MongoDB with Mongoose ODM
- Authentication: Passport.js with local strategy
- File Upload: Multer with Cloudinary storage
- Template Engine: EJS
- Session Management: Express-session with MongoDB store
- Styling: CSS3
- Development: Morgan logging, Nodemon
binary-upload-boom/
├── config/ # Configuration files
│ ├── database.js # MongoDB connection
│ └── passport.js # Passport authentication config
├── controllers/ # Route handlers and business logic
│ ├── auth.js # Authentication controllers
│ ├── comments.js # Comment CRUD operations
│ ├── home.js # Home page controller
│ └── posts.js # Post CRUD operations
├── middleware/ # Custom middleware
│ ├── auth.js # Authentication middleware
│ ├── cloudinary.js # Cloudinary configuration
│ └── multer.js # File upload middleware
├── models/ # Database schemas
│ ├── Comment.js # Comment model
│ ├── Post.js # Post model
│ └── User.js # User model
├── public/ # Static assets
│ ├── css/
│ └── imgs/
├── routes/ # Express routes
│ ├── comments.js # Comment routes
│ ├── main.js # Main/auth routes
│ └── posts.js # Post routes
├── views/ # EJS templates
│ ├── partials/ # Reusable template parts
│ └── *.ejs # Page templates
└── server.js # Main application entry point
- Node.js (v16 or higher)
- MongoDB database
- Cloudinary account for image storage
-
Clone the repository
git clone https://github.com/your-username/binary-upload-boom cd binary-upload-boom -
Install dependencies
npm install
-
Environment Configuration
Create a
.envfile in theconfig/folder with the following variables:PORT = 2121 DB_STRING = your_mongodb_connection_string CLOUD_NAME = your_cloudinary_cloud_name API_KEY = your_cloudinary_api_key API_SECRET = your_cloudinary_api_secret
-
Start the application
Development mode:
npm run dev
Production mode:
npm start
-
Open in browser
http://localhost:2121
npm start- Start production servernpm run dev- Start development server with nodemonnpm test- Run tests (currently not implemented)
| Variable | Description | Required |
|---|---|---|
PORT |
Server port number | Yes |
DB_STRING |
MongoDB connection URI | Yes |
CLOUD_NAME |
Cloudinary cloud name | Yes |
API_KEY |
Cloudinary API key | Yes |
API_SECRET |
Cloudinary API secret | Yes |
- Homepage - Landing page with login/signup options
- Authentication - Secure user registration and login
- Feed - View all posts from users
- Profile - Personal dashboard with user's posts
- Create Post - Upload images and create new posts
- Post Details - View individual posts with comments
- Comments - Add and view comments on posts
- MVC Architecture - Clean separation of concerns
- RESTful Routes - Standard HTTP methods for CRUD operations
- File Upload - Secure image upload with validation
- User Sessions - Persistent login sessions
- Password Hashing - Secure password storage with bcrypt
- Input Validation - Server-side validation for all forms
- Error Handling - Comprehensive error management
- Flash Messages - User feedback for actions
- Password Encryption - Bcrypt hashing
- Session Security - Secure session configuration
- Route Protection - Authentication middleware
- Input Sanitization - Mongoose validation
- File Upload Security - Multer file filtering
This project demonstrates:
- Full-stack Development - Complete CRUD application
- Database Integration - MongoDB with Mongoose
- Authentication Systems - Passport.js implementation
- File Upload Handling - Image processing and storage
- Template Rendering - Server-side rendering with EJS
- Middleware Usage - Custom and third-party middleware
- RESTful API Design - Standard REST principles
Given more development time, I would implement the following enhancements:
- Real-time Messaging - Chat system between users using Socket.io
- Like/Dislike System - Interactive voting on posts and comments
- Follow/Following - Social connections between users
- Image Filters - Built-in photo editing capabilities
- Video Upload - Support for video content alongside images
- Stories Feature - Temporary 24-hour content sharing
- Dark Mode Toggle - Theme switching functionality
- Advanced Search - Filter posts by user, tags, or date
- Infinite Scroll - Seamless content loading
- Push Notifications - Real-time alerts for interactions
- Mobile App - React Native companion app
- Email Notifications - Digest emails for activity
- API Documentation - Swagger/OpenAPI integration
- Caching Layer - Redis implementation for performance
- Image Optimization - Automatic compression and resizing
- Rate Limiting - API abuse prevention
- Two-Factor Authentication - Enhanced security
- Microservices Architecture - Service separation for scalability
- Admin Dashboard - Content moderation panel
- Analytics Dashboard - User engagement metrics
- Content Reporting - Community moderation tools
- Backup System - Automated data backup strategies
- Email: jackgermainbusiness@gmail.com
- LinkedIn: linkedin.com/in/jack-germain
- GitHub: github.com/JackGer26
This project is licensed under the MIT License.
Built with ❤️ as part of 100Devs