SYNCUP - Realtime Coaching Feed Application

A small realtime coaching feed application built using:

• Node.js
• Express.js
• MongoDB
• Redis
• Socket.IO
• Next.js

The application allows admins to create coaching feed updates and instantly broadcast them to all connected users in realtime without refreshing the page.

---

Features

Backend

• REST APIs using Express.js
• MongoDB database integration
• Redis caching for feed fetching
• Socket.IO realtime updates
• Cache invalidation handling
• Error handling

Frontend

• Next.js frontend
• Home page to display feeds
• Admin page to add feeds
• Live realtime updates
• Loading and error states

Bonus Features

• Socket reconnect handling
• Duplicate socket listener prevention
• Scalable architecture structure

---

Tech Stack

Frontend

• Next.js
• React
• TailwindCSS
• socket.io-client

Backend

• Node.js
• Express.js
• MongoDB + Mongoose
• Redis
• Socket.IO

---

Project Structure

project/
│
├── backend/
│   ├── controllers/
│   ├── models/
│   ├── redis/
│   ├── routes/
│   ├── socket/
│   ├── server.js
│   └── .env
│
├── frontend/
│   ├── app/
│   │   ├── page.tsx
│   │   └── admin/
│   │       └── page.tsx
│   │
│   ├── components/
│   └── package.json
│
└── README.md

---

Application Flow

Feed Fetch Flow

Frontend
   ↓
GET /feed
   ↓
Check Redis Cache
   ↓
Cache Hit? → Return Cached Data
   ↓
Cache Miss? → Fetch MongoDB
   ↓
Save Result To Redis
   ↓
Return Response

---

Feed Creation Flow

Admin Page
   ↓
POST /feed
   ↓
Save Feed To MongoDB
   ↓
Delete Redis Cache
   ↓
Emit Socket Event
   ↓
Connected Clients Receive Update
   ↓
Frontend Updates Instantly

Installation

Clone Repository

git clone <repo-url>

---

Backend Setup

Navigate

cd backend

Install Dependencies

npm install

Create .env

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/syncup

Start Backend

npm run dev

---

Redis Setup

Make sure Redis server is running locally.

Default Redis port:

6379

---

Frontend Setup

Navigate

cd frontend

Install Dependencies

npm install

Start Frontend

npm run dev

---

Realtime Event Name

new-feed

---