# ⚡️ MERN STACK Boilerplate — React + Tailwind CSS v4 + Express + Socket + Mongoose + Typescript(frontend + backend)

A modern MERN stack boilerplate to kickstart your **Web App** development using:

- ⚛️ React (with Vite)
- 🎨 Tailwind CSS v4
- 🚀 Express (Node.js backend)
- 🔌 Socket.io
- 🍃 MongoDB (via Mongoose) 
- 💙 TypeScript (backend + frontend)

This setup is lightweight, modular, and scalable — ideal for both frontend and backend development with real-time communication support.

---

## 🧰 Tech Stack

### Frontend
- **React** – For building user interfaces
- **TypeScript** – Type-safe development
- **Tailwind CSS v4** – Utility-first CSS framework
- **React Router DOM** – Page routing
- **Vite** – Lightning-fast dev server and build tool

### Backend
- **Express.js** – Minimal and flexible Node.js web application framework
- **TypeScript** – Backend written in TS too!
- **CORS** – Cross-origin resource sharing
- **MongoDB** - NoSQL database (via Mongoose)
- **Socket.io** - Real-time WebSocket communication
- **Dotenv** – Environment variable management
- **Nodemon** – Auto-restart backend on changes (for smooth development)

---

## ✨ Features

- Clean & modular codebase
- MongoDB integration with async/await and models
- WebSocket support with Socket.io setup
- Backend structured with app.ts, server.ts, socketSetup.ts
- Nodemon for auto-reloading backend server
- React + Tailwind + TypeScript + Vite scaffolded frontend
- Error pages, shared layout, routing & reusable components
- Environment variables managed via .env file

---

Frontend runs on: http://localhost:5173
Backend runs on: http://localhost:4000 (or your custom port in .env)

---

## 👨‍💻 Author
Crafted with ❤️ by Nikhil - [GitHub](https://github.com/nikhilhuh)

## ⭐️ Support
If you found this useful, give me a follow on GitHub and share it with others!