DevTinder Project Overview and GitHub Repos Full Stack Node.js Project Structure

DevTinder Project Overview and GitHub Repos

DevTinder is a full-stack Node.js project built in the Namaste Node.js course. It is a developer networking app (like Tinder for developers) where users can swipe through profiles, send connection requests, chat in real time, and build professional connections. The project is split across two GitHub repositories: one for the backend API and one for the frontend React app.

Why Two Repositories?

The DevTinder project uses a monorepo-free approach the frontend and backend live in separate GitHub repositories. This is a common pattern for production projects because:

• Independent deployment The backend API can be deployed to an EC2 instance while the frontend is deployed to Vercel or Netlify.
• Separate teams Frontend and backend developers can work independently.
• Different tech stacks The backend uses Node.js, Express, and MongoDB. The frontend uses React, TailwindCSS, and Redux.
• Clean separation of concerns The API contract (routes, request/response shapes) is the only coupling.

The Backend Repository

The backend repository contains:

• Express server Handles HTTP requests, middleware, and routing.
• Mongoose models User, ConnectionRequest, Message schemas.
• Auth system JWT-based authentication with HTTP-only cookies.
• REST APIs Signup, login, profile, feed, connection requests, chat.
• Socket.io server Real-time chat with typing indicators.
• Deployment config PM2, Nginx, environment variables.

The Frontend Repository

The frontend repository contains:

• React app Built with Vite or Create React App.
• TailwindCSS Utility-first CSS for styling.
• Redux Toolkit State management for auth, feed, and chat.
• React Router Client-side routing.
• Axios HTTP client with interceptors for auth tokens.
• Socket.io client Real-time chat connection.

How to Clone and Set Up

# Clone the backend
git clone https://github.com/yourusername/devtinder-backend.git
cd devtinder-backend
npm install
cp .env.example .env
# Add your MongoDB URI and JWT secret to .env
npm run dev

# Clone the frontend (in a new terminal)
git clone https://github.com/yourusername/devtinder-frontend.git
cd devtinder-frontend
npm install
cp .env.example .env
# Add your backend API URL to .env
npm run dev

Project Structure Backend

devtinder-backend/
├── src/
│   ├── models/
│   │   ├── user.js
│   │   ├── connectionRequest.js
│   │   └── message.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── profile.js
│   │   ├── connection.js
│   │   ├── feed.js
│   │   └── chat.js
│   ├── middlewares/
│   │   ├── auth.js
│   │   └── error.js
│   ├── utils/
│   │   ├── tokenAuth.js
│   │   └── validators.js
│   ├── app.js
│   └── server.js
├── package.json
└── .env.example

Project Structure Frontend

devtinder-frontend/
├── src/
│   ├── components/
│   │   ├── Feed/
│   │   ├── Profile/
│   │   ├── Connections/
│   │   └── Chat/
│   ├── pages/
│   ├── utils/
│   ├── store/
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── .env.example

The API Contract

The frontend and backend communicate via a REST API. The key endpoints:

• POST /api/signup Create a user account
• POST /api/login Authenticate and get a JWT cookie
• GET /api/profile/view View own profile
• PATCH /api/profile/edit Update profile
• GET /api/feed Get paginated feed of users
• POST /api/request/send/:status/:toUserId Send a connection request
• POST /api/request/review/:status/:requestId Accept or reject a request
• GET /api/connections List accepted connections

The Takeaway

The DevTinder project is organized into two GitHub repositories backend (Node.js, Express, MongoDB) and frontend (React, Redux, TailwindCSS). This separation enables independent deployment, clean separation of concerns, and scalability. Clone both repos, set up environment variables, and run them together for local development.