TwinkConnect 😺

A Real-Time web-based Chat App built using MERN Stack. { Development in Progress }

✅ Site Status

Live At:

💻 Tech Stack

📃 Features List

👦🏻 User Features

- Real-time one-to-one chat

- reCAPTCHA support

- Robust authentication system with dynamic flow

- OTP based verification and password reset functionality

- 3 Social logins methods (Google, GitHub & LinkedIn)

- Disposable email check

- Highly responsive UI

- Dark/Light theme support

- 6 different color presets

- Custom movable sidebar for theme settings

- Profile section with image cropper & drag-n-drop support

- Search friends with infinite scrolling

- Emoji support

- Real-time online status

- Real-time typing... message

- Dynamic friends contact menu

🧑🏻‍💻 Developer Features

Backend:

- Added security options (Rate Limit, XSS Protection, Sanitization, URL Encoding & more)

- Dynamic server & routes error handling

- Dedicted folder structure

- JWT Middlewares for both APIs & Socket based requests

- Cloudinary file upload system with auto folder structuring

- Access & Refresh token with cookies support

- Structured DB with pre save & validations

- And much more

Frontend:

- Custom axios setup for easier API calling

- Custom error interceptors for axios error handlings

- Redux toolkit with persist

- Custom hooks

- Auto refresh tokens & auto token verification

- Google Ananlytics support

- Dynamic routing with lazy loading

- Custom loader

- Customized theme with dedicated folder structuring

- React Hook Form with Yup form validations

- Custom utils folder

- And much more

👾 Installation

Bankend:

From root directory, move to the backend using command

$ cd backend/

Install dependencies for server

$ npm install

Setup .env using .env copy file

$ located in backend/

Start the backend using nodemon

$ npm start

Frontend:

From root directory, move to the frontend using command

$ cd frontend/

Install dependencies for frontend

$ npm install -f