๐ AI-Powered Resume Tailor & Job Compatibility Analyzer
This is a submission for the KendoReact Free Components Challenge.
๐ ๏ธ What I Built
I created an AI-powered Resume Tailor & Job Compatibility Analyzer that helps job seekers analyze their resumes against job descriptions to get tailored insights and compatibility scores. This tool leverages GenAI technology to assess key skills, experiences, and job relevance, providing actionable feedback.
๐น Key Features
โ
Upload a resume and paste a job description for instant analysis
โ
AI-generated feedback on resume alignment with job requirements
โ
Compatibility score to gauge match percentage
โ
User authentication with Google Sign-In
โ
Personalized AI integration: Users can input their own Gemini API key
๐ฅ Demo
๐ Live App: Resume-Analyzer
๐ป Code Repository: tanay-787/resume-analyzer-app
โก KendoReact Experience
I used KendoReact Free Components extensively to build an interactive and polished UI, ensuring a seamless user experience.
๐น KendoReact Free Components Used:
Layout Components: Card, CardHeader, CardBody, CardTitle, CardActions, PanelBar, PanelBarItem, AppBar, AppBarSection, AppBarSpacer, Dialog, DialogActionsBar
Forms & Inputs: Input, TextArea
Buttons & Navigation: Button
Indicators & Feedback: Loader, ProgressBar, Notification, NotificationGroup
Utility Components: SvgIcon (with various icons from @progress/kendo-svg-icons)
Popups & Overlays: Dialog, Popup, Menu, MenuItem
Navigation: AppBar
I customized KendoReact styles to maintain UI consistency and ensure a modern aesthetic, making the interface more intuitive and engaging.
๐ค Aim to Impress (GenAI Integration)
The app integrates Gemini 2.0 Flash (free tier API key) for AI-powered resume analysis.
๐น How it works:
1๏ธโฃ Users upload their resume and enter a job description
2๏ธโฃ The app sends structured data to Gemini AI via an API call
3๏ธโฃ AI analyzes job compatibility, highlighting key skill matches and gaps
4๏ธโฃ The structured response is displayed in a visually formatted report
Additionally, since Gemini API free tier has a 15-request/day limit, I implemented a system where users can input their own API key, ensuring continued access.
Top comments (5)
orender make time to load your app, or it s an infinite loop ?
I was deploying it as a Web Service!!! This was my first time deploying a Vite application with no backend framework like Express on a platform like Render, I had mistakenly deployed it as a web service. I've now deployed the app as a Static Site, the app is live now. You can test it out.
that s great i have just signed up,
We must provide our own API key ?
because it thriws this : API key not found. Please set up your API key.
Yes, that way the app remains free to use. If you click on that 'Setup You API Key' Btn it will take you to the setup screen. From there on it shows a guide and it is pretty straightforward. Once you enter your API Key, the key undergoes AES-GCM encryption before storing it in the DB so that way it remains safe.
That's great, hope you had fun @tanay_gupte_d6a3d6fe48267 ! I am the Product Manager behind KendoReact and I'd really appreciate if you can share your experience with our product in a quick chat. Ping me here or at antoniya.boynovska@progress.com