BUILD UMass Website

The official website for BUILD UMass - a student organization that builds software for nonprofits and local businesses.

Features

• Application System: Software Developer and Product Manager application forms
• Waitlist: Email signup for interested members when applications are closed
• Admin Dashboard: Password-protected dashboard for managing applications
  • Toggle applications open/closed for each role
  • View all waitlist members, SD applications, and PM applications
  • Delete individual records or bulk delete all records
  • View if applicants have previously applied
• Contact Form: Email contact form powered by Resend

Tech Stack

• Framework: Next.js 15 (Pages Router), TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL via Prisma
• ORM: Prisma
• Authentication: NextAuth.js (Credentials provider)
• Email: Resend API

Project Structure

BUILD-website/
├── src/
│   ├── components/          # React components
│   │   ├── apply/           # Application-related components
│   │   ├── nav/             # Navigation components
│   │   └── ui/              # Shared UI components
│   ├── content/             # Static content data
│   ├── hooks/               # Custom React hooks
│   ├── layouts/             # Page layouts
│   ├── pages/               # Next.js pages
│   │   ├── api/             # API routes
│   │   │   ├── admin/       # Admin endpoints (data, status, delete)
│   │   │   ├── applications/# Application submission endpoints
│   │   │   ├── auth/        # NextAuth configuration
│   │   │   ├── waitlist/    # Waitlist endpoints
│   │   │   └── send-email.ts# Contact form email endpoint
│   │   ├── apply/           # Application form pages
│   │   └── admin.tsx        # Admin dashboard
│   └── styles/              # Global styles
├── database/
│   └── db/
│       ├── prisma.ts        # Prisma client
│       ├── models/          # Database model utilities
│       └── schemas/
│           └── schema.prisma # Database schema
├── public/                  # Static assets
├── .env.local               # Environment variables (not committed)
├── tailwind.config.ts       # Tailwind configuration
└── package.json             # Dependencies and scripts

Quick Start

Prerequisites

• Node.js 18+
• npm

1. Install Dependencies

npm install

2. Configure Environment Variables

Create a .env.local file in the root directory:

# Database - PostgreSQL connection string
DATABASE_URL="postgres://[user]:[password]@[host]:5432/postgres?sslmode=require"

# Admin password for dashboard access
ADMIN_PASSWORD=your-secure-password

# NextAuth secret - generate with: openssl rand -base64 32
NEXTAUTH_SECRET=your-generated-secret

# Email (Resend)
RESEND_API_KEY=your-resend-api-key
PERSONAL_EMAIL=your-email@example.com

3. Generate Prisma Client

npx prisma generate

4. Push Database Schema

npx prisma db push

5. Start Development Server

npm run dev

The site will be available at http://localhost:3000

Development Commands

npm run dev              # Start development server
npm run build            # Build for production
npm run start            # Start production server
npm run lint             # Run ESLint
npm run format           # Format code with Prettier

# Prisma commands
npx prisma generate      # Generate Prisma client
npx prisma db push       # Push schema to database
npx prisma migrate dev   # Run database migrations
npx prisma studio        # Open Prisma Studio (database GUI)

Database Schema

Tables

Table	Description
waitlist_members	Email signups for the waitlist
software_developers	Software Developer applications
product_managers	Product Manager applications
application_status	Controls if applications are open/closed
admins	Admin users (for future use)

API Routes

Public Endpoints

Method	Endpoint	Description
GET	/api/applications/status	Get application open/closed status
POST	/api/applications/software-developer	Submit SD application
POST	/api/applications/product-manager	Submit PM application
POST	/api/waitlist/join	Join the waitlist
POST	/api/send-email	Send contact form email

Protected Admin Endpoints

Method	Endpoint	Description
GET	/api/admin/data	Fetch all applications and waitlist
GET	/api/admin/status	Get application status
POST	/api/admin/status	Toggle application status
DELETE	/api/admin/delete	Delete individual or all records

Admin Dashboard

Access the admin dashboard at /admin. Features include:

1. Application Status Toggles: Open/close applications for SD and PM roles
2. Waitlist Tab: View all waitlist members with delete options
3. Software Developers Tab: View full SD applications with:
   • Contact info and resume links
   • Essay responses
   • Previous application indicator
   • Individual delete option
4. Product Managers Tab: View full PM applications with similar features
5. Bulk Delete: Delete all records in any category

Environment Variables

Variable	Description
DATABASE_URL	PostgreSQL connection string
ADMIN_PASSWORD	Password for admin dashboard access
NEXTAUTH_SECRET	Secret for NextAuth session encryption
RESEND_API_KEY	API key for Resend email service
PERSONAL_EMAIL	Email address to receive contact form submissions

Styling

The website uses BUILD UMass brand guidelines:

• Primary Font: Montserrat
• Secondary Font: Source Sans Pro
• Primary Color: BUILD Red (#dc2626)
• Design: Clean, modern interface with Tailwind CSS

Deployment (Vercel)

1. Connect your repository to Vercel
2. Set environment variables in Vercel project settings:
   • DATABASE_URL
   • ADMIN_PASSWORD
   • NEXTAUTH_SECRET
   • RESEND_API_KEY
   • PERSONAL_EMAIL
3. Deploy - Vercel will automatically build and deploy

For manual deployment:

npm run build
npm run start