Single-file vanilla HTML/CSS/JS frontend for the CorperCompass NYSC relocation platform.
This is the complete frontend for CorperCompass — a single self-contained HTML file that connects to the CorperCompass backend API. No build tools, no frameworks, no dependencies to install. Open the file in a browser and it works.
- Download
corpercompass-app.html - Open it in any modern browser — or serve it with any static file server
- Change the API base URL at the top of the
<script>section (see Configuration)
That's it.
At the top of the <script> block inside corpercompass-app.html, you'll find:
const CONFIG = {
BASE_URL: 'http://localhost:5000/api',
};Change BASE_URL to point to wherever the backend is running:
| Environment | Value |
|---|---|
| Local development | http://localhost:5000/api |
| Railway | https://your-app.railway.app/api |
| Render | https://your-app.onrender.com/api |
| Custom domain | https://api.yourdomain.com/api |
This is the only line you need to change between environments.
All pages are fully wired to the backend API:
| Page | Route(s) used |
|---|---|
| Login / Register | POST /auth/login, POST /auth/register |
| Dashboard | GET /auth/me, GET /checklist/journey, GET /checklist/progress |
| Areas | GET /areas, GET /areas/:id |
| Housing | GET /lodges, GET /lodges/:id |
| Checklist | GET /checklist/journey, GET /checklist/progress, PATCH /checklist/:itemId |
| Budget | POST /budget |
| Culture Guide | GET /culture, GET /culture/:id |
| Map | GET /map/markers |
| Messages | GET /messages, POST /messages, GET /messages/conversation/:userId |
| Profile | GET /users/profile, PUT /users/profile |
The app stores the JWT returned from login/register in localStorage under the key cc_token. On page load it checks for a stored token and auto-logs in if one exists. Logging out clears it.
The backend uses HTTP-only cookies but also returns the token in the response body — the frontend uses the Bearer token approach. Make sure your backend includes the token in the login/register response body like:
{
"token": "eyJhbGc...",
"user": { ... }
}For the frontend to communicate with the backend from a different origin, the backend must allow the frontend's origin. In your backend .env:
FRONTEND_URL=http://localhost:5500If deploying to a custom domain or Vercel, update FRONTEND_URL to match.
Any static file server works:
# Python (quickest for local testing)
python3 -m http.server 5500
# Node (if you have live-server installed)
npx live-server --port=5500
# VS Code
# Install the "Live Server" extension, right-click the file → Open with Live ServerThen visit http://localhost:5500/corpercompass-app.html.
There is one file:
corpercompass-app.html ← everything lives here
Internally it's organized as:
<style> CSS design system + all page styles
<body> Auth pages (login, register)
App shell (sidebar, topbar)
All app pages (dashboard, map, areas, etc.)
Modals
<script> CONFIG object (change BASE_URL here)
State management
API utility functions
Auth logic
Page navigation
Data loading + rendering per page
Helper utilities
Boot sequence
- Fonts: Syne (headings) + DM Sans (body) — loaded from Google Fonts
- Map: Leaflet.js v1.9.4 — loaded from CDN
- No other external dependencies
See the backend repository for API documentation, environment setup, and deployment instructions:
Backend base URL pattern: /api/*
Full API reference: see README.md in the backend repo
Any modern browser (Chrome, Firefox, Safari, Edge). Does not require any polyfills.
MIT