Smiler
Smiler is a Reddit-style social platform where users share posts with text, images, and videos, follow creators and topics, and engage through comments and ratings.
Table of Contents
Key Features
This project is built on the MEVN stack (MongoDB, Express, Vue.js, Node.js) and is a Single Page Application (SPA) inspired by platforms like Reddit and 9gag. Below are the key features that make this project stand out:
Common Features
- Containerized with Docker: The project is fully containerized using Docker, and the
docker-compose setup is highly flexible. It can also run without Docker if needed.
Backend Key Features
-
Core Infrastructure:
- Clustering: If an exception occurs on the server, the app won't crash. Instead, another instance will be spawned to keep the application running.
- CORS Protection: The API restricts access to allowed domains via environment variables.
- Logging: Every request is logged using Winston and morgan. Logs are also saved to a file for debugging and monitoring.
- Integration Testing: The backend is rigorously tested with integration tests to ensure real-world functionality. These tests verify that ORM functions interact correctly with the database, API endpoints return the expected data, a file is actually written to disk or deleted, and dependencies (e.g., ORM, middleware) work as intended, even after updates and so on.
-
Posts:
- Creating Posts: Users can create posts with a slug generated from the title. Posts are composed of "sections," which can be text, pictures, picture links, or video links. Sections keep their order in the database, and users can add up to 8 sections per post.
- Uploading Pictures: Images can be uploaded directly or via a link. Uploaded images are resized and optimized for performance.
- Updating and Deleting Posts: Users can update or delete their posts, but only within 10 minutes of creation.
- Feed: View the latest posts from followed users or tags.
- Tags: Posts can have up to 8 tags, and users can follow or unfollow tags to customize their feed.
- Post Retrieval: Posts can be retrieved with pagination and filtered by author, date, rating, or title regex. The API also shows if the user has already rated a post.
- Post Rating: Posts have a rating system that contributes to the user's overall rating.
-
Users:
- Profile Picture: Users can set a profile picture using a link.
- Following Users: Users can follow or unfollow other users.
- Bio: Users can add a short description about themselves.
- Registration and Authentication: Standard registration and authentication features are implemented.
Frontend Key Features
-
Core Features:
- Auth Guards: Routes requiring authentication are protected.
- Allowed Routes Guard: Non-existent routes redirect to a 404 page.
- Expired Actions Guard: Prevents access to actions like editing a post after the allowed time has passed.
- Global Request Error Notifications: Errors trigger animated notifications that disappear after a few seconds.
- Adaptive Design: The frontend is fully responsive.
- Dynamic Document Title: The page title updates dynamically based on the route.
- End-to-End (E2E) Testing: Most frontend components are covered with E2E tests to ensure reliability and a smooth user experience. These tests simulate real user interactions and validate the functionality of the application.
-
Posts:
- Multiple Post Pages: Includes pages like Today, All, Trending, Top This Week, and New, each with unique sorting and filtering.
- Post Editor: A rich text editor for creating and editing posts, with drag-and-drop support for sections.
- Preloader: Smooth loading animations for better UX.
- Infinite Scroll: Loads more posts as you scroll.
- Search with Filters: Search posts with advanced filters.
- Following Tags: Follow or unfollow tags directly from the UI.
-
Users:
- Auth State Management: Handles authentication state, hiding unavailable features for logged-out users.
- User Profile Page: Displays user posts, rating, followers, bio, and avatar.
- Follow/Unfollow Users: Follow or unfollow other users.
- Settings: Manage your profile, including bio, avatar, and followed users/tags.
- Registration and Login: Standard registration and login forms.
-
Comments:
- Tree Comments: Nested comments with a hierarchical structure.
- Rich Text Editor: For creating and updating comments.
- Delete and Update Comments: Users can delete or update their comments within a specific time frame.
Motivation
I built Smiler to practice building a full-stack application from scratch, working with the full MEVN stack, experimenting with different architectural patterns and testing strategies along the way. It's a playground for trying out new ideas and seeing what works (and what doesn't) in a real project context — from clustering and file uploads to hierarchical comments and multi-section posts. Starting from February 2026, I also use this project to learn and get comfortable working with agentic coding tools (vibecoding).
How to Run It
This project can be run in multiple ways, depending on your preferences and setup. Below are the steps for each scenario:
Prerequisites
- Node.js (>=20.16.0)
- pnpm (>=8.6.0)
- Docker and Docker Compose (optional, for containerized setups)
- MongoDB (can be set up locally, remotely, or via Docker)
Option 1: Running Without Docker
If you prefer not to use Docker, follow these steps:
-
Set Up MongoDB:
- Option A: Local MongoDB
Install MongoDB locally on your machine and ensure it’s running.
- Option B: Remote MongoDB (e.g., MongoDB Atlas)
Use a remote MongoDB instance like MongoDB Atlas. Copy the connection string provided by the service.
-
Configure Environment Variables:
- Rename
.env.example to .env in the root folder.
- Open the
.env file and fill in the required values:
- For Local MongoDB: Set
DB_URL to mongodb://localhost:27017/smiler.
- For Remote MongoDB: Set
DB_URL to the connection string provided by your remote MongoDB service.
-
Install Dependencies:
pnpm install
-
Run the Application:
pnpm dev
Option 2: Running With Docker
If you prefer to use Docker, follow these steps:
-
Set Up MongoDB:
-
Option A: Use Docker to Run MongoDB
Run a MongoDB container using Docker:
docker run -d -v /usr/src/smiler/db:/data/db -p 27017:27017 --name smiler-mongo mongo:5.0.10
Update the DB_URL in .env to mongodb://smiler-mongo:27017/smiler.
-
Option B: Use Remote MongoDB (e.g., MongoDB Atlas)
Use a remote MongoDB instance like MongoDB Atlas. Copy the connection string and update the DB_URL in .env.
-
Configure Environment Variables:
- Rename
.env.example to .env in the root folder.
- Open the
.env file and fill in the required values.
-
Build Images:
- Build the images using the following commands:
docker build --target frontend -t <your_username>/smiler-frontend:latest .
docker build --target backend -t <your_username>/smiler-backend:latest .
-
Run the Application Images with Docker:
- Run the images using the following commands:
docker run -d -p 8080:80 --name smiler-frontend <your_username>/smiler-frontend:latest
docker run -d -p 3000:3000 --name smiler-backend <your_username>/smiler-backend:latest
Option 3: Running With Docker Compose (All-in-One)
If you want to run both the application and MongoDB using Docker Compose, follow these steps:
-
Configure Environment Variables:
- Rename
.env.example to .env in the root folder.
- Open the
.env file and fill in the required values. For MongoDB, set DB_URL to mongodb://mongo:27017/smiler.
-
Run Docker Compose:
Contribution
Feel free to check out the code, open issues if you find bugs, or suggest improvements. Pull requests are welcome too.
License
This project is licensed under the MIT License.