<div align="center"> <img src="logo.png"/> </div>

Smiler

View Demo →

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
  • Common Features
  • Backend Key Features
  • Frontend Key Features
• Why This Project?
• Motivation
• Contribution
• How to Run It
  • Prerequisites
  • Option 1: Running Without Docker
  • Option 2: Running With Docker
  • Option 3: Running With Docker Compose (All-in-One)

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.
  • Sessions: The app uses sessions instead of JWT for better security.
  • Saving Drafts: Users can save post drafts, including sections, title, and body, without publishing them.
  • Individual Rating: Each user has a rating based on the sum of ratings for their posts and comments.

• Comments:

  • Hierarchical Comment Tree: Comments are displayed in a nested tree structure, with recursive checks to show if the user has already rated a comment.
  • Creating, Updating, and Deleting Comments: Users can create, update, or delete comments within a specific time frame, provided no one has replied to them.
  • Comment Rating: Comments have a rating system that contributes to the user's overall rating.

• Swagger Documentation: Full API documentation is available at /api-docs/.

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.

Why This Project?

This project gave me the chance to work with the full MEVN stack, implement clustering for better reliability, and build a robust testing setup with both integration tests on the backend and E2E tests on the frontend. I also explored different ways to handle file uploads, implemented a hierarchical comment system, and figured out how to structure a multi-section post format.

Motivation

I built Smiler to practice building a full-stack application from scratch, 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.

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:

1. Set Up MongoDB:

   • Option A: Local MongoDB
     Install MongoDB locally on your machine and ensure it’s running.
     • MongoDB Installation Guide
   • Option B: Remote MongoDB (e.g., MongoDB Atlas)
     Use a remote MongoDB instance like MongoDB Atlas. Copy the connection string provided by the service.

2. 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.

3. Install Dependencies:

   pnpm install
   

4. Run the Application:

   pnpm dev
   

---

Option 2: Running With Docker

If you prefer to use Docker, follow these steps:

1. 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.

2. Configure Environment Variables:

   • Rename .env.example to .env in the root folder.
   • Open the .env file and fill in the required values.

3. 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 .
   

4. 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:

1. Configure Environment Variables:

   • Rename .env.example to .env in the root folder.