Login Page & Admin Portal
I designed and developed a full stack login system and internal admin portal for a fictional vineyard, crafting an intuitive experience for both customers and staff to manage online store operations.
I designed and developed a comprehensive full stack login system and an internal administration portal for a fictional vineyard's online store. The core objective was to create a clean, intuitive, and secure experience tailored for two distinct user groups: returning customers and vineyard staff.
For customers, the system provides a seamless and secure login, enabling them to easily manage their past orders, track current purchases, and update personal information. On the administrative side, the portal empowers staff with robust tools to oversee product listings, manage inventory levels, process new orders, and access complete order history. This project showcased my ability to build interconnected front-end and backend systems that deliver practical value for both end users and internal operations.
The primary challenge involved designing and implementing two distinct yet harmonized user interfaces and functionalities within a single application architecture: one for the public facing customer experience and another for the private, secure admin portal. This required careful consideration of user permissions, data access control, and ensuring a cohesive brand experience across both environments.
Another significant hurdle was establishing secure and reliable authentication and authorization mechanisms for both customer logins and restricted admin access. Beyond security, managing complex data relationships such as products to inventory, orders to customers, and historical order data demanded a robust database schema and efficient API design to ensure data integrity and system performance.
I began with exploratory Figma concepts to define how each user type would interpret value differently.
My process began with comprehensive UX design in Figma for both the customer dashboard and the admin portal. I created distinct user flows for each persona, outlining how customers would manage orders versus how staff would update inventory. This involved designing intuitive layouts, navigation, and form elements tailored to each user's specific tasks.
For development, I embraced a full-stack approach. The frontend was built with React, creating dynamic and responsive user interfaces for both the customer and admin sections. I used SCSS for sophisticated styling and Bootstrap for a solid responsive framework. The backend was powered by Node.js with Express.js, acting as the API layer to handle user authentication, data retrieval, and complex CRUD operations (Create, Read, Update, Delete) for products, orders, and users. MongoDB served as the database, providing a flexible schema for e-commerce data. Iterative testing of API endpoints and UI interactions ensured a robust and integrated system.
Color palette
Each color was selected to support accessibility, visual hierarchy, and a clean, modern interface.
What I learned
I began with exploratory Figma concepts to define how each user type would interpret value differently — from long-term appreciation to short-term trade signals.
This project provided invaluable experience in developing a complete full stack application from the ground up, highlighting the intricate dance between frontend user experience and backend data management. It significantly advanced my understanding of secure authentication systems and the critical importance of robust authorization logic when building applications with distinct user roles.
I gained profound insights into designing and implementing efficient CRUD operations for dynamic data like product inventories and customer orders. This project solidified my ability to architect and deliver an integrated system where the frontend intuitively interacts with a secure and performant backend, demonstrating a holistic understanding of web application development and delivering practical solutions for real world business needs.