Esencelab - Campus Recruitment Platform

A modern, AI-powered campus recruitment platform built with React, Supabase, and Gemini AI. Connect students with job opportunities through intelligent resume parsing and job matching.

Features

For Students

AI Resume Parsing: Upload resumes and let Gemini AI extract skills, education, and experience
Job Matching: Get personalized job recommendations based on your skills
Course Recommendations: Discover courses to bridge skill gaps
Application Tracking: Track your job applications in one place

For Recruiters

Job Posting: Post and manage job openings
Candidate Search: Browse and filter candidates by skills
Hiring Pipeline: Manage candidates through stages (new → screening → interview → hired)
Match Scores: View candidate-job compatibility scores

For Admins

Analytics Dashboard: View system statistics and trends
User Management: Monitor all users and activities
Activity Logs: Track all platform activities in real-time

Tech Stack

Category	Technology
Frontend	React 19, TypeScript, Vite
UI Components	Radix UI, Tailwind CSS, Framer Motion
State Management	Zustand, TanStack Query
Backend	Supabase (PostgreSQL, Auth, Realtime)
AI	Google Gemini API
Routing	React Router DOM
Forms	React Hook Form, Zod
Icons	Lucide React

Architecture

Frontend Architecture

┌─────────────────────────────────────────────────────────────┐
│                        App Layer                             │
│  ┌─────────────────────────────────────────────────────┐    │
│  │              React Router (Routes)                   │    │
│  │  / → Login    /dashboard → Role-based Dashboard     │    │
│  │  /jobs → Jobs  /profile → Student Profile           │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                    Component Layer                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  Layout    │  │   Pages     │  │    UI      │        │
│  │  - Header │  │  - Student  │  │  - Buttons │        │
│  │  - Sidebar │  │  - Recruiter│  │  - Cards   │        │
│  │  - Footer  │  │  - Admin    │  │  - Forms   │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                    Data Layer                               │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  Zustand   │  │   TanStack  │  │   Hooks     │        │
│  │  (UI State)│  │   Query     │  │  - useAuth  │        │
│  │             │  │  (Server)   │  │  - useJobs  │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                   Integration Layer                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  Supabase  │  │   Gemini    │  │   Storage  │        │
│  │  (Database)│  │   (AI)      │  │  (Resumes) │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
└─────────────────────────────────────────────────────────────┘

Database Schema

-- Core Tables
profiles       -- User profiles (extends auth.users)
jobs           -- Job postings
candidates     -- Candidate information
applications   -- Job applications
courses        -- Course recommendations
activity_logs  -- System activity tracking

Getting Started

Prerequisites

Before you begin, ensure you have:

Node.js 18+ installed
npm or yarn package manager
Git for version control
Supabase account (free tier works)
Google Gemini API key (free tier available)

Installation

Clone the repository

git clone https://github.com/sajadkoder/esencelab.git
cd esencelab

Install dependencies

npm install

Set up environment variables

# Create .env file
cp .env.example .env

# Edit .env with your credentials
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key
VITE_GEMINI_API_KEY=your_gemini_api_key

Start development server

npm run dev

The app will be available at http://localhost:5173

Supabase Setup

Step 1: Create a Supabase Project

Go to supabase.com
Click "New Project"
Fill in your project details:
- Name: esencelab
- Database Password: (remember this)
- Region: Choose closest to you

Step 2: Run the Setup SQL

In your Supabase dashboard, go to SQL Editor
Copy the contents of supabase-setup.sql
Click Run to execute

The SQL script will:

Create all necessary tables
Set up enum types
Enable real-time subscriptions
Configure Row Level Security (RLS) policies
Insert sample data (jobs, courses, candidates)
Create auto-profile creation trigger

Step 3: Get Your Credentials

Go to Settings → API
Copy the Project URL (for VITE_SUPABASE_URL)
Copy the anon public key (for VITE_SUPABASE_ANON_KEY)

Environment Variables

Create a .env file in the root directory:

# Supabase Configuration
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

# Gemini AI Configuration
VITE_GEMINI_API_KEY=your-gemini-api-key

Getting Gemini API Key

Go to Google AI Studio
Create a new API key
Copy it to your environment variables

Project Structure

esencelab/
├── src/
│   ├── components/
│   │   ├── layout/          # Layout components
│   │   │   ├── Header.tsx   # Main header
│   │   │   └── Sidebar.tsx  # Navigation sidebar
│   │   ├── ui/              # Reusable UI components
│   │   │   ├── Glass.tsx    # Glassmorphism components
│   │   │   ├── Button.tsx   # Button variants
│   │   │   ├── Card.tsx     # Card component
│   │   │   └── ...          # 50+ more UI components
│   │   └── AuthModal.tsx    # Authentication modal
│   │
│   ├── hooks/               # Custom React hooks
│   │   ├── useAuth.tsx     # Authentication hook
│   │   ├── useJobs.ts      # Job CRUD operations
│   │   ├── useCandidates.ts # Candidate management
│   │   ├── useCourses.ts   # Course data
│   │   ├── useApplications.ts # Applications
│   │   ├── useActivity.ts  # Activity logs
│   │   └── useRealtime.ts  # Real-time subscriptions
│   │
│   ├── lib/                 # Core libraries
│   │   ├── supabase.ts    # Supabase client
│   │   ├── queryClient.ts  # React Query setup
│   │   ├── gemini.ts       # Gemini AI integration
│   │   └── utils.ts       # Utility functions
│   │
│   ├── pages/               # Page components
│   │   ├── auth/
│   │   │   └── LoginPage.tsx
│   │   ├── StudentDashboard.tsx
│   │   ├── RecruiterDashboard.tsx
│   │   └── AdminDashboard.tsx
│   │
│   ├── store/              # State management
│   │   └── appStore.ts    # Zustand store
│   │
│   ├── types/              # TypeScript types
│   │   └── index.ts
│   │
│   ├── App.tsx            # Main app component
│   ├── main.tsx          # Entry point
│   └── index.css         # Global styles
│
├── public/                 # Static assets
├── supabase-setup.sql     # Database setup script
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

Deployment

Deploying to Vercel (Recommended)

Push to GitHub

git add .
git commit -m "Your commit message"
git push origin main

Import to Vercel
- Go to vercel.com
- Click "Add New..." → "Project"
- Import your GitHub repository
Configure Environment Variables In Vercel project settings, add:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY
- VITE_GEMINI_API_KEY
Deploy
- Click "Deploy"
- Wait for build to complete

Your app will be live at https://your-project.vercel.app

Alternative: Netlify

Connect your GitHub repository to Netlify
Set build command: npm run build
Set publish directory: dist
Add environment variables
Deploy

API Integration

Supabase Client

The Supabase client is configured in src/lib/supabase.ts:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Gemini AI Integration

Resume parsing is handled in src/lib/gemini.ts:

import { parseResumeWithGemini } from '@/lib/gemini'

// Usage
const parsed = await parseResumeWithGemini(resumeText)
// Returns: { skills, education, experience, summary }

Features Breakdown

Authentication Flow

User opens the app
If not authenticated → Redirect to Login
User signs up/signs in
Profile created in profiles table
User redirected to role-based dashboard

Job Matching Algorithm

Student uploads resume
Gemini AI extracts skills
Skills stored in candidate profile

Job matching uses skill overlap:

matchScore = (matchingSkills / totalRequiredSkills) * 100

Real-time Updates

Supabase Realtime enables:

Live candidate status changes
New job notifications
Activity feed updates

// Example: Listening to job changes
supabase
  .channel('jobs')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'jobs' }, 
    (payload) => console.log(payload)
  )
  .subscribe()

UI Components

The app uses a glassmorphism design system:

// Glass Card Component
<GlassCard className="p-6">
  <h2>Content</h2>
</GlassCard>

// Gradient Text
<p className="gradient-text">Hello World</p>

// Animated Stat Card
<StatCard 
  label="Total Users" 
  value={150} 
  icon={Users} 
  color="indigo" 
/>

Contributing

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

License

This project is licensed under the MIT License.

Support

If you encounter any issues:

Check the Issues page
Create a new issue with detailed description
Include error messages and steps to reproduce

Acknowledgments

Technology Credits

React - UI library
Supabase - Backend-as-a-Service
Google Gemini - AI capabilities
Radix UI - Accessible components
Tailwind CSS - Styling
Framer Motion - Animations
Lucide - Icons

Team Members

This project was built by an amazing team:

Sajad - Lead Developer
Harikrishnan K - Frontend & UX Developer
Adwaith PC - Documentation & Backend Support
Jishnu MR - Testing, Research & Analytics

Quick Reference

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run lint`	Run ESLint

Built with ❤️ by Esencelab Team

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
supabase-setup.sql		supabase-setup.sql
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

sajadkoder/esencelab

Folders and files

Latest commit

History

Repository files navigation