🧩 InterviewPro.info — Full Stack Microfrontend + API Service

Modular architecture for InterviewPro.info, including React microfrontends with Vite & Next.js, and a Node.js backend API service deployed on Vercel.

---

⚙️ Tech Stack Overview

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

---

📁 Project Structure

/
├── 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

---

🚀 Getting Started (Local Development)

Frontend Microfrontends

1. Install dependencies for all apps:

npm install

2. Start the DSA remote microfrontend first:

cd microfrontend/apps/dsa
npm run start-mf

3. Start the Host shell app:

cd microfrontend/apps/host
npm run dev

4. Optionally start WebDev remote microfrontend:

cd microfrontend/apps/webdev
npm run dev

---

Backend API

1. Navigate to API folder and install:

cd interviewpro-backend
npm install

2. Create .env file with:

PORT=5000
MONGO_URI=your_mongodb_connection_string

3. Start the server locally:

npm start

API will be available at http://localhost:5000.

---

📦 API Endpoints

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)

---

🛠️ Deployment on Vercel

Frontend

• Each microfrontend app can be deployed independently or together.
• Use Vercel dashboard to deploy each app (host, dsa, webdev).
• Set environment variables if needed.

Backend

1. Add vercel.json in /api:

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}

2. Set environment variables in Vercel dashboard:

• PORT
• MONGO_URI

3. Deploy the API folder as a separate project in Vercel.

---

🔗 Links

• 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/

---

📌 Roadmap

• 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