A web application for exploring Vancouver Island University (VIU) credentials and their associated career paths with employment outlook data. Users can browse VIU programs, discover related occupations, and view 3-year employment projections across British Columbia's economic regions.
- Framework: Next.js 15 with App Router and Turbopack
- Language: TypeScript
- UI: React 19
- Styling: TailwindCSS with shadcn/ui components
- Database: Neon PostgreSQL (serverless Postgres)
- ORM: Prisma
- Package Manager: pnpm
- Deployment: Vercel
- Node.js 18.x or later
- pnpm (recommended) - Install with
npm install -g pnpm - A Neon PostgreSQL database (or compatible PostgreSQL instance)
git clone https://github.com/your-username/viu-career-outlooks.git
cd viu-career-outlookspnpm installCreate a .env.local file in the project root with your database credentials:
# Neon Database (Pooled connection - for app queries)
DATABASE_URL=postgresql://user:password@ep-xxx-pooler.region.aws.neon.tech/neondb?sslmode=require
# Neon Database (Direct connection - for Prisma migrations)
DATABASE_URL_UNPOOLED=postgresql://user:password@ep-xxx.region.aws.neon.tech/neondb?sslmode=requireNote: If using Vercel with Neon integration, you can copy these values from the Neon console or your Vercel project's environment variables.
| Variable | Description |
|---|---|
DATABASE_URL |
Pooled connection string (hostname contains -pooler). Used by the app for queries. Better for concurrent connections. |
DATABASE_URL_UNPOOLED |
Direct connection string (no -pooler in hostname). Required by Prisma for migrations and schema changes. |
Generate the Prisma client and run migrations:
# Generate Prisma client
pnpm prisma generate
# Run migrations to create database tables
# Note: Use dotenv-cli to load .env.local for Prisma CLI
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma migrate deploypnpm devOpen http://localhost:3000 in your browser.
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── economic-regions/
│ │ ├── noc/[noc]/
│ │ ├── outlooks/
│ │ ├── preferences/
│ │ ├── programs/[nid]/
│ │ └── top-outlooks/
│ ├── credentials/ # Credentials browsing page
│ ├── noc/[noc]/ # NOC occupation details
│ ├── programs/[nid]/ # Program details page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── credentials/ # Credential-related components
│ ├── global/ # Shared/reusable components
│ ├── home/ # Home page components
│ ├── noc/ # NOC page components
│ ├── programs/ # Program page components
│ └── ui/ # shadcn/ui components
├── lib/ # Utility functions
│ ├── constants.ts
│ ├── cookies.ts
│ ├── db.ts # Prisma client instance
│ └── utils.ts
├── prisma/
│ ├── migrations/ # Database migrations
│ └── schema.prisma # Database schema
├── public/ # Static assets
│ ├── icons/
│ └── images/
├── types/ # TypeScript type definitions
└── __tests__/ # Test files
The application uses the following data models:
| Model | Description |
|---|---|
Program |
VIU academic programs (diplomas, degrees, certificates) |
ProgramArea |
Program categories/faculties |
UnitGroup |
NOC (National Occupational Classification) occupation codes |
Outlook |
Employment outlook data for occupations by region |
EconomicRegion |
BC economic regions for employment data |
SectionsEntity |
Detailed occupation information sections |
# Generate Prisma client after schema changes
pnpm prisma generate
# Run migrations (creates/updates database tables)
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma migrate deploy
# Create a new migration
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma migrate dev --name your_migration_name
# Open Prisma Studio (database GUI)
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma studio
# Pull schema from existing database
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma db pull| Script | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Build for production (runs Prisma generate & migrate) |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm test |
Run Jest tests |
pnpm test:watch |
Run tests in watch mode |
This project uses Jest and React Testing Library for testing. Tests are written in JavaScript to avoid additional dependencies in CI/CD pipelines.
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watchFor more details on writing and running tests, see our Testing Guidelines.
- Connect your repository to Vercel
- Add a Neon PostgreSQL database via the Vercel Storage tab
- Ensure environment variables are configured:
DATABASE_URLDATABASE_URL_UNPOOLED
- Deploy!
The build script automatically runs Prisma generate and migrations:
"build": "prisma generate && prisma migrate deploy && next build"- Set up environment variables on your hosting platform
- Run
pnpm build - Run
pnpm start
We welcome contributions! Please see our Contributing Guide for details on:
- Development workflow
- Branch strategy
- Testing requirements
- Code review process
- Fork the repository
- Clone your fork
- Switch to dev branch:
git checkout dev - Create your feature branch:
git checkout -b feature/amazing-feature - Follow our Contributing Guide for next steps
This project uses GitHub Actions to enforce our development workflow:
- PRs to
devrequire passing tests and linting - PRs to
mainrequire at least one approval and passing tests - Merging to
mainautomatically triggers deployment to production
Always develop in dev first and only merge to main when ready for production deployment.
Prisma CLI doesn't automatically read .env.local. Use dotenv-cli:
pnpm dlx dotenv-cli -e .env.local -- pnpm prisma migrate deploy- Verify your connection strings in
.env.local - Ensure
DATABASE_URLuses the pooled connection (-poolerin hostname) - Ensure
DATABASE_URL_UNPOOLEDuses the direct connection (no-pooler)
If you see schema mismatch errors, regenerate the Prisma client:
pnpm prisma generate- Next.js Documentation
- Prisma Documentation
- Neon Documentation
- TailwindCSS Documentation
- shadcn/ui Documentation
This project is private and proprietary to Vancouver Island University.