Manasthali connects people based on their MBTI personality type, replacing passive scrolling with genuine interaction — community groups, daily challenges, real-time chat, and an AI-powered mental coach.
| Feature | Description |
|---|---|
| 🔐 Authentication | Register, email OTP verification, sign-in, forgot/reset password, Google OAuth |
| 🧠 Personality Quiz | 35-question MBTI quiz assigns one of 16 personality types |
| 👥 Communities | Each personality type has its own community and groups |
| 💬 Real-time Chat | 1-to-1 DM and group chat powered by Socket.IO |
| 📸 Stories | Upload and view short-lived stories |
| 📝 Posts & Feed | Create posts with media, view community posts, add comments |
| 🔔 Notifications | In-app notification feed |
| 🎯 Daily Challenges | Personality-matched daily challenges with badge rewards |
| 🤝 Find Friends | Discover and follow people from your community |
| 🧘 Mental Coach | AI-assisted mental wellness advisor |
| 🛡️ Admin Panel | Manage communities, groups, and users |
| Tool | Purpose |
|---|---|
| Vite 6 | Build tool with instant HMR (replaces CRA) |
| React 19 + TypeScript | Component framework |
Inline .styles.ts objects |
All styling via React.CSSProperties — zero .css files |
| Redux Toolkit | Global auth state |
| MUI (Material UI) | Icon library |
| React Router DOM v7 | Client-side routing |
| Socket.IO Client | Real-time messaging |
| Axios | HTTP client |
| Bootstrap 5 | Utility classes (CDN) |
| React Toastify | Toast notifications |
| Tool | Purpose |
|---|---|
| Node.js + Express | REST API server |
| MongoDB + Mongoose | Database + ODM |
| Socket.IO | Real-time bi-directional communication |
| JWT | Stateless authentication |
| AWS S3 | Media storage for posts, profiles, stories |
| Nodemailer | Email OTP delivery |
| Passport.js | Google OAuth 2.0 |
| Multer | Multipart file uploads |
| bcryptjs | Password hashing |
Manasthali/
├── backend/
│ ├── controller/ # Route handler logic
│ ├── model/ # Mongoose schemas
│ ├── routes/ # Express routers
│ ├── middleware/ # Auth, S3 upload, Socket.IO, Google OAuth
│ ├── mailer/ # Nodemailer OTP emails
│ ├── scripts/ # Seed scripts (challenges)
│ ├── app.js # Server entry point
│ ├── .env # Environment variables (see .env.example)
│ └── .env.example
│
└── frontend/
├── public/ # Static assets (logo, manifest)
├── src/
│ ├── apis/
│ │ └── Api.js # Centralised API endpoints (reads VITE_API_URL)
│ ├── components/
│ │ ├── Admin/ # Admin panel (communities, groups)
│ │ ├── Authentication/ # Signup, Signin, OTP, Reset Password
│ │ ├── Authorization/ # Route guard component
│ │ ├── Feed/ # Main app shell + all feed sub-views
│ │ │ ├── challenge/
│ │ │ ├── chat/ # 1-to-1 DM
│ │ │ ├── community/
│ │ │ ├── Find-friend/
│ │ │ ├── group/
│ │ │ ├── group-chat/
│ │ │ ├── home/
│ │ │ ├── Mental-Coach/
│ │ │ ├── notification/
│ │ │ ├── post/
│ │ │ ├── profile/
│ │ │ └── story/
│ │ ├── Home/ # Landing page
│ │ └── Quiz/ # Personality quiz + result page
│ ├── images/ # Local image assets
│ ├── redux-config/ # Redux store + UserSlice
│ ├── utils/
│ │ └── styleUtils.ts # useHover hook, mergeStyles, injectGlobalStyles
│ ├── App.js # Route definitions
│ ├── main.tsx # Vite entry point + global style injection
│ └── vite-env.d.ts # Vite environment type declarations
├── index.html # Vite root HTML
├── vite.config.ts
├── tsconfig.json
├── package.json
├── .env # VITE_API_URL (see .env.example)
└── .env.example
- Node.js ≥ 18
- MongoDB running locally or a MongoDB Atlas URI
- An AWS S3 bucket for media storage (or compatible S3 provider)
- A Gmail account with an App Password for SMTP
git clone https://github.com/your-username/manasthali.git
cd manasthaliBackend:
cp backend/.env.example backend/.env
# Then open backend/.env and fill in your valuesPORT=3001
FRONTEND_URL=http://localhost:3000
DB_URI=mongodb://localhost:27017/manasthali
JWT_SECRET=your_jwt_secret_here
AWS_ACCESS_KEY_ID=your_aws_access_key_id
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key
AWS_REGION=us-east-1
S3_BUCKET_NAME=manasthali-media
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:3001/auth/google/callback
MAIL_HOST=gmail
MAIL_PORT=465
MAIL_USER=your_email@gmail.com
MAIL_PASS=your_gmail_app_password
GEMINI_API_KEY=your_gemini_api_keyFrontend:
cp frontend/.env.example frontend/.env
# Then open frontend/.env and fill in your valuesVITE_API_URL=http://localhost:3001# Backend
cd backend && npm install
# Frontend
cd ../frontend && npm installOpen two terminals side by side:
Terminal 1 — Backend
cd backend
npm start
# ✔ Server starts at http://localhost:3001Terminal 2 — Frontend
cd frontend
npm run dev
# ✔ App opens at http://localhost:3000| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with instant HMR |
npm run build |
Type-check + build for production → frontend/dist/ |
npm run preview |
Serve the production build locally |
| Command | Description |
|---|---|
npm start |
Start the Express server (node app.js) |
All endpoints are served from VITE_API_URL (default http://localhost:3001).
| Resource | Base path |
|---|---|
| Users & Auth | /users |
| Quiz | /quiz |
| Posts | /posts |
| Comments | /comments |
| Stories | /story |
| Communities | /communities |
| Groups | /groups |
| Group Chat | /groupchat |
| Direct Messages | /message |
| Notifications | /notifications |
| Challenges | /challenge |
| Badges | /badges |
| Mental Coach | /mental-coach |
| Admin | /admin |
| Google OAuth | /auth/google |
- Frontend code-splits all routes with
React.lazy+Suspense - Feed uses infinite scroll (5 posts per page)
- Key components wrapped with
React.memo - All images use
loading="lazy"
Styling — There are zero .css files in the project. Every component has a sibling .styles.ts file that exports typed React.CSSProperties objects. Hover states use the useHover hook from src/utils/styleUtils.ts. Global resets and @keyframes animations are injected once at startup via injectGlobalStyles() in main.tsx.
Environment isolation — No backend URLs appear in source code. The frontend reads a single VITE_API_URL env var; switching from local to production only requires changing .env.
Real-time — Socket.IO handles both 1-to-1 DM (send-message / receive-message) and group chat (send-message-group / receive-message-group). The backend CORS origin is driven by FRONTEND_URL.
Auth flow — Register → email OTP verification → sign in → JWT stored in Redux. Protected routes use the Authorization/Auth.js guard, which redirects unauthenticated users to /signin.
Media uploads — Multer handles multipart form data server-side; Cloudinary stores the actual files. The local uploads/ directory acts only as a temporary buffer.
- Backend: Node 18+, MongoDB 6+
- Frontend: Node 18+, Vite dev server
- Fork the repo
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'feat: add your feature' - Push:
git push origin feature/your-feature - Open a Pull Request