ChatMate

A full stack social media application built step-by-step as a learning project for mastering frontend, backend, databases, and deployment.

The project starts with static UI and gradually evolves into a real-world full-stack app with authentication, posts, comments, likes, follows, notifications, and real-time chat.

Table of Contents

• About
• Tech Stack
• Features
• Architecture
• Project Structure
• Setup & Installation
• Development Workflow
• Testing & Validation
• Deployment
• Roadmap
• Contributing
• License

About

This project is designed as a learning roadmap for Full Stack Web Development. It simulates a social media platform (like Twitter/Facebook-lite) and covers every layer of the stack:

• Frontend → HTML, CSS, JavaScript, React
• Backend → Node.js, Express
• Database → MongoDB / PostgreSQL
• Deployment → GitHub Pages, Netlify, Render, Vercel, MongoDB Atlas

The goal is to gain practical, end-to-end experience by building a feature-rich app incrementally.

Tech Stack

Frontend

• HTML5, CSS3, Vanilla JS (Phase-1 basics)
• React.js with React Router, Context API/Redux (Phase-2+)
• Tailwind CSS for responsive styling
• Axios / Fetch API for backend communication

Backend

• Node.js + Express.js
• JWT Authentication + bcrypt for security
• Multer / Cloudinary for image uploads

Database

• MongoDB + Mongoose ODM (primary choice)
• Optionally: PostgreSQL with Sequelize/Prisma ORM

Real-time

• Socket.io for chat and notifications

DevOps / Deployment

• Git + GitHub for version control
• Netlify / Vercel → Frontend hosting
• Render / Railway / Heroku → Backend hosting
• MongoDB Atlas / ElephantSQL → Cloud database
• GitHub Actions → CI/CD (tests + linting)