The Next.js frontend for HireLens AI, an AI-powered resume screening and candidate ranking platform.
Live Demo: https://hirelens-ai-sigma.vercel.app
Backend Repo: hirelens-backend
Live API: https://hirelens-backend-s2sg.onrender.com
HireLens AI helps recruiters screen and rank candidates intelligently. Upload multiple resumes, paste a job description, and get an AI-ranked list of candidates with match scores, missing skills, and explainable breakdowns — in seconds.
| Route | Description |
|---|---|
/ |
Landing page — hero, features, how it works |
/dashboard |
Main product — upload resumes, paste JD, view ranked results |
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| State | React hooks |
| API | FastAPI (see backend repo) |
| Deployment | Vercel |
# 1. Clone the repo
git clone https://github.com/Yusufcommit/hirelens-ai.git
cd hirelens-ai
# 2. Install dependencies
npm install
# 3. Set environment variable
echo "NEXT_PUBLIC_API_URL=http://localhost:8000" > .env.local
# 4. Start dev server
npm run devOpen http://localhost:3000
Make sure the backend is also running on port 8000.
hirelens-ai/
├── src/
│ └── app/
│ ├── page.tsx # Landing page
│ ├── dashboard/
│ │ └── page.tsx # Dashboard product page
│ └── components/
│ ├── Navbar.tsx
│ ├── Features.tsx
│ ├── HowItWorks.tsx
│ └── Footer.tsx
├── public/
├── tailwind.config.ts
└── next.config.ts
- Landing page with hero, features, how it works
- Dashboard with resume upload and job description input
- Candidate ranking results with score bars
- Missing skills display per candidate
- Production deployment on Vercel
- Loading animations and skeleton states
- Candidate detail modal
- Authentication (NextAuth)
- Screening history saved per user
- Mobile responsive polish
- Backend API: hirelens-backend
- Original prototype: ai-resume-screening-system
Yusuf Abdirashid — AI Full Stack Developer
Building polished AI-powered tools for hiring and job applications.
