License: MIT Stack: Next.js · MongoDB Atlas · Tailwind CSS · JWT · Image Upload API
Developers and freelancers need personal portfolios that are easy to maintain, customizable, and up-to-date—without editing code every time they gain experience or build something new.
Yet, most portfolio solutions are:
- 🔒 Static (hardcoded content)
- 😫 Inflexible (require code changes)
- ❌ Non-collaborative (no real-time data handling or UI updates)
Devfolio is a dynamic, self-hosted portfolio builder that empowers developers to:
- ⚡ Log in securely
- 🛠️ Add/update/delete their work with ease
- 🖼️ Upload images of their projects and contributions
- 💡 Preview changes live with a beautiful interface
- 🌘 Toggle dark/light themes intuitively
Perfect for showcasing technical experience, side projects, and employment history—without touching the codebase.
| User Type | Use Case |
|---|---|
| Developers | Maintain a living portfolio that grows with them |
| Bootcamp Graduates | Easily document new skills and projects |
| Freelancers | Showcase completed work dynamically |
| Agencies | Enable dev clients to manage their own content |
| Layer | Tech Stack | Purpose |
|---|---|---|
| Frontend | Next.js + Tailwind CSS | SEO-ready, responsive UI |
| Database | MongoDB Atlas | Store user, project, experience |
| Auth | JWT (custom or NextAuth) | Secure login and user sessions |
| Uploads | Image Upload API | Project/work image support |
| Hosting | Vercel / Netlify | CI/CD for production deployment |
| Feature | Description |
|---|---|
| 👤 User Auth | Sign up/log in with JWT & secure session management |
| 📦 CRUD System | Create, update, and delete Projects & Experience entries |
| 🖼️ Image Upload | Upload and display project images in real time |
| 🌗 Dark Mode | Theme toggle saved to user preference |
| 🔁 Live Preview | Edits are rendered instantly on portfolio pages |
| Auth & Dashboard | Project Editor | Responsive UI |
|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
git clone https://github.com/tochi2055/devfolio.git
cd devfolionpm install
# or
yarn installCreate the following file:
MONGODB_URI=your-mongodb-atlas-connection-string
JWT_SECRET=your_jwt_secret_key
IMAGE_UPLOAD_URL=https://your-image-upload-api.com/upload
NEXT_PUBLIC_BASE_URL=http://localhost:3000- Create a new cluster and database
- Add a "portfolios" collection (or dynamic per user)
- Get the connection string and plug it into
MONGODB_URI
If you're using:
- Cloudinary / S3 / Uploadthing — update
IMAGE_UPLOAD_URLto your handler - Ensure your frontend uses
FormDataand the API returns a URL string
npm run dev
# or
yarn devBrowse to: http://localhost:3000
npm run build
npm startRecommended platforms:
-
Vercel:
- Connect GitHub repo
- Add
.env.localvariables - Deploy → Done ✅
-
Netlify:
- Set
npm run build && npm startas build command - Add environment variables
- Deploy and monitor
- Set
If you’ve added tests:
npm test
# or
yarn testTest auth logic, dashboard CRUD, and form validation.
| Action | Behavior |
|---|---|
| 📝 Add Project | Form with title, desc, image upload |
| 🧠 Edit Experience | Auto-fills existing data |
| ❌ Delete Entry | One-click removal with confirmation |
| 🎨 Dark Mode | Toggle & saved in user preference |
| ⚡ Live Preview | Updates reflect instantly |
Want to improve Devfolio?
- Fork the repository
- Create a branch:
git checkout -b feat/my-feature - Commit changes with clear messages
- Push:
git push origin feat/my-feature - Open a pull request
💡 Don’t forget to:
- Format with ESLint/Prettier
- Add test coverage where relevant
- Keep commit messages descriptive
This project is licensed under the MIT License.
Q: Can I use another image service?
A: Yes — replace IMAGE_UPLOAD_URL and update your upload logic accordingly.
Q: How can I add social links? A: Extend the user schema in the database and update dashboard + frontend.
Q: Can I make it multi-user? A: Yes — current setup is per-user. You can scale it for multi-tenant support with role-based access.