{"id":27991869,"url":"https://github.com/notyusheng/mernverse","last_synced_at":"2026-01-24T03:35:21.092Z","repository":{"id":289446294,"uuid":"971280810","full_name":"NotYuSheng/mernverse","owner":"NotYuSheng","description":"Lightweight real-time chat application built with the MERN Stack (MongoDB, Express.js, React, Node.js)","archived":false,"fork":false,"pushed_at":"2025-04-30T17:54:50.000Z","size":13573,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T17:55:07.967Z","etag":null,"topics":["expressjs","mern","mern-stack","mongo","nginx","nodejs","react","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NotYuSheng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-23T09:30:11.000Z","updated_at":"2025-04-23T16:09:39.000Z","dependencies_parsed_at":"2025-04-23T10:44:46.426Z","dependency_job_id":null,"html_url":"https://github.com/NotYuSheng/mernverse","commit_stats":null,"previous_names":["notyusheng/mernverse"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotYuSheng%2Fmernverse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotYuSheng%2Fmernverse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotYuSheng%2Fmernverse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotYuSheng%2Fmernverse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NotYuSheng","download_url":"https://codeload.github.com/NotYuSheng/mernverse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253124230,"owners_count":21857611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expressjs","mern","mern-stack","mongo","nginx","nodejs","react","vite"],"created_at":"2025-05-08T17:55:15.680Z","updated_at":"2026-01-24T03:35:21.080Z","avatar_url":"https://github.com/NotYuSheng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERNverse\n\nA lightweight real-time chat application built with the MERN Stack (MongoDB, Express.js, React, Node.js), featuring Socket.IO for real-time communication and Dockerized for easy deployment.\n\n\u003e [!WARNING]  \n\u003e This project was created for **educational purposes only** and is **not intended for production use**.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"sample-files/DEMO-v0.0.1.png\" alt=\"DEMO img\" style=\"width: 75%; max-width: 800px; height: auto;\" /\u003e\n\u003c/div\u003e\n\n---\n\n## Getting Started\n\n### Start the Application\n\nRun the following command to build and start the containers:  \n\n```bash\ndocker compose up -d\n```\n\nThis will: \n\n1. Build the Docker images for the FastAPI and Streamlit services.  \n2. Start the containers and serve the application.  \n\n---\n\n## Features\n\n- **Frontend with React and Vite**:  \n  The frontend is built with React, using Vite as the build tool for fast development and optimized production builds.\n\n- **Swagger API Documentation**:  \n  Swagger UI is available at **/api-docs** to explore and test available API routes.\n\n- **Nginx for Serving Frontend and Proxying Requests**:  \n  **Nginx** is used to serve the built frontend files and proxy API and WebSocket requests to the backend.\n\n- **Input Validation with Joi**:\n  All incoming chat messages are validated using Joi to ensure data integrity and prevent malformed inputs or potential security issues.\n\n---\n\n## Prerequisites\n\nBefore you start, ensure the following tools are installed on your system:\n\n- Docker  \n- Docker Compose  \n\n---\n\n## Access the Application\n\n- **React Frontend (served by Nginx)**:  \n  Visit \u003chttp://localhost\u003e to interact with the chat interface.\n\n- **Swagger API Documentation**:  \n  Visit \u003chttp://localhost/api-docs\u003e to explore and test the available API routes.\n\n---\n\n## Development Workflow\n\n### Live Reloading\n\nBoth the **React frontend (via Vite)** and the **Express backend** support hot reloading out of the box when running in development mode.\n\nTo enable live reloading during development:\n\n- **Frontend (Vite)**:  \n   When running locally (`npm run dev`), Vite provides instant hot module replacement (HMR) for a smooth development experience.\n\n   If you're working inside a container, you can expose port `5173` and mount your local code into the container for real-time updates.\n\n- **Backend (Express)**:  \n   Use `nodemon` to enable automatic restarts on code changes. This can be done locally or within the container.\n\n### Using Docker for Live Development\n\nIf you want hot reloading **inside Docker containers**, consider the following:\n\n- Mount your local frontend and backend code as volumes.\n- For Express, use a development Dockerfile or override `CMD` with `nodemon`.\n- For React, expose Vite’s dev server port (typically `5173`) and run `npm run dev` inside the container.\n\n### Stopping the Application\n\nTo stop the application, press `Ctrl+C` or run the following command:  \n\n```bash\ndocker compose down\n```\n\nThis will stop and remove the containers, but the built images will remain.  \n\n\n---\n\n## Directory Structure\n\nThe project structure is as follows:  \n\n```shell\n.  \nmernverse/\n├── backend/                          # Express backend service\n│   ├── config/\n│   │   └── db.js                     # MongoDB connection setup\n│   ├── Dockerfile                    # Dockerfile to build backend image\n│   ├── index.js                      # Main entry point for Express + Socket.IO\n│   ├── models/\n│   │   └── Message.js                # Mongoose schema for storing chat messages\n│   ├── mongo-init/\n│   │   └── init.js                   # Initialization script for MongoDB (optional setup)\n│   ├── package.json                  # Backend dependencies and scripts\n│   ├── routes/\n│   │   ├── health.js                 # Health check route for service status\n│   │   └── messages.js               # API route for fetching/storing messages\n│   └── test/\n│       └── sample.test.js            # Sample backend test (can be expanded)\n├── frontend/                         # React frontend (built with Vite)\n│   ├── Dockerfile                    # Multi-stage Dockerfile for build + Nginx\n│   ├── eslint.config.js              # ESLint config for code quality (optional)\n│   ├── index.html                    # HTML template used by Vite\n│   ├── mernverse.conf                # Nginx config to serve frontend and proxy API/WebSocket\n│   ├── package.json                  # Frontend dependencies and scripts\n│   ├── public/\n│   │   └── vite.svg                  # Static assets for public use\n│   ├── src/                          # React source files\n│   │   ├── api/\n│   │   │   └── messages.js           # API utility for fetching messages\n│   │   ├── App.css                   # Component-specific styles (optional, minor)\n│   │   ├── App.jsx                   # Main React component, handles chat logic\n│   │   ├── assets/\n│   │   │   └── react.svg             # Example asset used in the UI\n│   │   ├── components/\n│   │   │   └── ChatWindow.jsx        # Component for displaying and interacting with chat\n│   │   ├── index.css                 # Global styles\n│   │   ├── main.jsx                  # React entry point (attaches App to the DOM)\n│   │   └── services/\n│   │       └── socket.js             # Socket.IO client setup for real-time updates\n│   └── vite.config.js                # Vite configuration for build optimization\n├── docker-compose.yml                # Docker Compose configuration for all services\n└── README.md                         # Project documentation and setup instructions\n```\n\n---\n\n## Troubleshooting\n\n- Ensure Docker and Docker Compose are installed and running on your system.  \n- Verify that the required port 80 is not in use by other applications.  \n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotyusheng%2Fmernverse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotyusheng%2Fmernverse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotyusheng%2Fmernverse/lists"}