
# Resume Builder

An interactive web application that allows users to build, customize, and download professional resumes. Built with a focus on user experience, security, and data persistence.

## Overview

The Resume Builder provides a comprehensive form-based interface for creating resumes with real-time preview functionality. Users can input personal information, work experience, education, skills, and projects, then preview and download their resume as a print-ready document.

## Key Features

### Interactive Form Builder

- **Personal Information**: Name, email, phone, location, and social links
- **Work Experience**: Multiple entries with dates, company, position, and descriptions
- **Education**: Institution, degree, field of study, graduation date, and GPA
- **Skills**: Dynamic list of technical and professional skills
- **Projects**: Project name, description, technologies, and links

### Real-Time Preview

- Live preview of the resume as you type
- Toggle between form and preview modes
- Print-optimized layout for professional output

### Data Persistence

- Automatic saving to browser LocalStorage
- Data persists across browser sessions
- No account required - all data stored locally

### Security Features

- **Input Sanitization**: All user inputs are sanitized to prevent XSS attacks
- **CSRF Protection**: CSRF tokens generated for form submissions
- **Rate Limiting**: Prevents abuse and ensures smooth performance
- **URL Validation**: Validates email addresses, URLs, and phone numbers
- **Content Security Policy**: Sanitized output for safe printing

### User Experience

- Responsive design for desktop and mobile
- Form validation with helpful error messages
- Clear data option with confirmation
- Smooth transitions and loading states

## Technical Implementation

### Architecture

- **Frontend**: React with TypeScript for type safety
- **Framework**: Next.js for server-side rendering and routing
- **Styling**: Tailwind CSS for responsive, utility-first design
- **State Management**: React hooks (useState, useEffect, useCallback)
- **Data Storage**: Browser LocalStorage API

### Security Measures

- Input sanitization using custom security utilities
- CSRF token generation and validation
- Rate limiting to prevent excessive requests
- URL and email validation
- Content sanitization for print output

### Components

- **ResumeForm**: Main form component with all input fields
- **ResumePreview**: Preview component showing formatted resume
- **Message**: Toast notifications for user feedback
- **Navigation**: Site navigation component

## Technologies Used

- **Next.js 16**: React framework with SSR and routing
- **TypeScript**: Type-safe JavaScript
- **React 19**: UI library with hooks
- **Tailwind CSS**: Utility-first CSS framework
- **LocalStorage API**: Client-side data persistence

## Use Cases

- Job seekers creating professional resumes
- Students building their first resume
- Professionals updating their career history
- Anyone needing a quick, customizable resume template

## Future Enhancements

Potential improvements could include:

- Multiple resume templates
- PDF export functionality
- Cloud storage integration
- Resume sharing via unique URLs
- ATS (Applicant Tracking System) optimization tips

---

**Live Demo**: [View Resume Builder](https://randydeleon.com/live-demo/resume)


An interactive web application for building and customizing professional resumes with real-time preview, data persistence, and print-ready output.