the-ats

byPrem Patel

Build a production-ready full-stack AI Resume Analyzer web application. OBJECTIVE Create a complete application where users can create an account, log in, upload a PDF resume, paste a job description, and receive an AI-powered analysis comparing their resume against the job description. The application should be implemented as a real working product, not a visual prototype. Do not use hardcoded fake analysis results. CORE USER FLOW 1. User creates an account or logs in. 2. User uploads a PDF resume. 3. The application securely extracts text from the PDF. 4. User pastes a job description. 5. User starts the analysis. 6. The backend sends the relevant resume and job-description content to an LLM. 7. The application displays a structured analysis. 8. The analysis is saved to the user's account. 9. User can view previous analyses from a dashboard. 10. User can open or delete previous analyses. AI ANALYSIS The analysis must include: - Overall resume-to-job match score from 0–100 - Matching skills - Missing skills - Relevant experience - Potential weaknesses - Recommended resume improvements - Recommended skills to learn - Strengths of the candidate - Concise explanation of why the candidate matches or does not match the job - Clear evidence from the resume supporting important conclusions Do not generate fake/static analysis data. The LLM integration must use an environment variable for the API key. Never expose API keys in frontend code. TECHNICAL REQUIREMENTS Frontend: - React - TypeScript - Tailwind CSS - Responsive design - Reusable components - Clean component architecture Backend: - Backend API - Proper separation between frontend and backend responsibilities - Input validation - Error handling - Secure API key handling - Proper HTTP status codes Database: - PostgreSQL - Store users - Store uploaded resume metadata - Store extracted resume information where appropriate - Store job descriptions - Store analysis results - Maintain proper relationships between users and their analyses - Use appropriate indexes and constraints Authentication: - User registration - Login - Logout - Secure authentication - Protected dashboard and analysis routes - Users must only be able to access their own data PDF PROCESSING: - Accept PDF resume uploads - Validate file type - Validate reasonable file size - Extract actual text from the PDF - Handle invalid or unreadable PDFs gracefully - Do not simply pretend that extraction occurred AI INTEGRATION: - Use a real LLM integration - API key must come from environment variables - Do not hardcode API keys - Structure the AI response in a predictable format - Validate the AI response before displaying/storing it - Handle API failures, malformed responses, rate limits, and timeouts gracefully DASHBOARD Create a professional dashboard where users can: - See their previous resume analyses - See resume/job title information - See match scores - Open a previous analysis - Delete a previous analysis - Start a new analysis UI/UX Create a modern, professional and polished interface suitable for a real SaaS product. Include: - Landing/login experience - Authentication pages - Dashboard - Resume upload interface - Job description input - Analysis loading state - Analysis results page - Previous analysis history - Empty states - Error states - Success states - Confirmation states where appropriate - Mobile responsive layouts - Accessible forms and controls - Clear visual hierarchy The UI should not just look good. All important interactions must actually work. ANALYSIS RESULTS UI Present the analysis in a clear dashboard-style format. Include: - Match score visualization - Skills matched - Skills missing - Experience analysis - Strengths - Weaknesses - Resume improvement recommendations - Learning recommendations - Explanation/evidence Avoid overwhelming the user with one large block of text. SECURITY Implement reasonable production security practices: - Never expose API keys to the client - Validate uploaded files - Validate user input - Protect authenticated routes - Prevent users from accessing another user's analyses - Avoid trusting client-provided user IDs - Handle database errors safely - Do not expose sensitive server information in error messages - Use environment variables for secrets - Apply appropriate authorization checks to every protected resource TESTING Create meaningful tests for important functionality. At minimum test: - Authentication - Protected routes - PDF upload validation - PDF text extraction - Database operations - Analysis creation - Authorization / user isolation - AI response handling - Important API endpoints - Important frontend functionality Run the tests after implementation. If tests fail, investigate and fix the underlying issues rather than simply removing or disabling the tests. PROJECT QUALITY Use: - Clean architecture - Reusable components - Meaningful variable and function names - Type safety - Proper error handling - Separation of concerns - Maintainable code - Minimal unnecessary dependencies Do not generate unnecessary files or complexity. README Create a comprehensive README containing: - Project overview - Features - Architecture - Technology stack - Prerequisites - Installation - Environment variables - Database setup - How to run frontend - How to run backend - How to run tests - How to use the application - Deployment instructions - Troubleshooting Create a `.env.example` file showing all required environment variables without exposing real secrets. IMPLEMENTATION PROCESS Before implementation: 1. Analyze the requirements. 2. Create a clear technical architecture. 3. Identify the required frontend, backend, database and AI components. 4. Create an implementation plan. 5. Identify potential technical risks. Then implement the complete application. After implementation: 1. Install dependencies. 2. Run the application. 3. Run tests. 4. Test the important user flows. 5. Fix errors discovered during testing. 6. Verify authentication. 7. Verify PDF upload and text extraction. 8. Verify database persistence. 9. Verify AI analysis. 10. Verify previous-analysis retrieval. 11. Verify deletion. 12. Verify authorization/user isolation. 13. Verify responsive UI. 14. Verify that the application can be started using the documented instructions. Do not stop after generating code. Continue until the application has been tested and verified as far as the available environment allows. IMPORTANT: If an external API, credential, deployment service, or other resource is unavailable, do not fake the result. Clearly document what could not be verified. DO NOT USE FAKE IMPLEMENTATIONS Do not: - Use hardcoded analysis results - Create fake API responses and claim they are real - Create fake database persistence - Pretend tests passed when they were not run - Pretend deployment succeeded when it was not performed - Claim a feature is complete when it is only a placeholder - Hide errors instead of fixing them If something cannot be implemented because of an unavailable external dependency, clearly mark it as incomplete and explain what is required to finish it. FINAL REPORT REQUIREMENT After completing the implementation and testing, create a file named: FINAL_REPORT.md Place it in the project root. This file is extremely important because it will be used to independently compare this implementation against the same application generated by other AI development platforms. The FINAL_REPORT.md must contain: 1. Project Overview 2. Executive Summary 3. Features Implemented 4. Features Partially Implemented 5. Features Not Implemented 6. Technology Stack 7. System Architecture 8. Complete Project Structure 9. Database Schema 10. API Endpoints 11. Authentication Architecture 12. AI/LLM Integration 13. PDF Upload and Text Extraction Implementation 14. Security Measures 15. Testing Strategy 16. Tests Actually Run 17. Test Results 18. End-to-End Verification Results 19. Errors Encountered 20. Errors Fixed 21. Known Limitations 22. External Dependencies 23. Environment Variables 24. Setup Instructions 25. Run Instructions 26. Deployment Instructions 27. Performance Considerations 28. Future Improvements 29. Overall Completion Assessment For every major feature, clearly classify its status as one of: - IMPLEMENTED - PARTIALLY IMPLEMENTED - MOCKED - NOT IMPLEMENTED - NOT VERIFIED Accuracy is critical. Do not claim that a feature works unless you actually implemented and verified it. For testing, report only tests that were actually executed. For deployment, report only deployment that was actually performed and verified. If something was impossible to verify because credentials, external services, or infrastructure were unavailable, explicitly state: "NOT VERIFIED — [reason]" Do not hide limitations. The FINAL_REPORT.md should provide enough technical detail for another developer to understand exactly what was built, what was tested, what worked, what failed, and what remains incomplete. FINAL DELIVERABLES Before finishing, ensure the project contains: - Complete source code - Working frontend - Working backend - Database implementation - AI/LLM integration - Authentication - PDF processing - Tests - README.md - .env.example - FINAL_REPORT.md Finally, provide a concise summary of: - What was built - What was successfully verified - What remains incomplete - Where the FINAL_REPORT.md file is located Prioritize correctness, functionality, maintainability, security, and honest verification over speed or visual polish.

LandingDashboardAnalysis results pageNew AnalysisLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 7

System Requirements Document for the-ats

1. Introduction

The AI Resume Analyzer is a production-ready full-stack web application designed to help users analyze their resumes against job descriptions using AI technology. The application targets professionals seeking to enhance their career prospects by providing detailed, AI-powered insights into how well their resumes match specific job descriptions. Users can create accounts, upload resumes, input job descriptions, and receive comprehensive analyses, all within a secure and user-friendly interface.

2. System Overview

The AI Resume Analyzer is a SaaS application that offers a seamless experience for users to evaluate their resumes against job descriptions. It features user authentication, PDF resume processing, AI-driven analysis, and a comprehensive dashboard for managing analyses. The application is built using React, TypeScript, and Tailwind CSS on the frontend, with a backend API and PostgreSQL database. It ensures secure handling of user data and integrates with a real LLM for analysis.

2a. Product Interpretation and Delivery Boundary

The application is delivered as a complete, production-ready product with a focus on real AI integration and secure user data handling. It includes user registration, login, and a protected dashboard for managing analyses. The application does not use fake data or placeholders, ensuring all features are implemented and verified. The system adheres to strict security practices, including environment-managed secrets and user data isolation.

Page 2 of 7

2b. Source Content Inventory

Not applicable as no explicit content_source directive was provided.

2c. Page Content and Component Coverage

Landing

  • Information: Overview of the AI Resume Analyzer, its purpose, and benefits.
  • Primary Actions: Navigate to login or registration.
  • Components: Interactive elements explaining core features.
  • States: Loading, error, and success states for page content.

Login

  • Information: User authentication interface.
  • Primary Actions: Login, register, password recovery.
  • Components: Form fields for email and password, submit button.
  • States: Loading, error, and success states for authentication.

Dashboard

  • Information: Overview of user's previous analyses.
  • Primary Actions: View analysis details, delete analysis, start new analysis.
  • Components: List of analyses with match scores, job titles, and actions.
  • States: Loading, empty, error, and success states for data retrieval.
