{"id":19390476,"url":"https://github.com/hassonor/mastering-mern","last_synced_at":"2026-04-09T15:49:56.114Z","repository":{"id":104284876,"uuid":"579331492","full_name":"hassonor/mastering-mern","owner":"hassonor","description":"NodeJS (TS,Redis, Queues, Workers, Jest,Mongoose, Cloudinary, Bunyan, Socket-io, Bull ...)","archived":false,"fork":false,"pushed_at":"2023-12-03T21:07:39.000Z","size":1653,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-01-07T09:43:38.473Z","etag":null,"topics":["aws","bull","bunyan","caching","cloudinary","elasticache","jest","mongodb","mongoose","nodejs","queues","redis","socket-io","terraform","ts","workers"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hassonor.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}},"created_at":"2022-12-17T10:39:15.000Z","updated_at":"2023-07-26T13:59:55.000Z","dependencies_parsed_at":"2023-03-09T10:00:21.272Z","dependency_job_id":"67146e44-26e0-43db-9d60-de59660ce49a","html_url":"https://github.com/hassonor/mastering-mern","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hassonor%2Fmastering-mern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hassonor%2Fmastering-mern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hassonor%2Fmastering-mern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hassonor%2Fmastering-mern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hassonor","download_url":"https://codeload.github.com/hassonor/mastering-mern/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240557489,"owners_count":19820358,"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":["aws","bull","bunyan","caching","cloudinary","elasticache","jest","mongodb","mongoose","nodejs","queues","redis","socket-io","terraform","ts","workers"],"created_at":"2024-11-10T10:21:14.200Z","updated_at":"2026-04-09T15:49:56.097Z","avatar_url":"https://github.com/hassonor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Mastering MERN Stack - Full-Stack Social Media Platform\n\n\u003cdiv align=\"center\"\u003e\n\n![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)\n![MongoDB](https://img.shields.io/badge/mongodb-latest-green)\n![Express](https://img.shields.io/badge/express-%5E4.18.0-blue)\n![React](https://img.shields.io/badge/react-%5E18.0.0-blue)\n![Node.js](https://img.shields.io/badge/node-%3E%3D20.x-brightgreen)\n\n**A production-ready social media platform demonstrating the complete MERN stack**\n\n[Features](#-features) • [Quick Start](#-quick-start) • [Architecture](#-architecture) • [Development](#-development)\n\n\u003c/div\u003e\n\n---\n\n## 📋 Table of Contents\n\n- [Overview](#-overview)\n- [Features](#-features)\n- [Tech Stack](#-tech-stack)\n- [Architecture](#-architecture)\n- [Quick Start](#-quick-start)\n- [Project Structure](#-project-structure)\n- [Backend API](#-backend-api)\n- [Frontend Application](#-frontend-application)\n- [Development](#-development)\n- [Testing](#-testing)\n- [Deployment](#-deployment)\n- [Contributing](#-contributing)\n- [License](#-license)\n\n---\n\n## 🌟 Overview\n\n**Mastering MERN** is a comprehensive social media platform built from scratch using the MERN stack (MongoDB, Express, React, Node.js). This project demonstrates **production-ready full-stack development** with modern best practices, authentication, real-time features, and responsive design.\n\n### Why This Project?\n\n- ✅ **Complete Full-Stack**: Backend API + Frontend SPA\n- ✅ **Production Patterns**: Authentication, validation, error handling\n- ✅ **Real-time Features**: Live updates, notifications, chat\n- ✅ **Responsive Design**: Mobile-first UI with modern styling\n- ✅ **Educational**: Clean code, comprehensive documentation\n- ✅ **Scalable Architecture**: Modular design, separation of concerns\n\n---\n\n## ✨ Features\n\n### User Features\n- 🔐 **Authentication**: JWT-based auth with refresh tokens\n- 👤 **User Profiles**: Customizable profiles with avatars\n- 📝 **Posts**: Create, edit, delete posts with rich media\n- 💬 **Comments**: Nested commenting system\n- ❤️ **Reactions**: Like, love, and react to posts\n- 👥 **Social Graph**: Follow/unfollow users, friend requests\n- 🔔 **Notifications**: Real-time notifications\n- 💬 **Messaging**: Direct messaging between users\n- 🔍 **Search**: Search users, posts, and hashtags\n- 📊 **Feed Algorithm**: Personalized content feed\n\n### Technical Features\n- 🎯 **RESTful API**: Clean, documented REST endpoints\n- 🔄 **Real-time Updates**: WebSocket integration\n- 💾 **MongoDB**: NoSQL database with Mongoose ODM\n- 🔒 **Security**: bcrypt passwords, JWT tokens, rate limiting\n- 📧 **Email Service**: Email verification and notifications\n- 🖼️ **File Upload**: Image/video uploads with Cloudinary\n- 🚀 **Performance**: Redis caching, pagination, lazy loading\n- 📱 **Responsive UI**: Works on desktop, tablet, and mobile\n\n---\n\n## 🛠 Tech Stack\n\n### Backend\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **Node.js** | 20.x | Runtime environment |\n| **Express.js** | 4.18+ | Web framework |\n| **MongoDB** | Latest | NoSQL database |\n| **Mongoose** | 8.x | MongoDB ODM |\n| **JWT** | 9.x | Authentication tokens |\n| **bcryptjs** | 2.x | Password hashing |\n| **Redis** | Latest | Caching and sessions |\n| **Bull** | 4.x | Job queues |\n| **Socket.io** | 4.x | Real-time communication |\n\n### Frontend\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **React** | 18.x | UI library |\n| **Vite** | 5.x | Build tool |\n| **TypeScript** | 5.x | Type safety |\n| **React Router** | 6.x | Client-side routing |\n| **Axios** | 1.x | HTTP client |\n| **React Query** | 5.x | Server state management |\n| **Zustand** | 4.x | Client state management |\n| **Tailwind CSS** | 3.x | Utility-first CSS |\n| **Shadcn/ui** | Latest | UI components |\n\n### DevOps\n- **Docker** \u0026 **Docker Compose** - Containerization\n- **GitHub Actions** - CI/CD pipeline\n- **ESLint** \u0026 **Prettier** - Code quality\n\n---\n\n## 🏗 Architecture\n\n### High-Level System Architecture\n\n```\n┌─────────────────────────────────────────────────────┐\n│                  Frontend (React)                    │\n│                                                      │\n│  ┌──────────┐  ┌──────────┐  ┌───────────────┐    │\n│  │  Pages   │  │Components│  │ State (Zustand)│    │\n│  └──────────┘  └──────────┘  └───────────────┘    │\n│                                                      │\n│  ┌────────────────────────────────────────────┐    │\n│  │     React Query (Server State)             │    │\n│  └────────────────────────────────────────────┘    │\n└───────────────────┬──────────────────────────────┘\n                    │ HTTP/REST\n                    ▼\n┌─────────────────────────────────────────────────────┐\n│              Backend API (Express)                   │\n│                                                      │\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐         │\n│  │  Routes  │→ │Controllers│→│ Services │         │\n│  └──────────┘  └──────────┘  └──────────┘         │\n│                                     │               │\n│                      ┌──────────────┴───────┐      │\n│                      ▼                      ▼       │\n│              ┌────────────┐         ┌────────────┐ │\n│              │  MongoDB   │         │   Redis    │ │\n│              │ (Mongoose) │         │  (Cache)   │ │\n│              └────────────┘         └────────────┘ │\n└──────────────────────────────────────────────────────┘\n```\n\n### Backend Architecture (MVC Pattern)\n\n```\nbackend/\n├── routes/          # Express route definitions\n│   ├── auth.routes.js\n│   ├── user.routes.js\n│   └── post.routes.js\n│\n├── controllers/     # Route handlers\n│   ├── auth.controller.js\n│   ├── user.controller.js\n│   └── post.controller.js\n│\n├── services/        # Business logic\n│   ├── auth.service.js\n│   ├── user.service.js\n│   └── post.service.js\n│\n├── models/          # Mongoose schemas\n│   ├── User.model.js\n│   ├── Post.model.js\n│   └── Comment.model.js\n│\n├── middleware/      # Express middleware\n│   ├── auth.middleware.js\n│   ├── validation.middleware.js\n│   └── error.middleware.js\n│\n└── utils/           # Helper functions\n    ├── email.util.js\n    ├── upload.util.js\n    └── token.util.js\n```\n\n---\n\n## 🚀 Quick Start\n\nGet the platform running locally in **5 minutes**:\n\n### Prerequisites\n\n- **Node.js** \u003e= 20.x\n- **MongoDB** (local or Atlas)\n- **Redis** (local or cloud)\n- **Git**\n\n### Installation\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/hassonor/mastering-mern.git\ncd mastering-mern\n\n# 2. Install backend dependencies\ncd backend\nnpm install\n\n# 3. Install frontend dependencies\ncd ../frontend\nnpm install\n\n# 4. Set up environment variables\ncd ../backend\ncp .env.example .env\n# Edit .env with your configuration\n\n# MongoDB (local)\nMONGODB_URI=mongodb://localhost:27017/mern-social\n\n# Redis (local)\nREDIS_URL=redis://localhost:6379\n\n# JWT\nJWT_SECRET=your-super-secret-key\nJWT_EXPIRES_IN=7d\n\n# Email (optional - for production)\nSENDGRID_API_KEY=your-sendgrid-key\nSENDGRID_FROM_EMAIL=noreply@example.com\n\n# Cloudinary (optional - for image uploads)\nCLOUDINARY_CLOUD_NAME=your-cloud-name\nCLOUDINARY_API_KEY=your-api-key\nCLOUDINARY_API_SECRET=your-api-secret\n```\n\n### Running Locally\n\n#### Option 1: Manual Start\n\n```bash\n# Terminal 1 - Start MongoDB (if local)\nmongod\n\n# Terminal 2 - Start Redis (if local)\nredis-server\n\n# Terminal 3 - Start backend\ncd backend\nnpm run dev\n\n# Terminal 4 - Start frontend\ncd frontend\nnpm run dev\n```\n\n#### Option 2: Docker Compose\n\n```bash\n# Start all services (MongoDB, Redis, Backend, Frontend)\ndocker-compose up\n\n# Backend: http://localhost:5000\n# Frontend: http://localhost:3000\n```\n\n### Access Points\n\n| Service | URL | Description |\n|---------|-----|-------------|\n| **Frontend** | http://localhost:3000 | React application |\n| **Backend API** | http://localhost:5000 | Express API |\n| **API Docs** | http://localhost:5000/api-docs | Swagger documentation |\n| **MongoDB** | mongodb://localhost:27017 | Database |\n| **Redis** | redis://localhost:6379 | Cache |\n\n---\n\n## 📁 Project Structure\n\n```\nmastering-mern/\n├── backend/                    # Express backend\n│   ├── src/\n│   │   ├── config/             # Configuration files\n│   │   │   ├── database.js     # MongoDB connection\n│   │   │   ├── redis.js        # Redis connection\n│   │   │   └── cloudinary.js   # File upload config\n│   │   │\n│   │   ├── models/             # Mongoose models\n│   │   │   ├── User.js\n│   │   │   ├── Post.js\n│   │   │   ├── Comment.js\n│   │   │   ├── Like.js\n│   │   │   └── Notification.js\n│   │   │\n│   │   ├── routes/             # API routes\n│   │   │   ├── auth.routes.js\n│   │   │   ├── user.routes.js\n│   │   │   ├── post.routes.js\n│   │   │   └── comment.routes.js\n│   │   │\n│   │   ├── controllers/        # Route controllers\n│   │   ├── services/           # Business logic\n│   │   ├── middleware/         # Express middleware\n│   │   ├── utils/              # Helper functions\n│   │   ├── validators/         # Request validation\n│   │   └── app.js              # Express app setup\n│   │\n│   ├── tests/                  # Backend tests\n│   ├── package.json\n│   └── .env.example\n│\n├── frontend/                   # React frontend\n│   ├── src/\n│   │   ├── components/         # Reusable components\n│   │   │   ├── common/         # Buttons, inputs, etc.\n│   │   │   ├── layout/         # Navbar, sidebar, footer\n│   │   │   ├── post/           # Post card, create post\n│   │   │   └── user/           # User card, profile\n│   │   │\n│   │   ├── pages/              # Route pages\n│   │   │   ├── Home.tsx\n│   │   │   ├── Profile.tsx\n│   │   │   ├── Login.tsx\n│   │   │   └── Register.tsx\n│   │   │\n│   │   ├── hooks/              # Custom React hooks\n│   │   │   ├── useAuth.ts\n│   │   │   ├── usePosts.ts\n│   │   │   └── useInfiniteScroll.ts\n│   │   │\n│   │   ├── store/              # Zustand stores\n│   │   │   ├── authStore.ts\n│   │   │   └── uiStore.ts\n│   │   │\n│   │   ├── api/                # API client\n│   │   │   ├── axios.ts        # Axios instance\n│   │   │   ├── auth.api.ts\n│   │   │   └── posts.api.ts\n│   │   │\n│   │   ├── types/              # TypeScript types\n│   │   ├── utils/              # Helper functions\n│   │   ├── App.tsx\n│   │   └── main.tsx\n│   │\n│   ├── package.json\n│   └── vite.config.ts\n│\n├── .github/\n│   └── workflows/              # CI/CD pipelines\n│       └── ci.yml\n│\n├── docker-compose.yml          # Docker services\n└── README.md\n```\n\n---\n\n## 🔧 Backend API\n\n### Key Endpoints\n\n#### Authentication\n```bash\nPOST   /api/auth/register      # Register new user\nPOST   /api/auth/login         # Login user\nPOST   /api/auth/refresh       # Refresh access token\nGET    /api/auth/me            # Get current user\nPOST   /api/auth/logout        # Logout user\n```\n\n#### Users\n```bash\nGET    /api/users              # Get all users (paginated)\nGET    /api/users/:id          # Get user by ID\nPUT    /api/users/:id          # Update user profile\nDELETE /api/users/:id          # Delete user\nPOST   /api/users/:id/follow   # Follow user\nDELETE /api/users/:id/follow   # Unfollow user\n```\n\n#### Posts\n```bash\nGET    /api/posts              # Get feed (paginated)\nPOST   /api/posts              # Create post\nGET    /api/posts/:id          # Get post by ID\nPUT    /api/posts/:id          # Update post\nDELETE /api/posts/:id          # Delete post\nPOST   /api/posts/:id/like     # Like post\nDELETE /api/posts/:id/like     # Unlike post\n```\n\n#### Comments\n```bash\nGET    /api/posts/:postId/comments       # Get comments\nPOST   /api/posts/:postId/comments       # Add comment\nPUT    /api/comments/:id                 # Update comment\nDELETE /api/comments/:id                 # Delete comment\n```\n\n---\n\n## 💻 Frontend Application\n\n### Key Features\n\n#### Authentication Flow\n```tsx\n// Login component with form validation\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\nimport { useAuthStore } from '@/store/authStore';\n\nconst loginSchema = z.object({\n  email: z.string().email(),\n  password: z.string().min(6)\n});\n\nfunction Login() {\n  const login = useAuthStore(state =\u003e state.login);\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: zodResolver(loginSchema)\n  });\n\n  const onSubmit = async (data) =\u003e {\n    await login(data.email, data.password);\n  };\n\n  return \u003cform onSubmit={handleSubmit(onSubmit)}\u003e...\u003c/form\u003e;\n}\n```\n\n#### Data Fetching with React Query\n```tsx\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { getPosts, createPost } from '@/api/posts.api';\n\nfunction Feed() {\n  const queryClient = useQueryClient();\n\n  const { data, isLoading } = useQuery({\n    queryKey: ['posts'],\n    queryFn: getPosts\n  });\n\n  const createMutation = useMutation({\n    mutationFn: createPost,\n    onSuccess: () =\u003e {\n      queryClient.invalidateQueries({ queryKey: ['posts'] });\n    }\n  });\n\n  return \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\n\n---\n\n## 🧪 Testing\n\n### Backend Tests\n\n```bash\n# Run backend tests\ncd backend\nnpm test\n\n# Watch mode\nnpm run test:watch\n\n# Coverage\nnpm run test:coverage\n```\n\n### Frontend Tests\n\n```bash\n# Run frontend tests\ncd frontend\nnpm test\n\n# E2E tests (Playwright)\nnpm run test:e2e\n```\n\n---\n\n## 🚢 Deployment\n\n### Backend Deployment (Railway/Render)\n\n```bash\n# Build for production\nnpm run build\n\n# Start production server\nnpm start\n```\n\n### Frontend Deployment (Vercel/Netlify)\n\n```bash\n# Build for production\nnpm run build\n\n# Preview build locally\nnpm run preview\n```\n\n### Docker Deployment\n\n```bash\n# Build and run all services\ndocker-compose up --build -d\n\n# View logs\ndocker-compose logs -f\n\n# Stop services\ndocker-compose down\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by [Or Hasson](https://github.com/hassonor)**\n\n⭐ Star this repo if you're learning the MERN stack!\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassonor%2Fmastering-mern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhassonor%2Fmastering-mern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassonor%2Fmastering-mern/lists"}