Profile Élegante - An elegant and modern resume builder application built with Next.js
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.
- Multiple Professional Templates - Choose from carefully crafted resume layouts
- Modern UI/UX - Clean, elegant design with smooth animations
- Responsive Design - Perfect on desktop, tablet, and mobile devices
- Dark/Light Theme Support - Comfortable viewing in any environment
- Secure Google OAuth - Quick and safe sign-in process
- Real-time Database - Powered by Convex for instant updates
- Auto-save - Never lose your progress
- Cloud Sync - Access your resumes from anywhere
- Drag & Drop Interface - Intuitive content organization
- Live Preview - See changes in real-time
- Editable Sections - All form fields are customizable
- Export Options - Download as PDF or share online
- Creative Logout Animation - Delightful user interactions
- Dynamic Skill Management - Add/remove skills with categories
- Social Media Integration - Link your professional profiles
- Custom Loading States - Smooth transitions and feedback
- SEO Optimized - Better discoverability
| 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",
"next": "^15.5.2",
"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",
"react-icons": "^5.3.0"
}- App Router: Modern Next.js routing with server components
- Real-time Database: Convex provides instant data synchronization
- Type Safety: Full TypeScript implementation across the stack
- Component Architecture: Modular, reusable React components
- Responsive Design: Mobile-first approach with Tailwind CSS
- Performance Optimized: Next.js optimizations for fast loading
- 🌐 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 app directory (App Router)
├── 📁 components/ # Reusable React components
│ ├── 🔐 auth/ # Authentication components
│ ├── 📝 form/ # Form input components
│ ├── 👀 preview/ # Resume preview components
│ └── 🎨 ui/ # UI utility components
├── 📁 contexts/ # React Context providers
├── 📁 lib/ # Utility functions and configurations
├── 📁 public/ # Static assets
├── 📁 types/ # TypeScript type definitions
└── 📁 convex/ # Database schema and functions
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 welcome contributions! Please see our Contributing Guide for details.
- 🐛 Report bugs
- 💡 Suggest new features
- 🎨 Improve UI/UX
- 📚 Improve documentation
- 🧪 Add tests
- 🔧 Fix issues
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Convex for the real-time database
- Vercel for seamless deployment
- Tailwind CSS for the utility-first styling
- Framer Motion for smooth animations
Built with ❤️ by NiranjanKumar001
⭐ Star this repo if you found it helpful!
