Skip to content
BranchesTags

Repository files navigation

TEC Talent Pool Management System

A comprehensive Talent Pool Management System for TEC's in-house graduates, built with HTML, CSS, JavaScript, and Cloudflare Workers/Pages.

🚀 Cloud-Only Architecture

This project is fully cloud-based with no local database dependencies:

  • ✅ All data stored on Cloudflare D1 Database (remote servers)
  • ✅ All images stored on Cloudflare R2 (object storage)
  • ✅ All compute on Cloudflare Workers/Pages
  • ✅ GitHub integration for automatic deployments
  • ✅ CI/CD via Cloudflare Pages Git integration
  • ✅ Automatic preview deployments for pull requests
  • ✅ Bindings managed via wrangler.toml (no manual configuration needed)

Development server connects directly to remote Cloudflare services - no local database files needed!

✨ Recent Updates

  • Enhanced Skills Section: Modern card-based design with icons and animations
  • Image Upload & Storage: Full R2 integration for profile pictures and certificates
  • Improved Notifications: Added last updated date display
  • Production Ready: Removed all demo/test data, fully production-focused
  • Better Error Handling: Comprehensive error logging and user-friendly error messages
  • Optimized Performance: Cloud-only architecture with no local dependencies

Features

  • Public Candidate Directory: Browse all graduate profiles with filtering and search
  • Enhanced Profile Pages: Modern design with detailed candidate information, enhanced skills section with card-based layout
  • Admin Dashboard: Secure login system for staff to manage candidates with full CRUD operations
  • Image Management: Upload and store candidate photos and certificates in Cloudflare R2
  • Notification System: Real-time announcements with filtering and last updated tracking
  • Dark/Light Mode: Theme toggle for better user experience
  • Responsive Design: Works seamlessly on all devices
  • GitHub Integration: Automatic deployments on every push

Project Structure

Talent-Pool/
├── index.html              # Main landing page
├── candidate.html          # Individual candidate profile page
├── admin.html             # Admin login and dashboard
├── notifications.html     # Notifications page
├── styles.css             # Main stylesheet
├── candidate.css          # Candidate page styles
├── admin.css             # Admin page styles
├── app.js                # Main application logic
├── candidate.js          # Candidate page logic
├── admin.js              # Admin dashboard logic
├── notifications.js      # Notifications logic
├── functions/
│   ├── api/
│   │   ├── candidates.js         # Candidates list/create endpoint
│   │   ├── candidates/[id].js    # Individual candidate CRUD
│   │   ├── admin/
│   │   │   ├── login.js          # Admin authentication
│   │   │   ├── verify.js         # Token verification
│   │   │   ├── change-password.js # Password management
│   │   │   └── admins.js         # Admin user management
│   │   ├── notifications.js      # Notifications list/clear
│   │   ├── notifications/[id].js # Individual notification
│   │   ├── upload.js             # Image upload to R2
│   │   └── images/[[path]].js    # Image serving from R2
│   └── utils/
│       ├── auth.js               # Authentication utilities
│       └── password.js           # Password hashing/validation
├── wrangler.toml         # Cloudflare configuration
└── package.json          # Node.js dependencies

Setup Instructions

1. Install Dependencies

npm install

2. Configure Cloudflare Services

Important: Bindings are automatically configured from wrangler.toml - no manual setup needed in Cloudflare Dashboard!

Quick setup:

# Authenticate with Cloudflare
npx wrangler login

# Verify authentication
npx wrangler whoami

# Migrate database schema to remote D1 database
npm run migrate

# Create admin account in remote database
npm run add-admin admin YourSecurePassword123!

# Verify setup
npm run verify

Note: The D1 database and R2 bucket must already exist. If not, create them:

# Create D1 database
npx wrangler d1 create tec-talent-pool-db

# Create R2 bucket
npx wrangler r2 bucket create tec-talent-pool-images

3. Connect to GitHub (Recommended)

  1. Push your code to GitHub

    git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

  2. Connect GitHub to Cloudflare Pages

    • Go to Cloudflare Dashboard
    • Navigate to Workers & Pages → Create Application → Pages
    • Click Connect to Git → Select GitHub
    • Choose your repository: Asaascom-Web/Talent-Pool
    • Configure build settings:
      • Build command: (leave empty)
      • Build output directory: .
    • Bindings are automatically configured from wrangler.toml - no manual setup needed!
      • If you see "Bindings managed through wrangler.toml" - that's correct ✅

  3. Automatic Deployments

    • Every push to main branch automatically deploys
    • Preview deployments for pull requests

4. Set Up Admin Accounts

Admin accounts are stored in Cloudflare D1 database. Create them using:

npm run add-admin username password

⚠️ IMPORTANT: Use strong passwords (8+ chars, uppercase, lowercase, numbers, special characters)!

5. Deploy to Cloudflare Pages

Option A: Automatic via GitHub (Recommended)

  • Push to GitHub, Cloudflare automatically deploys

Option B: Manual via CLI

npm run deploy

API Endpoints

