ProFolio is a full-stack web application that lets users register, authenticate via OTP (email or SMS), fill in their professional details, and instantly generate a stunning personal portfolio website — no coding required.
Sign Up → OTP Verification → Dashboard → Fill Details → Portfolio Generated! 🎉
Login Page OTP Verification
🏠 Dashboard & Portfolio Builder
Welcome Dashboard Fill Portfolio Details
AI Features Overview Competitive Programming Profiles
Portfolio Saved Successfully ✅
🎨 Generated Portfolio Output
Hero Section
About Me My Skills
Education & Projects Competitive Coding Profiles
Contact Section
✅ Sign up with email or phone number
✅ Passwordless login via 5-digit OTP
✅ OTP delivery via Nodemailer (email) and Twilio (SMS)
✅ OTP auto-expires and is single-use
✅ Secure sessions with JWT
✅ Personal Info — Name, Age, Email, Phone, Address, Language
✅ Skills with animated circular progress indicators
✅ Education timeline (School → College → University)
✅ Projects with GitHub repository links
✅ Competitive Programming — LeetCode & CodeChef ratings
✅ Contact form with social links (GitHub, LinkedIn, Instagram, Email)
✅ Beautiful dark-themed generated portfolio
🤖 AI-Powered Capabilities
✅ Instant Portfolio Creation
✅ Customizable Templates
✅ AI-Optimized Content Suggestions
✅ Easy File Integration
✅ SEO & Visibility Boost
✅ Auto-Save & Backup
✅ Analytics & Insights
✅ Multi-Device Access
Technology
Purpose
HTML5 / CSS3
Markup & Styling
JavaScript (ES6+)
Client-side interactivity
React / Vite
Component-based UI
Technology
Purpose
Node.js Runtime environment
Express.js Web framework & REST API
JWT Secure session tokens
Service
Purpose
Nodemailer Email OTP via Gmail SMTP
Twilio SMS OTP
Technology
Purpose
MongoDB User data, sessions, portfolios
Mongoose ODM & schema modeling
profolio/
│
├── 📂 backend/
│ ├── 📂 config/
│ │ ├── db.js # MongoDB connection
│ │ └── nodemailer.js # Email transport setup
│ ├── 📂 controllers/
│ │ ├── authController.js # Signup, OTP send/verify
│ │ └── portfolioController.js # Create, update, fetch portfolio
│ ├── 📂 middleware/
│ │ ├── authMiddleware.js # JWT verification
│ │ └── rateLimiter.js # OTP rate limiting
│ ├── 📂 models/
│ │ ├── User.js # User schema
│ │ ├── OTP.js # OTP schema (hashed + expiry)
│ │ └── Portfolio.js # Full portfolio schema
│ ├── 📂 routes/
│ │ ├── authRoutes.js # /api/auth/*
│ │ └── portfolioRoutes.js # /api/portfolio/*
│ ├── 📂 services/
│ │ ├── emailService.js # Nodemailer OTP sender
│ │ └── smsService.js # Twilio OTP sender
│ ├── .env
│ ├── server.js
│ └── package.json
│
├── 📂 frontend/
│ ├── 📂 src/
│ │ ├── 📂 pages/
│ │ │ ├── Login.jsx
│ │ │ ├── OTPVerify.jsx
│ │ │ ├── Dashboard.jsx
│ │ │ ├── PortfolioForm.jsx
│ │ │ └── Portfolio.jsx # Generated portfolio output
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── vite.config.js
│ └── package.json
│
└── README.md
git clone https://github.com/yourusername/profolio.git
cd profolio # Backendcd backend
npm install
# Frontendcd ../frontend
npm installCreate a .env file in /backend:
# ── Server ───────────────────────────────────────PORT = 5000
NODE_ENV = development
# ── Database ─────────────────────────────────────MONGO_URI = mongodb+srv://<username>:<password>@cluster.mongodb.net/profolio_db
# ── JWT ──────────────────────────────────────────JWT_SECRET = your_super_secret_jwt_key
JWT_EXPIRES_IN = 7d
# ── OTP Settings ─────────────────────────────────OTP_EXPIRY_MINUTES = 10
OTP_LENGTH = 5
# ── Nodemailer (Email OTP) ────────────────────────EMAIL_HOST = smtp.gmail.com
EMAIL_PORT = 587
EMAIL_USER = your_email@gmail.com
EMAIL_PASS = your_gmail_app_password
# ── Twilio (SMS OTP) ─────────────────────────────TWILIO_ACCOUNT_SID = ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_AUTH_TOKEN = your_twilio_auth_token
TWILIO_PHONE_NUMBER = +1234567890
⚠️ Never commit .env to Git — add it to .gitignore.
# Terminal 1 — Backend (http://localhost:5000)cd backend
npm run dev
# Terminal 2 — Frontend (http://localhost:5173)cd frontend
npm run dev
Method
Endpoint
Description
Auth
POST/signupRegister with email or phone
❌
POST/send-otpSend OTP via email or SMS
❌
POST/verify-otpVerify OTP & receive JWT
❌
GET/logoutInvalidate session
✅
🧑💼 Portfolio — /api/portfolio
Method
Endpoint
Description
Auth
POST/createSubmit portfolio details
✅
GET/:usernameFetch generated portfolio
❌
PUT/updateUpdate portfolio
✅
DELETE/deleteDelete portfolio
✅
POST /api/auth/verify-otp
Content-Type: application/json
{
" contact" " user@example.com" " otp" " 49961" {
"success" : true ,
"token" : " eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." "user" : { "id" : " 64abc..." "email" : " user@example.com" {
"portfolioName" : " My Portfolio" "personalInfo" : {
"name" : " Ishan Bagra" "age" : 20 ,
"email" : " ishanbagra18@gmail.com" "phone" : " 6377253179" "address" : " A-116 Kardhani, Jaipur, Rajasthan" "skills" : [
{ "name" : " JavaScript" "level" : 89 },
{ "name" : " Node.js" "level" : 75 },
{ "name" : " React.js" "level" : 80 },
{ "name" : " HTML" "level" : 90 },
{ "name" : " CSS" "level" : 70 },
{ "name" : " Angular" "level" : 65 }
],
"education" : [
{ "degree" : " B.Tech" "institution" : " IIIT Kota" "year" : " 2022 - Present" "degree" : " College" "institution" : " iiitkota" "year" : " 2020 - 2022" "degree" : " School" "institution" : " St Teresa" "year" : " 2008 - 2020" "projects" : [
{ "title" : " Skylink" "description" : " Real-time in-flight communication system" "githubUrl" : " ..." "title" : " Love-Advisor" "description" : " AI chatbot to resolve interpersonal conflicts" "githubUrl" : " ..." "title" : " Dicegame" "description" : " A predictable dice game for timepass" "githubUrl" : " ..." "competitiveProgramming" : {
"leetcode" : { "profile" : " https://leetcode.com/u/ishanbagra/" "rating" : 1518 },
"codechef" : { "profile" : " https://www.codechef.com/START141D" "rating" : 1489 }
},
"contact" : {
"github" : " https://github.com/..." "linkedin" : " https://linkedin.com/in/..." "instagram" : " https://instagram.com/..." "email" : " ishanbagra18@gmail.com" # 1. Fork this repo# 2. Create your feature branch# 3. Commit (Conventional Commits style)" feat: add your feature" # 4. Push & open a Pull RequestLicensed under the MIT License — see LICENSE for details.
Built with ❤️ by Ishan Bagra
⭐ Star this repo if you found it helpful! ⭐