A modern full-stack EdTech and SaaS platform built with the MERN stack, featuring an interactive company homepage, a complete About Us experience, and a dynamic Career Portal powered live by Google Sheets.

• Interactive animated hero with particle/star background
• Animated CTA buttons (Explore Programs, Explore Software, View Careers)
• Trust stats bar (50,000+ Learners, 100+ Programs, 10,000+ Projects, 50+ Workshops)
• What We Do section with icon-driven service cards
• Featured Programs section with animated program cards
• Software / SaaS Ecosystem section showcasing VaultofCodes products
• Why Us section with differentiator highlights
• How It Works step-by-step guide
• Community / Student testimonials section
• Final CTA section
• Responsive navigation with mobile hamburger menu & slide-in drawer

• Company hero with gradient headline
• Our Story narrative section
• Mission & Vision cards
• Team section with member cards
• Company timeline
• Final CTA linking to Careers

• Dynamic job and internship listings fetched live from Google Sheets via Google Apps Script
• Tab filtering: All Opportunities / Jobs / Internships
• Real-time search across title, department, and skills (debounced)
• Department, Work Mode, and Location dropdown filters
• Combinable filters (e.g. Internship + Development + Remote)
• Featured opportunity badges
• Opportunity detail page (/careers/:id) with title, type, department, location, mode, experience, duration, skills, description, deadline, and direct Apply Now link
• Apply Now uses the applyLink from Google Sheets (not hard-coded)
• Active / Closed status handling (Closed opportunities hidden from listing)
• Loading skeleton UI while fetching
• Full error state with Retry button if API is unreachable
• Empty state for no results or no search matches
• Local sample data fallback for development only (controlled by ALLOW_CAREER_FALLBACK=true)

• User registration (/register) with full-name, email, password, confirm-password
• User login (/login) with email and password
• JWT-based authentication (7-day token)
• Persistent session (token stored in localStorage, restored on page load via /api/auth/me)
• Protected /dashboard route — redirects unauthenticated users to /login
• Logout clears token and session state
• Navbar shows "Hi, [First Name]" + Dashboard + Logout when authenticated
• Dual mode: MongoDB Atlas when MONGO_URI is set, in-memory fallback for local development without a database

• Express REST API (Node.js + Express 5)
• MongoDB / Mongoose for user and contact data
• Google Apps Script integration for Career Portal data
• 60-second server-side in-memory cache on career data to respect Apps Script rate limits
• Morgan HTTP request logging
• Centralized error handling middleware
• 404 not-found middleware
• CORS configured for frontend origin

React Frontend (Vite + TailwindCSS v4)
            │
            │ fetch /api/*
            ▼
Express REST API (Node.js)
            │
   ┌────────┴────────┐
   ▼                 ▼
MongoDB Atlas    Google Apps Script
(Users,            │
 Contacts)         ▼
              Google Sheets
           (Career Listings)

vaultofcodes/
│
├── client/                         # React + Vite frontend
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   ├── about/              # AboutHero, OurStory, MissionVision, Team, AboutTimeline
│   │   │   ├── auth/               # ProtectedRoute
│   │   │   ├── careers/            # CareerCard, CareerFilters
│   │   │   ├── common/             # AnimatedCounter, Badge, Button, CareerSkeleton,
│   │   │   │                       # Container, EmptyState, ErrorState, FilterSelect,
│   │   │   │                       # GlassCard, SearchInput, SectionHeading, ScrollReveal…
│   │   │   ├── home/               # Hero, HeroBackground, TrustStats, WhatWeDo,
│   │   │   │                       # Programs, SoftwareEcosystem, WhyUs, HowItWorks,
│   │   │   │                       # Community, FinalCTA
│   │   │   └── layout/             # Navbar, MobileMenu, Footer
│   │   ├── context/
│   │   │   └── AuthContext.jsx     # JWT auth state + session restore
│   │   ├── data/
│   │   │   ├── programs.js         # Static program card data
│   │   │   └── sampleCareers.js    # Dev-only fallback careers
│   │   ├── hooks/
│   │   │   ├── useCareers.js       # Career data fetching hook
│   │   │   ├── useDebounce.js      # Search debounce hook
│   │   │   └── useSEO.js           # Document title/meta hook
│   │   ├── pages/
│   │   │   ├── Home.jsx
│   │   │   ├── About.jsx
│   │   │   ├── Careers.jsx
│   │   │   ├── CareerDetails.jsx
│   │   │   ├── Contact.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   └── NotFound.jsx
│   │   ├── services/
│   │   │   └── api.js              # Fetch wrapper + authAPI + careerAPI + contactAPI
│   │   ├── utils/
│   │   │   └── format.js           # Date formatting helpers
│   │   ├── App.jsx                 # Route definitions + AnimatePresence transitions
│   │   ├── main.jsx
│   │   └── index.css               # TailwindCSS v4 design tokens + utilities
│   ├── .env.example
│   ├── vite.config.js              # Dev proxy /api → localhost:5001
│   └── package.json
│
├── server/                         # Node.js + Express backend
│   ├── config/
│   │   └── db.js                   # MongoDB connection (graceful no-op without MONGO_URI)
│   ├── controllers/
│   │   ├── authController.js       # Register + Login + GetMe (with in-memory fallback)
│   │   ├── careerController.js     # Career list + career detail (from Google Sheets)
│   │   └── contactController.js    # Contact message save
│   ├── middleware/
│   │   ├── authMiddleware.js       # JWT Bearer token verification
│   │   ├── errorMiddleware.js      # Centralized error handler
│   │   └── notFound.js             # 404 handler
│   ├── models/
│   │   └── User.js                 # Mongoose user schema (bcrypt password hashing)
│   ├── routes/
│   │   ├── authRoutes.js
│   │   ├── careerRoutes.js
│   │   └── contactRoutes.js
│   ├── services/
│   │   └── googleSheets.js         # Google Apps Script fetch + 60s cache + fallback logic
│   ├── utils/
│   │   └── fallbackCareers.js      # Dev-only sample career data for server side
│   ├── server.js                   # App entry point
│   ├── .env.example
│   └── package.json
│
├── docs/
│   └── screenshots/                # 13 QA output screenshots
│
├── package.json                    # Root scripts (dev, install:all, etc.)
├── .gitignore
└── README.md

• Node.js 20+
• npm 10+
• MongoDB Atlas account (optional for local dev — in-memory fallback available)
• Google Sheet + Apps Script URL (optional — sample fallback data available for local dev)

git clone <repository-url>
cd vaultofcodes

npm run install:all

Or manually:

cd server && npm install
cd ../client && npm install

PORT=5001
MONGO_URI=your_mongodb_atlas_connection_string
GOOGLE_APPS_SCRIPT_URL=your_google_apps_script_exec_url
JWT_SECRET=your_strong_jwt_secret_here
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173
ALLOW_CAREER_FALLBACK=true   # Set true for local dev without Google Sheets

VITE_API_URL=/api

The Vite dev server proxies /api to http://localhost:5001, so no full URL is needed in development.

npm run dev:server   # Terminal 1
npm run dev:client   # Terminal 2

Or use a single command (runs both in background):

npm run dev

• Frontend: http://localhost:5173
• Backend API: http://localhost:5001
• Health check: http://localhost:5001/api/health

Response (register/login):

{
  "success": true,
  "user": { "id": "...", "name": "...", "email": "...", "role": "user" },
  "token": "eyJhbGci..."
}

Filtering Examples:

GET /api/careers?type=Internship
GET /api/careers?department=Development&mode=Remote
GET /api/careers?search=React

Response:

{
  "success": true,
  "data": [
    {
      "id": "1",
      "title": "Frontend Developer Intern",
      "type": "Internship",
      "department": "Development",
      "location": "Remote",
      "mode": "Remote",
      "experience": "0-1 years",
      "duration": "2 Months",
      "skills": ["React", "JavaScript", "CSS"],
      "description": "...",
      "deadline": "2026-09-30",
      "applyLink": "https://...",
      "status": "Active",
      "featured": true
    }
  ]
}

The Career Portal reads data live from a Google Sheet via a Google Apps Script web app.

Create a Google Sheet with the following columns (row 1 = headers):

In your Google Sheet: Extensions → Apps Script

Paste the following script:

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const rows = sheet.getDataRange().getValues();
  const headers = rows[0];
  const data = rows.slice(1).map(row => {
    const obj = {};
    headers.forEach((h, i) => { obj[h] = row[i]; });
    return obj;
  });
  return ContentService
    .createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

1. Click Deploy → New deployment
2. Select type: Web app
3. Execute as: Me
4. Who has access: Anyone
5. Click Deploy and copy the /exec URL

GOOGLE_APPS_SCRIPT_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec

Start the backend and open the careers page — listings should load from your sheet.

To test active/inactive handling: set status = Closed on any row and reload the page — that listing will disappear.

Required only for persisting user registrations. Without MONGO_URI, auth uses in-memory storage (resets on server restart).

1. Create a free account at cloud.mongodb.com
2. Create a new cluster
3. Create a database user (Database Access → Add New Database User)
4. Allow your IP or use 0.0.0.0/0 for development (Network Access)
5. Click Connect → Drivers and copy the connection string
6. Replace <password> in the connection string with your database user password
7. Add to server/.env:

MONGO_URI=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/vaultofcodes?retryWrites=true&w=majority

⚠️ Never commit MONGO_URI or database credentials to version control.

# From project root
cd client
npm run build   # Creates client/dist/

# Or connect the GitHub repo to Vercel and set:
# Root Directory: client
# Build Command: npm run build
# Output Directory: dist

Vercel Environment Variables:

VITE_API_URL=https://your-backend.render.com/api

1. Create a new Web Service on render.com
2. Set:
   • Root Directory: server
   • Build Command: npm install
   • Start Command: node server.js
3. Add all environment variables from server/.env.example

Follow the setup steps above. Atlas provides free M0 clusters suitable for this project.

Already handled in the Google Sheets Setup section above. The Apps Script URL is environment-variable-driven, so no code changes are needed for deployment.

All features were tested against the running application:

✓ Production build (vite build) — PASS
✓ Backend starts without errors
✓ Health check GET /api/health — 200 OK
✓ Homepage loads without console errors
✓ All homepage sections render correctly
✓ About page renders correctly
✓ Career listings load (Google Sheets / fallback)
✓ Search — "Developer", "React", "Python" all filter correctly
✓ Tab filter — Jobs / Internships
✓ Department filter
✓ Work mode filter
✓ Combinable filters
✓ Career detail page (/careers/:id) — full data shown
✓ Apply Now button uses applyLink from data source
✓ Loading skeleton displayed during fetch
✓ Error state renders with Retry button
✓ Empty state renders for no matches
✓ Register flow — account created, redirected to dashboard
✓ Login flow — JWT returned, session restored on reload
✓ Protected route — /dashboard redirects unauthenticated users to /login
✓ Logout — clears session, navbar reverts to Login
✓ Mobile layout — 390×844 — no horizontal scroll, no clipped content
✓ No React key warnings
✓ No uncaught JavaScript errors

The project uses a custom dark-mode design system defined in client/src/index.css:

Animations: prefers-reduced-motion is respected globally — all animations are suppressed when the user has enabled reduced motion in their OS settings.

• Passwords are hashed with bcryptjs (10 salt rounds) before storage
• JWT tokens are signed with a server-side secret (JWT_SECRET)
• .env files are excluded from version control via .gitignore
• CORS is configured to allow the frontend origin only
• The protect middleware validates JWT on all protected routes
• MONGO_URI and all credentials must be kept in environment variables — never committed

• All company statistics (50,000+ learners, 100+ programs, etc.) are sample/dummy data used for demonstration purposes
• Career listings are sample data from the connected Google Sheet (or local fallback in dev mode)
• This project was developed as a website development assignment
• The project demonstrates a complete MERN stack architecture with Google Sheets integration

Local development demo available using the setup instructions above.

Frontend runs at: http://localhost:5173
Backend API runs at: http://localhost:5001