Public Endpoints

  • GET /api/candidates - Get all candidates
  • GET /api/candidates/:id - Get a specific candidate
  • GET /api/notifications - Get all notifications
  • GET /api/images/* - Serve images from R2 storage

Protected Endpoints (Require Admin Token)

Candidate Management:

  • POST /api/candidates - Create a new candidate
  • PUT /api/candidates/:id - Update a candidate
  • DELETE /api/candidates/:id - Delete a candidate

Image Management:

  • POST /api/upload - Upload image to R2 (profile pictures, certificates)

Admin Management:

  • POST /api/admin/login - Admin login
  • GET /api/admin/verify - Verify admin token
  • POST /api/admin/change-password - Change admin password
  • GET /api/admin/admins - List all admins
  • POST /api/admin/admins - Create new admin
  • PUT /api/admin/admins/:id - Update admin
  • DELETE /api/admin/admins/:id - Delete admin

Notification Management:

  • DELETE /api/notifications - Clear all notifications
  • DELETE /api/notifications/:id - Delete single notification

Candidate Data Structure

{
  "id": "unique-id",
  "name": "Full Name",
  "category": "Computer Science Engineering",
  "status": "Ready to Work",
  "profilePicture": "/api/images/profile/timestamp-random.jpg",
  "summary": "Personal summary",
  "email": "candidate@example.com",
  "phone": "+60 12-345 6789",
  "linkedin": "https://linkedin.com/in/username",
  "portfolio": "https://portfolio.example.com",
  "city": "Kuala Lumpur",
  "stateCountry": "Selangor, Malaysia",
  "languages": ["English", "Malay"],
  "dateOfBirth": "1998-05-15",
  "expectedSalary": "RM 4,500 - RM 6,000",
  "availabilityDate": "2025-02-01",
  "employmentStatus": "Unemployed - Seeking Full-time Position",
  "skills": ["JavaScript", "Python", "React"],
  "education": [
    {
      "institution": "University Name",
      "degree": "Bachelor's Degree",
      "field": "Computer Science",
      "period": "2020-2024",
      "description": "Additional details"
    }
  ],
  "experience": [
    {
      "company": "Company Name",
      "position": "Position Title",
      "period": "2023-2024",
      "description": "Job description"
    }
  ],
  "projects": [
    {
      "name": "Project Name",
      "period": "2024",
      "description": "Project description",
      "technologies": "React, Node.js"
    }
  ],
  "certifications": [
    {
      "name": "Certification Name",
      "issuer": "Issuing Organization",
      "date": "2024",
      "description": "Details",
      "image": "/api/images/certificate/timestamp-random.jpg"
    }
  ],
  "awards": [
    {
      "title": "Award Title",
      "organization": "Organization Name",
      "date": "2024",
      "description": "Award description"
    }
  ],
  "createdAt": "2024-01-01T00:00:00.000Z",
  "updatedAt": "2024-01-01T00:00:00.000Z"
}

Note: Image URLs are served via /api/images/ endpoint from Cloudflare R2 storage.

Categories

  • Telecommunication Engineering
  • Computer Science Engineering
  • Mechanical Engineering
  • Electronic Engineering
  • Electrical Engineering

Status Options

  • Ready to Work
  • Employed
  • New

Development

Development Server (Connects to Remote Database)

# Start development server (connects to remote Cloudflare D1 database)
npm run dev

# Clean restart (if issues)
npm run dev:clean

Note: The development server connects directly to the remote Cloudflare database. All data operations use cloud services. You need an internet connection.

Available Scripts

npm run dev            # Start development server (connects to remote database)
npm run dev:clean      # Clean restart development server
npm run deploy         # Deploy to Cloudflare Pages
npm run setup          # Automated Cloudflare services setup
npm run verify         # Verify all services configuration
npm run migrate        # Migrate D1 database schema to remote database
npm run add-admin      # Create admin account in remote database
npm run restart        # Restart development server (cleans cache)

Preview Deployments:

bash scripts/create-preview.sh  # Create preview deployment branch

Documentation

Quick Start:

Setup & Configuration:

Security & Best Practices:

Security Features

✅ Implemented:

  • Secure password hashing (PBKDF2 with SHA-256)
  • Password strength validation
  • Token-based authentication
  • SQL injection prevention
  • Input validation on all endpoints

📋 Security Best Practices:

  • Use strong passwords (enforced by system)
  • Change default admin credentials
  • Regularly update dependencies
  • Monitor Cloudflare Dashboard logs
  • Consider adding rate limiting for production

See BACKEND_SECURITY.md for detailed security documentation.

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Technology Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Backend: Cloudflare Pages Functions (Workers)
  • Database: Cloudflare D1 (SQLite-based)
  • Storage: Cloudflare R2 (Object Storage)
  • Deployment: Cloudflare Pages with GitHub integration
  • Authentication: Token-based with PBKDF2 password hashing

Current Status

✅ Production Ready

  • All services configured and deployed
  • Database schema migrated
  • Image upload and serving working
  • Admin authentication functional
  • GitHub integration active
  • Automatic deployments enabled

Troubleshooting

Common Issues

Images not loading:

  • Verify R2 bucket binding is configured in wrangler.toml
  • Check image URLs use /api/images/ prefix
  • Verify images were uploaded successfully

Database errors:

  • Ensure D1 database binding is configured
  • Check database schema is migrated: npm run migrate
  • Verify database exists: npx wrangler d1 list

Deployment issues:

  • Check Cloudflare Dashboard → Deployments for error logs
  • Verify wrangler.toml is committed to repository
  • Ensure bindings are configured (managed via wrangler.toml)

API errors:

  • Check browser console for detailed error messages
  • Review Cloudflare Dashboard logs
  • Verify authentication tokens are valid

Support & Contributing

For issues or questions:

  1. Check Cloudflare Dashboard logs
  2. Review documentation files
  3. Verify all bindings are configured correctly
  4. Test with npm run verify script

License

MIT License - TEC 2025

About

This system functions as a dedicated Job Portal, specifically designed for TEC’s in-house graduates. It allows candidates to upload their CVs and provides an efficient way for us to connect with us for potential hiring opportunities

talent-pool.pages.dev/

Topics

job-portaltechnology

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages