🚀 HireForge - Modern Job Board Platform

Connecting talent with opportunity through a seamless, modern job board experience

🌐 Live Demo | 📱 Mobile Demo

📸 Screenshots

✨ Features

🎯 Core Functionality

Job Listings: Browse and search through comprehensive job postings
Company Profiles: Detailed company information and job opportunities
Application System: Seamless job application process with real-time tracking
User Authentication: Secure authentication powered by Clerk
Responsive Design: Optimized for all devices and screen sizes

🎨 User Experience

Modern UI/UX: Clean, intuitive interface with beautiful animations
Loading Screens: Professional loading experience with branded animations
Real-time Updates: Instant feedback and live data synchronization
Search & Filter: Advanced job search with multiple filtering options
Mobile-First: Optimized mobile experience with touch-friendly interactions

🔧 Technical Excellence

Serverless Architecture: Built on Supabase for scalability and performance
Type Safety: Full TypeScript implementation for robust development
Modern Stack: Next.js 15 with App Router and Turbopack
Performance Optimized: Fast loading times and smooth interactions
SEO Ready: Optimized for search engines and social sharing

⚡ Performance Optimizations

Image Optimization: WebP/AVIF formats with automatic compression
Bundle Splitting: Intelligent code splitting for faster loads
Lazy Loading: Dynamic imports for heavy components
Preconnect Hints: Early connections to third-party domains
CSS Optimization: Performance-focused styling with containment
Core Web Vitals: Optimized for 90+ Lighthouse scores

🏆 Project Highlights

What Makes This Special

Full-Stack Development: Complete application from database to UI
Modern Architecture: Serverless, scalable, and maintainable
Production Ready: Deployed and optimized for real-world use
Performance Focused: 90+ Lighthouse scores across all metrics
Developer Experience: Clean code, proper documentation, and best practices

Technical Challenges Overcome

Database Migration: Successfully migrated from Fastify to Supabase
Authentication Integration: Seamless Clerk integration with protected routes
Real-time Features: Implemented live updates without page refreshes
Performance Optimization: Achieved sub-2s loading times with 98.7% image size reduction
Mobile Responsiveness: Perfect experience across all devices
Bundle Optimization: Reduced JavaScript execution time by 30%

🛠️ Tech Stack

Frontend

Next.js 15.3.3 - React framework with App Router and Turbopack
TypeScript 5.0 - Type-safe development with strict configuration
Tailwind CSS 3.0 - Utility-first CSS framework with performance optimizations
Google Fonts - Inter, Poppins, JetBrains Mono with optimized loading
Radix UI - Accessible component primitives with tree-shaking

Backend & Database

Supabase - Serverless backend and PostgreSQL database
Prisma - Type-safe database client with migrations
Real-time Subscriptions - Live data updates with WebSocket connections

Authentication & Security

Clerk - Modern authentication and user management
JWT Tokens - Secure session management
Protected Routes - Role-based access control
Security Headers - XSS protection, content type options, frame options

Deployment & Infrastructure

Vercel - Serverless deployment platform with Edge Network
Environment Variables - Secure configuration management
CDN - Global content delivery network with caching
Compression - Gzip/Brotli compression for faster loads

Performance & Monitoring

Lighthouse CI - Automated performance testing
Core Web Vitals - FCP < 1.5s, LCP < 2.5s, TBT < 200ms
Bundle Analysis - Webpack bundle splitting and optimization
Image Optimization - WebP/AVIF with responsive sizing

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn
Supabase account
Clerk account

Installation

Clone the repository

git clone https://github.com/Hsinha11/HireForge.git
cd hireforge

Install dependencies
```
npm install
```

Environment Setup

cp .env.example .env.local

Configure your environment variables:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

Database Setup

# Run database migrations
npx prisma db push

# Seed the database
npm run seed

Start Development Server
```
npm run dev
```
Open your browser
```
http://localhost:3000
```

📁 Project Structure

hireforge/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Authentication pages
│   │   ├── dashboard/         # User dashboard
│   │   ├── jobs/             # Job listings and details
│   │   ├── companies/        # Company profiles
│   │   └── applications/     # Job applications
│   ├── components/           # Reusable UI components
│   │   ├── ui/              # Base UI components
│   │   ├── job/             # Job-related components
│   │   ├── company/         # Company-related components
│   │   └── RoleButtons.tsx  # Lazy-loaded component
│   ├── lib/                 # Utility functions and configs
│   └── middleware.ts        # Next.js middleware
├── public/                  # Static assets (optimized images)
├── prisma/                 # Database schema and migrations
└── scripts/                # Database seeding and utilities

🎯 Key Features Deep Dive

Job Management System

Advanced Search: Filter by location, salary, experience level, and more
Real-time Updates: Live job posting updates without page refresh
Application Tracking: Monitor application status and responses
Company Integration: Seamless connection between jobs and companies

User Experience

Progressive Loading: Smooth loading states and skeleton screens
Responsive Design: Optimized for desktop, tablet, and mobile
Accessibility: WCAG compliant with keyboard navigation support
Performance: Optimized images, lazy loading, and code splitting

Developer Experience

Type Safety: Full TypeScript coverage with strict configuration
Code Quality: ESLint and Prettier for consistent code style
Testing Ready: Jest and React Testing Library setup
Documentation: Comprehensive inline documentation and comments

Performance Optimizations

Image Compression: 98.7% size reduction (1MB → 13KB WebP)
Bundle Splitting: Separate chunks for Clerk, Supabase, and vendors
Lazy Loading: Dynamic imports for non-critical components
Preconnect Hints: Early DNS resolution for third-party domains
CSS Containment: Layout and paint containment for better rendering
Security Headers: XSS protection, content type options, caching

🔧 Configuration

Environment Variables

# Database
DATABASE_URL="postgresql://..."

# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_..."
CLERK_SECRET_KEY="sk_..."

# Supabase
NEXT_PUBLIC_SUPABASE_URL="https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ..."

# Deployment
NEXT_PUBLIC_APP_URL="https://your-domain.com"

Database Schema

The application uses a well-structured database schema with:

Users: Authentication and profile management
Companies: Company information and branding
Jobs: Job postings with detailed requirements
Applications: Job application tracking system

Performance Configuration

// next.config.ts
const nextConfig = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@radix-ui/*'],
    turbo: { rules: { '*.svg': { loaders: ['@svgr/webpack'] } } }
  },
  images: { formats: ['image/webp', 'image/avif'] },
  compress: true,
  swcMinify: true,
  webpack: (config) => {
    // Bundle splitting for Clerk and Supabase
    config.optimization.splitChunks = { /* ... */ }
  }
}

🚀 Deployment

Vercel Deployment

Connect your GitHub repository to Vercel
Configure environment variables in Vercel dashboard
Deploy with automatic CI/CD pipeline

Production Checklist

📊 Performance Metrics

Lighthouse Score: 90+ across all categories
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1
First Input Delay: < 100ms
Total Blocking Time: < 200ms
Image Optimization: 98.7% size reduction
Bundle Size: 30% reduction through splitting

Performance Optimizations Implemented

✅ Image Optimization: WebP/AVIF with automatic compression
✅ Bundle Splitting: Intelligent code splitting for faster loads
✅ Lazy Loading: Dynamic imports for heavy components
✅ Preconnect Hints: Early connections to third-party domains
✅ CSS Optimization: Performance-focused styling
✅ Security Headers: XSS protection and caching policies
✅ Font Optimization: Reduced font weights and display swap
✅ Code Splitting: Separate chunks for major dependencies

🔮 Future Roadmap

Phase 1 - Enhanced Features

Advanced job search with AI recommendations
Resume parsing and matching
Email notifications and alerts
Company analytics dashboard

Phase 2 - Scale & Performance

CDN optimization for global users
Advanced caching strategies
Real-time collaboration features
Mobile app development

Phase 3 - Enterprise Features

Multi-tenant architecture
Advanced reporting and analytics
API for third-party integrations
White-label solutions

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Workflow

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 - see the LICENSE file for details.

🙏 Acknowledgments

Next.js Team - For the amazing React framework
Supabase - For the powerful backend-as-a-service
Clerk - For modern authentication solutions
Tailwind CSS - For the utility-first CSS framework
Vercel - For seamless deployment and hosting

📞 Contact & Support

Website: HireForge
Email: harianantsinha2003@gmail.com
LinkedIn: Harianant Sinha

Built with ❤️ by the HireForge Team

Star this repository if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
backend		backend
public		public
scripts		scripts
src		src
.gitignore		.gitignore
.vercelignore		.vercelignore
ADMIN_FEATURE_README.md		ADMIN_FEATURE_README.md
AUTHENTICATION_GUIDE.md		AUTHENTICATION_GUIDE.md
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Hsinha11/HireForge

Folders and files

Latest commit

History

Repository files navigation