Modular architecture for InterviewPro.info, including React microfrontends with Vite & Next.js, and a Node.js backend API service deployed on Vercel.
| Layer | Technology | Role |
|---|---|---|
| Frontend | React (Vite) | Microfrontend apps (DSA, Host Shell) |
| Frontend | Next.js | Microfrontend app (WebDev content) |
| Styling | Tailwind CSS | Styling for all frontend apps |
| Backend API | Node.js + Express | REST API for interview questions |
| Database | MongoDB (assumed) | Persistent storage |
| Deployment | Vercel | Serverless hosting for frontend & API |
/
βββ microfrontend/
β βββ apps/
β β βββ host/ # React shell app (layout + routing)
β β βββ dsa/ # React remote microfrontend for DSA
β β βββ webdev/ # Next.js remote microfrontend for Web Dev
β βββ README.md # Microfrontend specific README
βββ interviewpro-backend/
β βββ app.js # Express app setup
β βββ server.js # Server entry point, DB connection
β βββ config/
β β βββ db.js # MongoDB connection logic
β βββ routes/
β β βββ react.routes.js # React interview questions routes
β βββ .env # Environment variables (local)
β βββ package.json
β βββ vercel.json # Vercel deployment config for backend
βββ README.md # This combined root README
- Install dependencies for all apps:
npm install- Start the DSA remote microfrontend first:
cd microfrontend/apps/dsa
npm run start-mf- Start the Host shell app:
cd microfrontend/apps/host
npm run dev- Optionally start WebDev remote microfrontend:
cd microfrontend/apps/webdev
npm run dev- Navigate to API folder and install:
cd interviewpro-backend
npm install- Create
.envfile with:
PORT=5000
MONGO_URI=your_mongodb_connection_string
- Start the server locally:
npm startAPI will be available at http://localhost:5000.
| Route | Method | Description |
|---|---|---|
/ |
GET | API landing page with overview |
/api/react |
GET | React interview questions |
/api/js |
GET | JavaScript questions (optional) |
/api/dsa |
GET | DSA questions (optional) |
- Each microfrontend app can be deployed independently or together.
- Use Vercel dashboard to deploy each app (
host,dsa,webdev). - Set environment variables if needed.
- Add
vercel.jsonin/api:
{
"version": 2,
"builds": [
{
"src": "server.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "server.js"
}
]
}- Set environment variables in Vercel dashboard:
PORTMONGO_URI
- Deploy the API folder as a separate project in Vercel.
- Live frontend demo: https://interviewpro-mfa.vercel.app/
- Live backend API: https://interviewpro-services.vercel.app
- Live backend API swagger docs: https://interviewpro-swagger-ui.vercel.app/
- Complete module federation with WebDev remote
- Add Swagger/OpenAPI docs for backend API
- Implement authentication & authorization
- CI/CD pipelines for both frontend & backend
- Add caching & rate limiting for API
- Expand question sets and categories
MIT Β© Mateshwari | InterviewPro.info