UNOPS
Portfolio Tools — Project showcase & admin
A full-stack app to manage and publish projects: Google sign-in, an admin dashboard with rich text and image uploads, and public project pages with search and filters.
- Next.js
- TypeScript
- Firebase
- Tailwind CSS
UNOPS
Context
UNOPS teams needed a simple way to manage their projects and showcase them publicly. I built a registry where authenticated users create and edit projects through an admin interface, and visitors browse the published result.
My role
I designed and built the whole application, front end and back end.
What I built
- Authentication and roles: Google sign-in, a superadmin role and owner permissions on each project.
- Admin dashboard: create, edit and delete projects, with a rich-text editor for the full description and confirmation modals to prevent accidental deletions.
- Images: cover and gallery uploads with drag-and-drop reordering and live preview.
- Public pages: a page per project (
/project/[id]) and a home page with search, filters, pagination and layout controls. - Comfort: favourites for logged-in users, dark mode, a responsive and accessible interface.
Stack
Next.js 15 (App Router), TypeScript, Firebase (Authentication, Firestore, Storage), Tailwind CSS v4, Lucide icons, React Quill.