The official recruitment portal for the Computer Science Society at the University of Santo Tomas
CSSApply is a comprehensive recruitment management system designed specifically for the Computer Science Society (CSS) at the University of Santo Tomas. This modern web application streamlines the entire recruitment process, from application submission to interview scheduling and candidate management.
- Multi-Position Applications: Support for Members, Committee Staff, and Executive Assistant positions
- Smart Interview Scheduling: Automated conflict detection and prevention
- Admin Dashboard: Comprehensive management tools for recruitment staff
- Email Notifications: Automated communication system using Brevo with test email feature
- Personality Assessment: Integrated personality test for candidate evaluation
- Secure Authentication: NextAuth.js integration with role-based access control
- Responsive Design: Mobile-first approach with modern UI/UX
- Performance Optimized: SWR caching for fast data fetching and instant page loads
- Node.js 18.0 or later
- npm, yarn, pnpm, or bun
- PostgreSQL database
- Supabase account (for file storage)
-
Clone the repository
git clone https://github.com/your-org/css-apply.git cd css-apply -
Install dependencies
npm install # or yarn install # or pnpm install
-
Environment Setup
cp .env.example .env.local
Configure the following environment variables:
# Database DATABASE_URL="postgresql://username:password@localhost:5432/css_apply" # NextAuth NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-secret-key" # Supabase NEXT_PUBLIC_SUPABASE_URL="your-supabase-url" NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key" SUPABASE_SERVICE_ROLE_KEY="your-service-role-key" NEXT_PUBLIC_PAYMENT_QR_URL="https://your-public-payment-qr-url" # Auth ALLOWED_SIGNIN_EMAIL_DOMAIN="ust.edu.ph" # Email (Brevo) BREVO_API_KEY="your-brevo-api-key"
-
Database Setup
npx prisma generate npx prisma db push
-
Start Development Server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000 to see the application.
css-apply/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── admin/ # Admin dashboard pages
│ │ ├── api/ # API routes
│ │ ├── auth/ # Authentication pages
│ │ ├── user/ # User application pages
│ │ └── personality-test/ # Personality assessment
│ ├── components/ # Reusable React components
│ ├── data/ # Static data and configurations
│ ├── lib/ # Utility functions and configurations
│ ├── styles/ # Global styles and animations
│ └── types/ # TypeScript type definitions
├── prisma/ # Database schema and migrations
├── public/ # Static assets
└── Configuration files
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build the application for production |
npm run start |
Start the production server |
npm run lint |
Run ESLint for code quality |
npm run lint:fix |
Run ESLint with auto-fix |
npx prisma generate |
Regenerate Prisma client |
npx prisma db push |
Push schema changes to database |
npx prisma studio |
Open Prisma Studio GUI |
- Basic membership application
- Simple form with personal information
- Automatic approval process
- Apply for specific committee positions
- Portfolio submission required
- Interview scheduling with committee heads
- Apply to assist Executive Board members
- CV submission required
- Interview scheduling with EB members
The Super Admin dashboard provides comprehensive system management:
- User Database (user_db): View, search, and manage all users. Assign EB (Executive Board) profiles, change roles (user/admin/super_admin), and view member statistics.
- Configuration (config): Manage recruitment cycles with start/end dates and active status.
- Test Email (email_test): Send test emails for all email templates to verify delivery and design.
Super Admins can assign and manage Executive Board profiles including:
- Position (President, Secretary, Treasurer, etc.)
- Committees assigned
- Meeting links for interviews
- Active/inactive status
- Authentication: NextAuth.js with multiple providers
- Role-Based Access: Admin, Super Admin, and User roles
- CSRF Protection: Built-in Next.js security
- Environment Variables: Secure configuration management
- Input Validation: Zod schema validation
- Race Condition Prevention: Atomic database operations
CSSApply uses Brevo (formerly Sendinblue) for email communications:
- Welcome Emails: New user registration
- Application Confirmations: Successful submissions
- Interview Notifications: Schedule confirmations
- Admin Alerts: System notifications
- Test Emails: Super Admins can send test emails to verify templates
- Responsive HTML templates
- Brand-consistent styling with blue theme colors
- Clean design with logo instead of text
- Multi-language support ready
- User: User accounts and profiles
- EAApplication: Executive Assistant applications
- CommitteeApplication: Committee Staff applications
- EBProfile: Executive Board member profiles
- AvailableEBInterviewTime: Interview slot management
- Prisma ORM: Type-safe database operations
- Migrations: Version-controlled schema changes
- Relationships: Proper foreign key constraints
- Indexing: Optimized query performance
CSSApply uses several techniques to ensure fast performance:
- Client-side data caching with SWR (Stale-While-Revalidate)
- EB profiles and schedule data are cached for 5 minutes
- Eliminates loading spinners on return visits
- Automatic revalidation disabled to reduce server load
- All admin and user pages show loading spinners during data fetches
- Prevents "flash" of empty content when loading
- Consistent UX across all pages
- Prisma queries optimized with proper
selectstatements - Pagination implemented for large datasets
- Indexes on frequently queried columns
- Connect your GitHub repository to Vercel
- Configure environment variables
- Deploy automatically on push to main branch
- Build the application:
npm run build - Start the production server:
npm run start - Configure reverse proxy (nginx/Apache)
- Set up SSL certificates
NEXTAUTH_URL="https://your-domain.com"
DATABASE_URL="your-production-database-url"
NEXTAUTH_SECRET="your-production-secret"We welcome contributions to CSSApply! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- TypeScript: Strict type checking enabled
- ESLint: Follow the configured rules
- Prettier: Consistent code formatting
- Conventional Commits: Standardized commit messages
- Email: css.cics@ust.edu.ph
- Facebook: CSS Facebook Page
Passionately designed & developed by CSS 👩💻👩💻
