WealthStream is a complete MERN stack investment platform that simulates a virtual wealth management system.
It provides authentication, KYC verification, investment products, transaction handling, and portfolio management with interactive visualizations.
- User registration & login with JWT authentication
- PAN validation and ID document upload
- KYC status verification
- 5 seeded investment products (Stocks, Mutual Funds, Bonds)
- Price charts using Chart.js
- Category filtering and detailed product pages
- Virtual wallet with βΉ1,00,000 starting balance
- Buy functionality with real-time balance updates
- Portfolio dashboard with P&L calculations
- Interactive allocation and performance charts
- Watchlist functionality
- Transaction history with filtering
- Responsive UI for all devices
- Comprehensive error handling
Frontend
- React.js (Context API for Auth)
- Chart.js for charts
- CSS Grid & Flexbox for responsive design
Backend
- Node.js + Express.js
- MongoDB + Mongoose
- JWT for authentication
- Multer for file uploads
- Models:
User,Product,Transaction,Portfolio - Controllers: Auth, Product, Transaction, Portfolio (full CRUD)
- Routes: RESTful API endpoints
- Middleware: Authentication, File Upload, Error Handling
- Database: MongoDB configuration & seed data
- Authentication: Login, Register, KYC Form with validation
- Products: Listing, Filtering, Charts, Detailed Views
- Portfolio: Dashboard, Transaction History, Watchlist
- Common: Header, Footer, Private Routes
- Context: Auth Context for global state
- Services: API Service with interceptors
git clone https://github.com/yourusername/wealthstream.git
cd wealthstreamcd backend
npm install
cp .env.example .env # configure environment variables
npm run seed # seed initial products
npm run dev # start backend on http://localhost:5000cd frontend
npm install
npm start # start frontend on http://localhost:3000MONGODB_URI= YOUR_MONGO_URL
NODE_ENV= development
PORT=5000
JWT_SECRET=your_super_secure_jwt_secret_key_here_min_32_charactersREACT_APP_API_URL=http://localhost:5000/api
REACT_APP_APP_NAME=Wealth Stream.env.example with placeholders.
POST http://localhost:5000/api/auth/register
Content-Type: application/json
{
"name": "Balram",
"email": "balram@example.com",
"password": "121212"
}POST http://localhost:5000/api/auth/login
Content-Type: application/json
{
"email": "balram@gmail.com",
"password": "121212"
}POST http://localhost:5000/api/auth/kyc
Authorization: Bearer {{token}}
Content-Type: multipart/form-dataGET http://localhost:5000/api/auth/profile
Authorization: Bearer {{token}}GET http://localhost:5000/api/productsGET http://localhost:5000/api/products/{productId}GET http://localhost:5000/api/products/category/{category}GET http://localhost:5000/api/portfolio
Authorization: Bearer {{token}}POST http://localhost:5000/api/portfolio/watchlist
Authorization: Bearer {{token}}
Content-Type: application/json
{
"productId": "68d8d91b460be630651028e7"
}DELETE http://localhost:5000/api/portfolio/watchlist/{productId}
Authorization: Bearer {{token}}GET http://localhost:5000/api/portfolio/watchlist
Authorization: Bearer {{token}}POST http://localhost:5000/api/transactions/buy
Authorization: Bearer {{token}}
Content-Type: application/json
{
"productId": "68d83afdeb9698d027538ee6",
"units": 5
}GET http://localhost:5000/api/transactions
Authorization: Bearer {{token}}GET http://localhost:5000/health- Modern, responsive design (CSS Grid & Flexbox)
- Interactive data visualizations with Chart.js
- Mobile-friendly navigation
- Loading & error states for better UX