Resume Builder Application

A modern, web-based resume builder application built with Next.js, TypeScript, and Tailwind CSS.

Features

• Interactive Resume Builder: Drag-and-drop interface for easy resume creation
• Multiple Templates: Choose from Modern, Classic, and Minimal designs
• Real-time Preview: See changes instantly as you edit
• PDF Export: Download your resume as a high-quality PDF
• User Authentication: Secure login with NextAuth.js
• Cloud Storage: Save and manage multiple resumes
• Responsive Design: Works perfectly on desktop and mobile

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS, Radix UI Components
• Authentication: NextAuth.js
• Database: Prisma ORM with PostgreSQL
• PDF Generation: jsPDF, html2canvas
• Drag & Drop: DND Kit
• Form Handling: React Hook Form with Zod validation

Prerequisites

Before running this application, make sure you have:

• Node.js 18+ installed
• npm or yarn package manager
• PostgreSQL database (local or cloud)

Installation

1. Clone the repository

   git clone <repository-url>
   cd resume-builder

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your environment variables:

   # Database
   DATABASE_URL="postgresql://username:password@localhost:5432/resume_builder"
   
   # NextAuth.js
   NEXTAUTH_URL="http://localhost:3000"
   NEXTAUTH_SECRET="your-secret-key"
   
   # OAuth Providers (optional)
   GOOGLE_CLIENT_ID="your-google-client-id"
   GOOGLE_CLIENT_SECRET="your-google-client-secret"
   
   GITHUB_CLIENT_ID="your-github-client-id"
   GITHUB_CLIENT_SECRET="your-github-client-secret"
   
   LINKEDIN_CLIENT_ID="your-linkedin-client-id"
   LINKEDIN_CLIENT_SECRET="your-linkedin-client-secret"

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Run the development server

   npm run dev
   # or
   yarn dev

6. Open your browser Navigate to http://localhost:3000

Project Structure

src/
├── app/                    # Next.js 14 App Router
│   ├── builder/           # Resume builder page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Landing page
├── components/
│   ├── resume/            # Resume-related components
│   │   ├── forms/         # Form components
│   │   ├── templates/     # Resume templates
│   │   ├── ResumeForm.tsx
│   │   └── ResumePreview.tsx
│   └── ui/                # Reusable UI components
├── lib/
│   └── utils.ts           # Utility functions
└── types/
    └── resume.ts          # TypeScript type definitions

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript compiler

Usage

1. Create Account: Sign up or log in using your preferred method
2. Choose Template: Select from available resume templates
3. Fill Information: Add your personal info, experience, education, skills, etc.
4. Preview: See real-time preview of your resume
5. Download: Export your resume as PDF
6. Save: Your resume is automatically saved to your account

Templates

• Modern: Clean, contemporary design with accent colors
• Classic: Traditional, professional layout
• Minimal: Simple, elegant design with plenty of whitespace

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please open an issue on GitHub.