A modern, feature-rich resume builder with real-time editing, multiple templates, and seamless cloud sync.
Modern, elegant interface for creating professional resumes
Professional resume templates with real-time editing
🌐 Try it now: https://profocto.tech
Create professional resumes in minutes with our intuitive, modern interface.
- 5 Professional Templates - Classic, Modern, and specialized layouts for different industries
- Drag & Drop Sections - Reorder resume sections with intuitive drag-and-drop (desktop & mobile optimized)
- Nested Drag & Drop - Reorganize individual items within sections (education, experience, projects, skills, etc.)
- Modern UI/UX - Clean, elegant design with smooth Framer Motion animations
- Fully Responsive - Optimized for desktop, tablet, and mobile devices with lazy-loading for performance
- Custom Section Titles - Rename any section to match your preferences
- Secure Google OAuth - Quick and safe sign-in with NextAuth.js
- Real-time Database - Powered by Convex for instant cloud synchronization
- Auto-save - Local storage + cloud backup ensures you never lose progress
- Multi-device Sync - Access your resumes from any device seamlessly
- Live Preview - See changes instantly as you type
- Editable Everything - All sections, titles, and content fully customizable
- Mobile-Optimized Editing - Touch-friendly controls with visible drag handles
- PDF Export - Download professional PDFs with proper formatting
- Skeleton Loaders - Smooth loading states with staggered animations
- Performance Optimized - Lazy section rendering for buttery-smooth mobile scrolling
- Rich Content Support - Add links, achievements, descriptions to all sections
- Date Range Components - Smart date formatting (e.g., "Jan 2023 - Present")
- Profile Picture Support - Upload and display professional photos (Template 5)
- Social Media Links - Integrate LinkedIn, GitHub, Portfolio, and more
- Dynamic Skills - Categorize skills (Technical, Soft Skills, Languages)
- Awards & Certifications - Showcase your achievements and credentials
- SEO Optimized - Server-side rendering for better discoverability
- Print Optimization - Clean, professional print layouts without UI elements
| Category | Technology | Version | Purpose |
|---|---|---|---|
| Framework | Next.js | 15.x | React framework with App Router, server-side rendering |
| Frontend | React | 18.x | Component-based UI library |
| Language | TypeScript | 5.x | Type-safe JavaScript development |
| Database | Convex | Latest | Real-time database with automatic sync |
| Authentication | NextAuth.js | 4.x | Secure authentication with OAuth providers |
| Technology | Purpose |
|---|---|
| Tailwind CSS | Utility-first CSS framework for rapid styling |
| Framer Motion | Animation library for smooth transitions and interactions |
| React Icons | Comprehensive icon library |
| Custom Components | Reusable UI components built from scratch |
| Tool | Purpose |
|---|---|
| ESLint | Code linting and formatting |
| PostCSS | CSS processing and optimization |
| Autoprefixer | Automatic CSS vendor prefixing |
| TypeScript Compiler | Type checking and compilation |
| Service | Purpose |
|---|---|
| Vercel | Frontend hosting and deployment |
| Convex Cloud | Database hosting and real-time sync |
| Google OAuth | Authentication service |
{
"name": "profocto",
"version": "0.3.0",
"dependencies": {
"next": "^15.5.4",
"react": "^18.3.1",
"typescript": "^5.6.3",
"convex": "^1.17.6",
"next-auth": "^4.24.11",
"framer-motion": "^12.4.3",
"tailwindcss": "^3.4.14",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"react-icons": "^5.3.0"
}
}- App Router: Modern Next.js 15 routing with React Server Components
- Real-time Database: Convex provides instant data synchronization across devices
- Type Safety: Full TypeScript implementation with strict type checking
- Component Architecture: Modular, reusable components with clear separation of concerns
- Drag & Drop: @dnd-kit for accessible, performant drag-and-drop functionality
- Responsive Design: Mobile-first approach with Tailwind CSS utility classes
- Performance Optimized:
- Lazy section rendering with IntersectionObserver
- Content-visibility CSS for off-screen optimization
- GPU-accelerated scrolling with translateZ(0)
- Dynamic imports for code splitting
- Context API: Efficient state management for resume data and section titles
- 🌐 Visit: Profile Élegante
- 🔐 Sign In: Use your Google account for secure authentication
- � Choose Template: Select from professional resume layouts
- ✏️ Fill Information: Add your personal details, experience, skills
- �️ Live Preview: See changes in real-time as you edit
- 📥 Export: Download your resume as PDF or share online
- Node.js 18+
- npm or yarn
- Git
- Google OAuth credentials (for auth)
- Convex account (for database)
# 1. Clone the repository
git clone https://github.com/NiranjanKumar001/Profocto.git
cd Profocto
# 2. Install dependencies
npm install
# 3. Set up environment variables
# Create .env.local file and add the following:
# NEXTAUTH_SECRET=your-secret-key
# NEXTAUTH_URL=http://localhost:3000
# GOOGLE_CLIENT_ID=your-google-client-id
# GOOGLE_CLIENT_SECRET=your-google-client-secret
# NEXT_PUBLIC_CONVEX_URL=https://wooden-corgi-542.convex.cloud
# CONVEX_DEPLOY_KEY=your-convex-deploy-key
# 4. Set up Convex database
npx convex dev
# 5. Start development server
npm run devnpm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Make your changes
- Test locally with
npm run dev - Run
npm run buildto ensure production build works - Commit and push your changes
Want to contribute? Check out our Contributing Guide
Create a .env.local file in the root directory with the following variables:
# Authentication (Required)
NEXTAUTH_SECRET=your-secret-key-here
# For local development:
NEXTAUTH_URL=http://localhost:3000
# For production:
# NEXTAUTH_URL=https://profocto.tech
# Google OAuth (Required)
GOOGLE_CLIENT_ID=your-google-oauth-client-id
GOOGLE_CLIENT_SECRET=your-google-oauth-client-secret
# Convex Database (Required)
NEXT_PUBLIC_CONVEX_URL=https://wooden-corgi-542.convex.cloud
CONVEX_DEPLOY_KEY=your-convex-deploy-key- Go to Google Cloud Console
- Create a new project or select existing one
- Enable Google+ API
- Go to "Credentials" → "Create Credentials" → "OAuth 2.0 Client IDs"
- Set authorized redirect URIs:
http://localhost:3000/api/auth/callback/google(for development)https://profocto.tech/api/auth/callback/google(for production)
- Sign up at Convex
- Create a new project
- Copy the deployment URL and deploy key from dashboard
- Run
npx convex devto sync your schema - Note: The current deployment uses
wooden-corgi-542.convex.cloud- you'll need your own Convex deployment
# Generate a secure secret
openssl rand -base64 32Profocto/
├── 📁 app/ # Next.js 15 App Router
│ ├── api/auth/ # NextAuth.js authentication routes
│ ├── builder/[id]/ # Resume builder page with dynamic routing
│ ├── templates/ # Template selection page
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Landing page
├── 📁 components/ # Reusable React components
│ ├── 🔐 auth/ # Auth components (modals, logout loader)
│ ├── 📝 form/ # Form sections (Education, Experience, Skills, etc.)
│ ├── 👀 preview/ # Resume templates (Preview, TemplateTwo-Five)
│ ├── 🎨 ui/ # UI utilities (skeletons, nav, badges)
│ └── utility/ # Helper components (DateRange, print utilities)
├── 📁 contexts/ # React Context API
│ ├── ResumeContext.tsx # Global resume data state
│ └── SectionTitleContext.js # Custom section title management
├── 📁 lib/ # Utility functions
│ ├── convex-adapter.ts # NextAuth Convex adapter
│ ├── convex-client.ts # Convex client configuration
│ └── utils.ts # Helper utilities
├── 📁 public/ # Static assets
│ └── assets/ # Images, logos, templates
├── 📁 types/ # TypeScript definitions
│ ├── resume.ts # Resume data types
│ └── *.d.ts # Module declarations
├── 📁 convex/ # Convex backend
│ ├── schema.ts # Database schema
│ ├── resume.ts # Resume CRUD operations
│ └── auth.ts # Authentication logic
├── 📄 middleware.ts # Next.js middleware for auth
├── 📄 tailwind.config.ts # Tailwind CSS configuration
└── 📄 next.config.mjs # Next.js configuration
This project is optimized for deployment on Vercel:
- Fork this repository
- Connect your GitHub account to Vercel
- Import the project
- Add your environment variables
- Deploy!
We love contributions! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.
Please read our Contributing Guide for detailed guidelines.
- 🐛 Report bugs - Help us identify and fix issues
- 💡 Suggest features - Share ideas for new functionality
- 🎨 Improve UI/UX - Enhance design and user experience
- 📚 Update docs - Improve README, comments, and guides
- ⚡ Optimize performance - Make the app faster and smoother
- 🔧 Fix issues - Pick up open issues and submit PRs
- 🧪 Add tests - Improve code quality and reliability
- 🌐 Translations - Help make Profocto accessible worldwide
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes and commit (
git commit -m 'feat: add amazing feature') - Push to your branch (
git push origin feature/amazing-feature) - Open a Pull Request with a clear description
First-time contributor? Look for issues labeled good first issue to get started!
This project is licensed under the MIT License - see the LICENSE file for details.
- 🐛 Found a bug? Open an issue
- 💡 Have an idea? Start a discussion
- 📧 Need help? Check existing issues or create a new one
- ⭐ Like the project? Give it a star and share with others!
Special thanks to these amazing technologies and communities:
- Next.js - The React framework that powers Profocto
- Convex - Real-time backend as a service
- Vercel - Seamless deployment and hosting
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Production-ready animation library
- dnd-kit - Modern drag & drop toolkit
- NextAuth.js - Authentication for Next.js
- React Icons - Icon library
- All our amazing contributors! 🎉
💖 Built with passion by NiranjanKumar001
Love Profocto? Show your support!
⭐ Star this repo | 🍴 Fork it | 📢 Share with friends
Made with Next.js, TypeScript, and lots of ☕