A simple React app to help you pick the best team from job candidates. It automatically finds diverse teams that work well together.
- Filter candidates: Search by job type, experience, location, skills, and scores
- Smart scoring: Candidates get scores based on what you're looking for
- Different views: See all candidates, your favorites, or your final team
Built to work great on any device - phone, tablet, or computer.
Compare how the app adapts across devices:
| Desktop / Normal View | Mobile / Dashboard View |
|---|---|
  Multi-column layout showing filters, candidates, and team overview with live scoring and notifications. |
  Single-column responsive layout with sticky filters, action buttons, and auto-select team feature fully functional on mobile. |
-
Desktop / Normal View:
- Multi-column layout allows simultaneous access to filters, candidate cards, and selected team.
- Detailed scoring, hover interactions, and diversity notifications.
- Optimized for large screens with full visibility of all elements.
-
Mobile / Dashboard View:
- Single-column layout to fit small screens.
- Sticky filters and action buttons remain accessible at all times.
- Auto-select team and candidate scoring fully functional.
- Designed for tap-friendly interactions and minimal scrolling.
-
Feature parity: Both views support the auto-select diverse team feature, live diversity scoring, and data export.
Mobile version that's easy to use
The app can build teams for you automatically:
- Follows your search filters (like "only senior developers")
- Picks people from different backgrounds and locations
- Shows you how diverse your team is
- Tells you when you get a great mix of people
- Live updates: See your diversity score change as you pick people
- Three main areas: Different job roles (40%), different locations (35%), different experience levels (25%)
- Notifications: Get alerts when your team gets more diverse
Download your team info including:
- Who you picked and their details
- How diverse your team is
- What filters you used
- Salary information
- When you made your choices
- Node.js (version 18 or newer)
- npm or yarn
# Download the code
git clone https://github.com/yourusername/Smart-hire.git
# Go to the folder
cd Smart-hire
# Install what you need
npm install
# Start the app
npm run devOpen your browser and go to http://localhost:3000
- Look at candidates: See everyone available with their scores
- Use filters: Narrow down who you see based on what you need
- Pick manually: Click on people to add them to your favorites or team
- Use auto-pick: Let the app build a diverse team for you
- Save your team: Download information about who you chose
The auto-pick feature respects your filters:
- No filters: Picks from everyone to get the most diverse team
- Experience filter (like "Entry Level"): Only picks beginners but makes sure they're from different places and job types
- Job filter (like "Backend"): Only picks backend developers but gets different experience levels and locations
- Multiple filters: Combines all your requirements while making the most diverse team possible
The app looks at three things to measure diversity:
- Job types: Frontend, Backend, Design, etc. (counts for 40%)
- Locations: Where people are from (counts for 35%)
- Experience: Junior, Mid-level, Senior (counts for 25%)
You get 100% diversity when you have:
- 5 different job types
- 5 different locations
- 4 different experience levels
Uses React Context to keep track of:
- Filtering and scoring candidates
- Your team picks and favorites
- Which view you're looking at
- Pop-up notifications
- Built mobile-first with Tailwind CSS
- Layout changes based on screen size
- Easy to tap and use on phones
- Text and buttons sized right for each device
- Smart calculations that don't slow things down
- Efficient searching and filtering
- Only updates what needs to change
- Stops calculating when it finds the best result
MIT License - see the LICENSE file for details.