Wireframe Exploration
Before designing the final interface, the layout and content hierarchy were mapped through low-fidelity wireframes. This helped define the structure, editing workflow, and component relationships before applying the final visual design system.
Authentication Flow
The dashboard begins with a secure admin sign-in flow designed to protect access to editable website content. Users authenticate with email and password, after which a JWT is issued and used to authorise protected requests across the application. This creates a clear separation between public-facing content and admin-only functionality, while keeping the experience simple and intuitive for the user.
The interface was designed to feel minimal, modern, and trustworthy, using a dark glass-inspired visual system that gives the product a polished internal-tool feel rather than a default admin panel aesthetic.
Content Management Dashboard
Once authenticated, the user can manage core website content through a structured editing interface. The dashboard allows updates to hero content, about text, and services, with changes persisted through protected API routes to a PostgreSQL database. The goal was to create a lightweight CMS-style experience that is straightforward to use while still reflecting production-style frontend and backend architecture.
The layout is organised around editable sections, clear save actions, and focused input fields so content changes can be made quickly without overwhelming the user. This turned the project into more than a static dashboard concept, a functional full-stack content management system.
Responsive Admin Experience
The dashboard was also designed to adapt cleanly to smaller screens, ensuring the editing experience remains usable on mobile and tablet layouts. Rather than simply shrinking the desktop interface, the responsive version reflows content into a more vertical and touch-friendly structure, preserving clarity and usability across devices.
This was an important part of the build because admin tools are often neglected on smaller screens. Designing the dashboard responsively helped create a more complete and thoughtful product experience.
Development Workflow
The project was built as a full-stack application using React with Vite on the frontend and Node.js, Express, JWT authentication, and PostgreSQL on the backend. The development workflow was set up so the client and server could run locally in parallel, making it easier to test authentication, protected routes, data updates, and UI changes in real time.
Presenting the running environment as part of the case study helps show that this project is not just a visual mockup, but a functioning application with real architecture behind it.
