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)

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

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 ✅
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.

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:

DEPLOYMENT_GUIDE.md - Deploy from GitHub to Cloudflare Pages
BINDINGS_EXPLANATION.md - Understanding bindings (managed via wrangler.toml)

Setup & Configuration:

CLOUDFLARE_SETUP.md - Detailed Cloudflare services setup
GITHUB_INTEGRATION.md - GitHub integration and CI/CD guide
DATABASE_EXPLANATION.md - Cloud-only database architecture

Security & Best Practices:

BACKEND_SECURITY.md - Security documentation and 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:

Check Cloudflare Dashboard logs
Review documentation files
Verify all bindings are configured correctly
Test with npm run verify script

License

MIT License - TEC 2025

Navigation Menu

Repository files navigation

TEC Talent Pool Management System

🚀 Cloud-Only Architecture

✨ Recent Updates

Features

Project Structure

Setup Instructions

1. Install Dependencies

2. Configure Cloudflare Services

3. Connect to GitHub (Recommended)

4. Set Up Admin Accounts

5. Deploy to Cloudflare Pages

API Endpoints

Public Endpoints

Protected Endpoints (Require Admin Token)

Candidate Data Structure

Categories

Status Options

Development

Development Server (Connects to Remote Database)

Available Scripts

Documentation

Security Features

Browser Support

Technology Stack

Current Status

Troubleshooting

Common Issues

Support & Contributing

License

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.vscode		.vscode
components		components
css		css
functions		functions
images		images
js		js
migrations		migrations
scripts		scripts
.DS_Store		.DS_Store
.gitignore		.gitignore
README.md		README.md
_routes.json		_routes.json
admin.html		admin.html
candidate.html		candidate.html
index.html		index.html
notifications.html		notifications.html
package-lock.json		package-lock.json
package.json		package.json
wrangler.toml		wrangler.toml

Latest commit

History

Folders and files

Repository files navigation

TEC Talent Pool Management System

🚀 Cloud-Only Architecture

✨ Recent Updates

Features

Project Structure

Setup Instructions

1. Install Dependencies

2. Configure Cloudflare Services

3. Connect to GitHub (Recommended)

4. Set Up Admin Accounts

5. Deploy to Cloudflare Pages

API Endpoints

Public Endpoints

Protected Endpoints (Require Admin Token)

Candidate Data Structure

Categories

Status Options

Development

Development Server (Connects to Remote Database)

Available Scripts

Documentation

Security Features

Browser Support

Technology Stack

Current Status

Troubleshooting

Common Issues

Support & Contributing

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages