SkillMatch

SkillMatch is a comprehensive web-based platform that connects OJT (On-the-Job Training) seekers with companies and employers. The platform enables students to create detailed profiles, showcase their skills, and apply for internship opportunities, while companies can post positions, manage applications, share updates, and conduct virtual interviews.

✅ Status: Core functionality complete | ✅ Mobile responsiveness complete | ✅ Contact Us feature added

🌟 Features

For Students (Applicants)

Authentication & Onboarding
- Google OAuth and email/password authentication
- Multi-step onboarding process with profile creation
- QCU student database integration for validation
Profile Management
- Comprehensive user profiles with personal information
- Skills showcase (technical and soft skills)
- Resume upload and management
- Profile visibility controls (public/private)
- OJT requirements tracking (hours, schedule, course)
Job Search & Applications
- Advanced job search with filters (location, skills, arrangement)
- Intelligent skill matching with highlighted requirements
- Course matching with visual indicators
- Saved jobs and companies
- Application tracking dashboard
- Real-time application status updates
Communication
- In-app notification system
- Application status notifications
- Interview scheduling notifications
- Offer notifications with response deadlines
Company Engagement
- Company profile viewing
- Company feed posts
- Post reactions (like, insightful, supportive, etc.)
- Save companies and posts
Contact & Support
- Public contact form with spam protection (honeypot)
- Auto-fill for authenticated users
- Subject categorization by user type (Guest, Applicant, Company)

For Companies (Employers)

Account Management
- Company registration with document verification
- Admin approval workflow
- Company profile with rich information (industry, location, social links)
- Cover images and branding
Job Posting
- Create and manage job postings
- Detailed job descriptions with requirements
- Skills and courses requirements specification
- Work arrangement options (On-site, Hybrid, Remote)
- Paid/unpaid internship designation
- Position availability tracking
Application Management
- Centralized applicant dashboard
- Application status tracking (Applied, Shortlisted, On Hold, Interview, Selected, etc.)
- Applicant profile viewing
- Resume downloads
- Application filtering and sorting
- Bulk status updates
Interview Scheduling
- Google Meet integration
- Automated meeting link generation
- Interview scheduling with date/time/type
- Interview notes and reminders
- Virtual and in-person interview types
Company Updates
- Create and publish company posts
- Rich text content with cover images
- Edit and delete posts
- View post engagement metrics
- Reaction tracking
Notifications
- Application received notifications
- Status change tracking
- Real-time updates

For Administrators

User Management
- Admin dashboard
- Company approval/rejection workflow
- Rejection reason documentation
- Account status management
Contact Messages Management
- View and manage contact form submissions
- Status tracking (Unread, Read, Replied, Resolved, Archived)
- Admin notes for internal communication
- Unread message count badge
- Filter by status and user type
System Oversight
- Job posting moderation
- User account monitoring
- System-wide notifications

🛠 Tech Stack

Frontend

Framework: Next.js 15.5 (App Router)
UI Library: React 19.1
Styling: Tailwind CSS with custom design system
Component Library: Radix UI (Shadcn/ui)
Animations: Framer Motion
State Management: Zustand
Data Fetching: TanStack React Query (v5)
Form Validation: Zod schemas
Icons: Lucide React
Notifications: Sonner
Date Handling: date-fns
Command Menu: cmdk
Theme: Next Themes (dark/light mode)

Backend

Runtime: Node.js
API: Next.js API Routes
Database: MySQL (Aiven Cloud)
Authentication: NextAuth.js
Password Hashing: bcrypt
HTTP Client: Axios
Google Integration: Google Meet API, Google Auth Library

Development Tools

Language: TypeScript
Linting: ESLint
Package Manager: npm
Version Control: Git

Deployment

Platform: Vercel
Database: Aiven MySQL (Cloud)
Environment: Production and development configurations

🚀 Getting Started

Prerequisites

Node.js 18+ installed
MySQL database (local or cloud)
Google OAuth credentials (for authentication)
Google Meet API credentials (for virtual interviews)

Installation

Clone the repository:

git clone https://github.com/mark-ianz/skillmatch.git
cd skillmatch

Install dependencies:
```
npm install
```

Set up environment variables:

Create a .env file in the root directory:

# Database
DB_HOST=your_database_host
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_NAME=skillmatch
DB_PORT=3306

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_OAUTH_CLIENT_WEB_CREDENTIALS=your_oauth_credentials_json

# Application
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Set up the database:

Import the database schema:

# Use the provided SQL file
mysql -u your_user -p skillmatch < docs/skillmatch_aiven.sql

Run the development server:
```
npm run dev
```
The app will be available at http://localhost:3000

Building for Production

npm run build
npm start

📁 Project Structure

SkillMatch/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Authentication routes
│   │   ├── (site)/            # Main application routes
│   │   ├── api/               # API routes
│   │   └── layout.tsx         # Root layout
│   ├── components/            # React components
│   │   ├── auth/              # Authentication components
│   │   ├── common/            # Shared components
│   │   ├── global/            # Global layout components
│   │   ├── page_specific/     # Page-specific components
│   │   └── ui/                # UI component library
│   ├── hooks/                 # Custom React hooks
│   ├── lib/                   # Utility libraries
│   ├── schema/                # Zod validation schemas
│   ├── services/              # API service functions
│   ├── store/                 # Zustand state stores
│   └── types/                 # TypeScript type definitions
├── public/                    # Static assets
├── docs/                      # Documentation and SQL files
└── package.json              # Dependencies and scripts

🎯 Key Functionalities

Intelligent Matching System

Skill Matching: Automatically matches applicant skills with job requirements
Course Matching: Highlights matching courses between applicants and job postings
Visual Indicators: Green badges show matched requirements, helping both parties identify good fits

Application Workflow

Applied (Status 8) - Initial application submission
Shortlisted (Status 13) - Company shows interest (no notification)
On Hold (Status 14) - Application pending review (no notification)
Interview Scheduled (Status 9) - Interview date/time set with Google Meet link
Selected (Status 10) - Applicant selected with offer deadline
Offer Accepted (Status 11) - Applicant accepts the offer
Offer Declined (Status 12) - Applicant declines the offer
Rejected (Status 3) - Application rejected with optional reason

Notification System

Filters notifications based on application status
Real-time updates for critical status changes
Email-like notification center with read/unread tracking
Application-specific notifications with deep links

Google Meet Integration

Automatic meeting link generation
OAuth-based authentication
Meeting code extraction
Interview scheduling with calendar integration

🔐 Security Features

Authentication: NextAuth with multiple providers
Password Security: bcrypt hashing
Session Management: Secure session tokens
Role-based Access Control: Admin, Company, Applicant roles
Status-based Authorization: Active, Pending, Rejected, Disabled statuses
Input Validation: Zod schemas for all forms
SQL Injection Prevention: Parameterized queries
File Upload Security: Controlled upload paths and validation
Spam Protection: Honeypot fields on public forms

📊 Database Schema

The application uses 20 interconnected tables:

User Management: user, account, admin, qcu_db
Profiles: applicant_profile, company, onboarding
Job System: job_posts, applications, status, role
Skills: skill, soft_skill
Social Features: company_posts, company_post_reactions, notifications
Saved Items: saved_companies, saved_jobs, saved_posts
Support: contact_messages

Full schema available in docs/skillmatch_aiven.sql

🚧 Future Improvements

High Priority

Password Reset: Allow users to reset forgotten passwords via email verification
Email Verification: Verify user emails on registration
Search & Filters: Advanced search on explore pages (keyword, salary, location)
Pagination: Proper pagination on listings and tables

Medium Priority

API Rate Limiting: Protect endpoints from abuse using Upstash Redis
Application Withdrawal: Let applicants withdraw pending applications
Saved Jobs Enhancements: Better organization and notifications
Profile Completeness Indicator: Progress bar for profile completion

Nice to Have

Dashboard Analytics: Application success rates, profile views
In-App Messaging: Two-way communication between applicants and companies
Job Alerts: Email notifications for matching jobs
Two-Factor Authentication (2FA): Optional enhanced security

📝 License

This project is part of an academic requirement for the subject Systems Integration and Architecture 1 at Quezon City University.

👥 Contributors

Mark Ian Bustillo - Lead Developer

📞 Support

For questions or issues, please contact:

Email: bustillomarkian23@gmail.com
GitHub: @mark-ianz

Last Updated: January 31, 2026

Name		Name	Last commit message	Last commit date
.github/chatmodes		.github/chatmodes
docs		docs
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
user.sql		user.sql

Navigation Menu

Repository files navigation

SkillMatch

🌟 Features

For Students (Applicants)

For Companies (Employers)

For Administrators

🛠 Tech Stack

Frontend

Backend

Development Tools

Deployment

🚀 Getting Started

Prerequisites

Installation

Building for Production

📁 Project Structure

🎯 Key Functionalities

Intelligent Matching System

Application Workflow

Notification System

Google Meet Integration

🔐 Security Features

📊 Database Schema

🚧 Future Improvements

High Priority

Medium Priority

Nice to Have

📝 License

👥 Contributors

📞 Support

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

SkillMatch

🌟 Features

For Students (Applicants)

For Companies (Employers)

For Administrators

🛠 Tech Stack

Frontend

Backend

Development Tools

Deployment

🚀 Getting Started

Prerequisites

Installation

Building for Production

📁 Project Structure

🎯 Key Functionalities

Intelligent Matching System

Application Workflow

Notification System

Google Meet Integration

🔐 Security Features

📊 Database Schema

🚧 Future Improvements

High Priority

Medium Priority

Nice to Have

📝 License

👥 Contributors

📞 Support

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages