Skip to content

Latest commit

Β 

History

History
176 lines (125 loc) Β· 4.13 KB

File metadata and controls

176 lines (125 loc) Β· 4.13 KB

🧩 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
  1. Start the DSA remote microfrontend first:
cd microfrontend/apps/dsa
npm run start-mf
  1. Start the Host shell app:
cd microfrontend/apps/host
npm run dev
  1. 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
  1. Create .env file with:
PORT=5000
MONGO_URI=your_mongodb_connection_string
  1. 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"
    }
  ]
}
  1. Set environment variables in Vercel dashboard:
  • PORT
  • MONGO_URI
  1. Deploy the API folder as a separate project in Vercel.

πŸ”— Links


πŸ“Œ 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