snowy-resume

Shiva Kumar

Build a FULL-STACK Resume Builder Web Application similar to Canva with modern UI and real-time resume generation. MAIN GOAL: - User enters details → instantly generates a professional resume preview - Provide multiple resume templates (modern, minimal, creative) - Allow customization (colors, fonts, layout, spacing) - Allow download as PDF - Provide login system with Phone Number + OTP authentication ------------------------------------- TECH STACK: Frontend: - React.js (with Vite or Next.js) - Tailwind CSS (for modern UI) - Framer Motion (animations) - Axios (API calls) Backend: - Node.js + Express OR Python Flask (choose one) - MongoDB (database) - JWT authentication ------------------------------------- AUTHENTICATION SYSTEM: - Phone number login (OTP based) - Use Firebase OTP or Twilio API - No password system - After login, redirect to dashboard ------------------------------------- DASHBOARD FEATURES: 1. Resume Builder Form: - Personal Info (Name, Email, Phone, Photo) - Education - Experience - Skills - Projects - Certifications - Languages - Achievements 2. Live Preview: - Real-time resume preview on right side - Updates instantly when user types 3. Templates: - At least 5 templates: - Minimal - Professional - Creative - Modern - ATS-friendly - User can switch templates instantly 4. Customization Panel: - Change colors (primary, secondary) - Change fonts (Google Fonts) - Adjust spacing and layout - Toggle sections ON/OFF ------------------------------------- PDF DOWNLOAD: - Use html2pdf / jsPDF - Download clean, properly formatted resume - No watermark ------------------------------------- DATABASE STRUCTURE: User: - id - phone - created_at Resume: - user_id - personal_info - education[] - experience[] - skills[] - projects[] - template_selected - customization_settings ------------------------------------- UI DESIGN REQUIREMENTS: - Premium Canva-like design - Glassmorphism cards - Smooth animations - Dark + Light mode toggle - Drag-and-drop section reorder - Sidebar navigation - Mobile responsive ------------------------------------- EXTRA FEATURES (IMPORTANT): - Save multiple resumes - Auto-save functionality - Duplicate resume option - AI suggestion for: - Summary - Skills - Experience bullet points - Export to PDF and share link ------------------------------------- ADMIN PANEL (Optional): - View users - View resumes created - Analytics dashboard ------------------------------------- DELIVERABLES: - Fully working frontend + backend - Clean folder structure - API routes documented - Ready-to-run setup instructions ------------------------------------- BONUS: - Add loading animations - Add skeleton UI - Add toast notifications - Add error handling ------------------------------------- END GOAL: The app should feel like Canva: - Smooth - Beautiful - Professional - Easy to use

Comments (0)

No comments yet. Be the first!

Page 1 of 7

System Requirements Document (SRD)

Project Name: snowy-resume

1. Introduction

The snowy-resume project is a full-stack resume builder web application designed to provide users with a modern, intuitive, and professional platform for creating resumes. Inspired by the sleek and user-friendly design of Canva, this application will allow users to generate resumes in real-time, customize templates, and export them as PDFs or shareable links.

This document outlines the system requirements for the snowy-resume project, ensuring clarity and alignment with the goals set forth by Shiva Kumar. The application will cater to users in India (IN) and will incorporate locale-specific features, such as phone number authentication via OTP.

Page 2 of 7

2. System Overview

The snowy-resume application will enable users to:

Enter personal and professional details to instantly generate a resume preview.
Choose from multiple resume templates (modern, minimal, creative, etc.).
Customize colors, fonts, layouts, and spacing to suit their preferences.
Download resumes as PDFs or share them via links.
Save multiple resumes and duplicate existing ones for quick edits.

The system will feature a responsive design, ensuring seamless usability across desktop and mobile devices. It will also include AI-powered suggestions for resume content, such as summaries, skills, and experience bullet points, enhancing the user experience.

3. Functional Requirements

Page 3 of 7

User Stories:

As a User, I should be able to log in using my phone number and OTP authentication.
As a User, I should be able to fill out a form with my personal and professional details.
As a User, I should see a real-time preview of my resume as I type.
As a User, I should be able to choose from at least five resume templates.
As a User, I should be able to customize colors, fonts, layouts, and spacing.
As a User, I should be able to toggle sections (e.g., achievements, certifications) ON/OFF.
As a User, I should be able to download my resume as a clean, formatted PDF.
As a User, I should be able to share my resume via a link.
As a User, I should be able to save multiple resumes in my account.
As a User, I should be able to duplicate an existing resume for quick edits.
As a User, I should receive AI-powered suggestions for resume content.
As an Admin, I should be able to view user analytics and resumes created (optional).

4. User Personas

1. User

Description: Individuals looking to create professional resumes quickly and efficiently.
Goals: Generate resumes, customize templates, and download/share them.
Key Features: Real-time preview, customization options, AI suggestions, PDF export, and shareable links.

2. Admin (Optional)

Description: Administrators managing the platform and monitoring user activity.
Goals: View user analytics, resumes created, and ensure smooth operation of the system.
Key Features: Analytics dashboard, user management tools.

Page 4 of 7

5. Visuals Colors and Theme

Unique Color Palette:

The snowy-resume project will feature a clean, modern aesthetic with a focus on professionalism and creativity.

Background: #F5F9FF (soft snow white)
Surface: #E1E8F0 (light frost gray)
Text: #2C3E50 (deep slate blue)
Accent: #4A90E2 (vivid icy blue)
Muted Tones: #AAB7C4 (subtle cloud gray)

This palette reflects the "snowy" theme while maintaining a professional and elegant appearance.

6. Signature Design Concept

Page 5 of 7

Interactive Snowfall Resume Builder

The homepage will feature a dynamic snowfall animation that subtly reacts to user interactions. As users move their cursor, snowflakes will gently drift toward the pointer, creating a calming and immersive experience.

The resume builder interface will resemble a glassmorphism card layout, with transparent panels and frosted edges. Each section of the form will appear as a draggable card, allowing users to reorder sections intuitively.

The real-time preview will be displayed on the right side, with smooth transitions and animations powered by Framer Motion. Users can toggle between templates with a carousel slider, which animates like flipping through a stack of cards.

Micro-interactions will include:

Hover effects: Buttons and icons will glow softly when hovered over.
Section transitions: Cards will "slide in" or "fade out" when toggled ON/OFF.
Snowflake bursts: Clicking on buttons will trigger a subtle burst of snowflakes for visual feedback.

This design concept ensures the app is both visually stunning and highly engaging, leaving a lasting impression on users.

7. Non-Functional Requirements

Performance: The system should load pages within 2 seconds and handle real-time updates seamlessly.
Scalability: Support up to 100,000 users concurrently.
Security: Ensure secure authentication and data storage using JWT and encryption.
Availability: Maintain 99.9% uptime.
Responsiveness: Fully functional on both desktop and mobile devices.

Page 6 of 7

8. Tech Stack

Frontend:

React.js (with Vite or Next.js)
Tailwind CSS (modern UI design)
Framer Motion (animations)
Axios (API calls)

Backend:

Python + FastAPI (preferred for scalability and performance)

Database:

MongoDB (NoSQL for flexibility)

AI Tools:

GPT 5.4 (user-friendly response generation)
Claude 4.6 Opas (academic/coding suggestions)
Litellm (LLM routing)

Orchestration:

Docker + docker-compose (local development)
Kubernetes (server-side orchestration)

9. Assumptions and Constraints

Page 7 of 7

Assumptions:

Users will primarily access the application via web browsers.
The application will support English as the default language.
Users will prefer phone number authentication over traditional passwords.

Constraints:

Limited to five resume templates initially.
AI suggestions will depend on third-party API availability.
PDF generation must maintain consistent formatting across devices.

10. Glossary

Glassmorphism: A design style featuring transparent surfaces with frosted edges.
JWT: JSON Web Token, used for secure authentication.
Framer Motion: A React library for animations.
MongoDB: A NoSQL database for flexible data storage.
AI Suggestions: Automated recommendations for resume content based on user input.

This document provides a comprehensive overview of the snowy-resume project requirements, ensuring alignment with Shiva Kumar's vision for a modern, professional resume builder.