https://github.com/nael-awadallah/mern-chatify
This project is a full-stack web application built from the ground up with modern technologies, focusing on real-time communication, authentication, and a smooth user experience. It demonstrates best practices in backend security, frontend design, and deployment workflow — making it a solid foundation for scalable web apps.
https://github.com/nael-awadallah/mern-chatify
arcjet cloudinary daisyui expressjs jwt mongodb nodejs reactjs socket-io tailwindcss zustand
Last synced: 3 months ago
JSON representation
This project is a full-stack web application built from the ground up with modern technologies, focusing on real-time communication, authentication, and a smooth user experience. It demonstrates best practices in backend security, frontend design, and deployment workflow — making it a solid foundation for scalable web apps.
- Host: GitHub
- URL: https://github.com/nael-awadallah/mern-chatify
- Owner: nael-awadallah
- Created: 2025-09-12T17:15:07.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-12T17:18:42.000Z (10 months ago)
- Last Synced: 2025-10-07T03:59:45.544Z (9 months ago)
- Topics: arcjet, cloudinary, daisyui, expressjs, jwt, mongodb, nodejs, reactjs, socket-io, tailwindcss, zustand
- Language: JavaScript
- Homepage:
- Size: 2.73 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
✨ Full-Stack Chat App with Auth & Emails ✨
This project is a full-stack web application built from the ground up with modern technologies, focusing on real-time communication, authentication, and a smooth user experience. It demonstrates best practices in backend security, frontend design, and deployment workflow — making it a solid foundation for scalable web apps.
🔥 Key Features:
- 🔐 Custom JWT Authentication – Secure login system without relying on third-party providers.
- ⚡ Real-time Messaging with Socket.io – Instant chat experience with live updates.
- 🟢 Presence Indicators – See who’s online or offline in real time.
- 🔔 Notifications & Typing Sounds – Engaging chat interactions with toggle controls.
- 📨 Automated Welcome Emails – Sent on signup via Resend.
- 🗂️ Image Uploads via Cloudinary – Simple and reliable media handling.
- 🧰 REST API (Node.js + Express) – Well-structured and scalable backend.
- 🧱 MongoDB Database – Robust NoSQL storage for persistence.
- 🚦 API Rate-Limiting (Arcjet) – Protects against abuse and ensures reliability.
- 🎨 Modern UI – Built with React, Tailwind CSS, and DaisyUI for a clean and responsive design.
- 🧠 State Management – Powered by Zustand for simplicity and performance.
- 🧑💻 Git & GitHub Workflow – Branching, pull requests, and merges for team collaboration.
- 🚀 Easy Deployment – Free-tier friendly hosting with Sevalla.
---
## 🧪 .env Setup
### Backend (`/backend`)
```bash
PORT=3000
MONGO_URI=your_mongo_uri_here
NODE_ENV=development
JWT_SECRET=your_jwt_secret
RESEND_API_KEY=your_resend_api_key
EMAIL_FROM=your_email_from_address
EMAIL_FROM_NAME=your_email_from_name
CLIENT_URL=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
ARCJET_KEY=your_arcjet_key
ARCJET_ENV=development
```
---
## 🔧 Run the Backend
```bash
cd backend
npm install
npm run dev
```
## 💻 Run the Frontend
```bash
cd frontend
npm install
npm run dev
```