🎯 Roastume - Resume Feedback Platform

🚀 Overview

Roastume is a modern web application that allows users to share their resumes and receive constructive feedback ("roasts") from the community. Built with a unique comic-book inspired design, it makes the traditionally stressful process of resume feedback fun and engaging.

✨ Key Features

🔐 Authentication & User Management

• Google OAuth integration via NextAuth.js
• Automatic profile creation and management
• Secure session handling with JWT

📄 Resume Management

• Upload resumes (images & PDFs up to 10MB)
• Full CRUD operations (Create, Read, Update, Delete)
• File storage with Supabase Storage
• Owner-only edit/delete permissions

💬 Advanced Comment System

• Nested comment replies with threading
• Upvote/downvote system for comments
• Edit and delete own comments
• Three-dot menu for comment management
• Real-time comment counts

👤 User Profiles

• Personal dashboard with user's resumes
• Resume statistics (likes, comments)
• Profile management and settings

📱 Responsive Design

• Mobile-first approach with responsive breakpoints
• Touch-friendly interface
• Hamburger menu for mobile navigation
• Comic book aesthetic with bold borders and shadows

🛠️ Technology Stack

Frontend

• Next.js 15.2.4 - React framework with App Router
• React 19 - UI library with Server Components
• TypeScript 5 - Type safety and developer experience
• Tailwind CSS 4.1.9 - Utility-first CSS framework
• shadcn/ui - Component library (New York style)
• Radix UI - Headless UI primitives for accessibility

Backend & Database

• Supabase - PostgreSQL database with real-time features
• NextAuth.js - Authentication system
• Row Level Security (RLS) - Database-level security

State Management

• Custom React Context - Modular state management
• Optimistic Updates - Immediate UI feedback
• localStorage - Client-side persistence

🏗️ Project Structure

roastume/
├── app/                     # Next.js App Router
│   ├── (roastume)/         # Main app routes
│   │   ├── profile/        # User profile page
│   │   ├── resume/[id]/    # Individual resume view
│   │   └── upload/         # Resume upload page
│   └── api/                # API routes
│       ├── auth/           # NextAuth.js
│       ├── comments/       # Comment management
│       ├── resumes/        # Resume CRUD
│       └── upload/         # File upload
├── components/             # Reusable React components
│   ├── ui/                 # shadcn/ui components
│   ├── enhanced-comment.tsx # Advanced comment system
│   ├── my-resume-card.tsx  # Owner resume controls
│   └── navbar.tsx          # Responsive navigation
├── lib/                    # Utility libraries
│   ├── store/              # Modular state management
│   ├── api.ts              # API client functions
│   └── auth.ts             # Authentication config
└── supabase-schema.sql     # Database schema

🚀 Getting Started

Prerequisites

• Node.js 18+ and pnpm
• Supabase account and project
• Google OAuth credentials

Installation

1. Clone the repository

   git clone https://github.com/your-username/roastume.git
   cd roastume

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your environment variables:

   # NextAuth.js
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key
   
   # Google OAuth
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   # Server-only; do not expose in the browser
   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

4. Set up the database

   # Run the SQL schema in your Supabase dashboard
   # File: supabase-schema.sql

5. Start the development server

   pnpm dev

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

📊 Database Schema

The application uses a normalized PostgreSQL schema with the following tables:

• profiles - User profile information
• resumes - Resume metadata and files
• comments - Comments with reply threading
• comment_votes - Upvote/downvote tracking
• likes - Resume like tracking

All tables include Row Level Security (RLS) policies for data protection.

🎨 Design System

Roastume features a unique comic-book inspired design with:

• Bold Borders - 3-5px thick borders throughout
• Drop Shadows - Consistent shadow patterns for depth
• Vibrant Colors - Carefully chosen color palette
• Typography - Bangers (display) and Kalam (body) fonts
• Hover Effects - Translate and scale animations
• Responsive Layout - Mobile-first approach

🔧 API Routes

Authentication

• GET/POST /api/auth/[...nextauth] - NextAuth.js endpoints

Resumes

• GET/POST /api/resumes - List/create resumes
• GET/PUT/DELETE /api/resumes/[id] - Individual resume operations
• GET /api/resumes/my - User's own resumes
• POST /api/resumes/[id]/comments - Add comments

Comments

• GET/PUT/DELETE /api/comments/[id] - Comment CRUD operations
• POST /api/comments/[id]/vote - Vote on comments
• GET/POST /api/comments/[id]/replies - Comment replies

File Upload

• POST /api/upload - File upload handling

🚀 Deployment

The application is deployed on Vercel and can be accessed at: https://vercel.com/harishs-projects-883913b8/v0-roastume-website-ui

Deploy Your Own

1. Fork this repository
2. Connect to Vercel
3. Set up environment variables in Vercel dashboard
4. Deploy!

🤝 Contributing

Contributions are welcome! Please open an issue or PR. By contributing you agree to follow the Security and icon usage guidelines (use react-icons).

📝 License

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

🙏 Acknowledgments

• Built with Next.js
• Database powered by Supabase
• UI components from shadcn/ui
• Icons from react-icons
• Fonts from Google Fonts

📞 Support

If you have any questions or need help, please open an issue or contact the maintainers.

---

Made with ❤️ and lots of ☕ by the Roastume team