Page 3 of 7

New Analysis

  • Information: Interface for uploading resumes and entering job descriptions.
  • Primary Actions: Upload resume, paste job description, start analysis.
  • Components: File upload, text input, submit button.
  • States: Loading, error, and success states for file processing and analysis initiation.

Analysis Results Page

  • Information: Detailed analysis results including match score and recommendations.
  • Primary Actions: Review analysis, return to dashboard.
  • Components: Visualizations of match score, skills matched/missing, recommendations.
  • States: Loading, error, and success states for analysis display.

3. Functional Requirements

  • As a Resume analyst user, I should be able to create an account and log in to access the application. (explicit)
  • As a Resume analyst user, I should be able to upload a PDF resume and have it securely processed for text extraction. (explicit)
  • As a Resume analyst user, I should be able to paste a job description and initiate an AI-powered analysis. (explicit)
  • As a Resume analyst user, I should receive a structured analysis with a match score, skills, experience, and recommendations. (explicit)
  • As a Resume analyst user, I should be able to view, open, and delete previous analyses from a dashboard. (explicit)
  • As a Resume analyst user, I should have my data securely stored and isolated from other users. (explicit)
  • As a Resume analyst user, I should experience a responsive and accessible interface across devices. (explicit)

4. User Personas

  • Resume Analyst User: The primary user who creates an account, uploads resumes, inputs job descriptions, runs analyses, reviews results, and manages their analysis history.
Page 4 of 7

5. Core User Flows

  1. Account Creation and Login

    • User navigates to the Login page.
    • User selects "Register" and enters required information.
    • User submits the form and receives confirmation.
    • User logs in with credentials to access the Dashboard.
  2. Resume Upload and Job Description Entry

    • User navigates to the New Analysis page.
    • User uploads a PDF resume and pastes a job description.
    • System validates inputs and extracts text from the resume.
    • User initiates the analysis process.
  3. Analysis and Results Viewing

    • System sends data to the LLM for analysis.
    • User receives a structured analysis on the Analysis Results Page.
    • User reviews match score, skills, and recommendations.
  4. Dashboard Management

    • User accesses the Dashboard to view previous analyses.
    • User can open or delete analyses.
    • User can start a new analysis from the Dashboard.
Page 5 of 7

6. Visuals Colors and Theme

  • Muse: Yugo Nakamura
  • Palette:
    • Background: #FFFFFF
    • Surface: #F5F5F5
    • Text: #000000
    • Primary: #FF5722
    • Accent: #FFC107
    • Muted: #BDBDBD
  • Typography:
    • Headings: Inter Tight — Bold, uppercase
    • Body: Space Grotesk
    • Scale: 1.5 modular, 48/32/24/16
  • Shape Language: Playful modular shapes with interactive grids
  • Layout: Full-viewport interactive grids
  • Imagery: Generative and procedural graphics

7. Signature Design Concept

The Landing page features an interactive playground with cursor-reactive elements, using a bold primary accent to emphasize kinetic engagement. The design incorporates playful, interactive elements that guide user exploration, with a full-viewport grid arrangement for data visualization.

Page 6 of 7

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Expressive
  • Hero Dimensionality: Layered_2d
  • Landing Hero Motion Brief: The landing hero features a cursor-reactive grid that animates upon interaction, with kinetic typography responding to user input. The first frame presents a bold, engaging introduction to the application, with a reduced-motion state available for accessibility.

9. Non-Functional Requirements

  • The application must handle up to 10,000 concurrent users without performance degradation. (required_inference)
  • The system must ensure data consistency and integrity across all operations. (required_inference)
  • The application must be deployable on cloud infrastructure with automated scaling. (required_inference)

10. Tech Stack

  • Frontend: React, TypeScript, Tailwind CSS
  • Backend: Node.js, Express, PostgreSQL
  • AI Integration: LLM API with environment-managed API keys
  • PDF Processing: PDF.js or similar library for text extraction
  • Authentication: JWT-based secure authentication

11. Assumptions and Constraints

  • The application will be hosted on a cloud platform with support for containerized deployments.
  • All third-party integrations, including the LLM, will be available and reliable.
  • Users will have access to modern web browsers with JavaScript enabled.
Page 7 of 7

12. Glossary

  • LLM: Large Language Model, used for AI-powered resume analysis.
  • PDF: Portable Document Format, used for resume uploads.
  • JWT: JSON Web Token, used for secure user authentication.
  • SaaS: Software as a Service, the delivery model for the application.
Landing design preview
Landing: View overview
Login: Register account
Login: Log in
Dashboard: View analyses
New Analysis: 1. Upload resume
New Analysis: 2. Start analysis
Analysis results page: 3. Review results
Dashboard: 4. Manage analyses
Landing design preview
Landing: View overview
Login: Register account
Login: Log in
Dashboard: View analyses
New Analysis: 1. Upload resume
New Analysis: 2. Start analysis
Analysis results page: 3. Review results
Dashboard: 4. Manage analyses