Spotz Cleaning Cashier

Spotz Cleaning offers specialized cleaning services for sneakers, ensuring they look as good as new. Our user-friendly cashier dashboard and shareable invoices make managing transactions seamless and efficient.

View Live

View Demo

Nuxt.js

Firebase

Features

Cashier Dashboard - Shows the transaction history with filtering feature is available and basic statistics.
Shareable Invoices - The invoices can be shared with the customer using a unique link. So, the customer can view their status of the service.

Designing

Before jumping to the implementation, I make sure the given short briefs to be more clear. Starting from what to achieve, what the current situation is, and what the improvements they've imagined. After some discussions, then I propose the application features. Once confirmed, then jump into proposing the application flow which is delivered with the UI design.

The prototype is designed using Figma and primarily focused on the tablet view then adjusted to the mobile view. The design is following the Material Design 3 guidelines and the color scheme is adjusted to the Spotz Cleaning brand.

Below is the embedded Figma prototype, or you can view the design file here.

Implementation

The front-end implementation doesn't need to be complicated, so I choose Nuxt.js as the framework for fast bootstrapping and possibility development in the future. The UI components is using Material You web components. The back-end is using Firebase Firestore to store the transaction data and Firebase Storage to store the invoice files. The authentication is using Firebase Authentication.

SEO isn't a priority for this project, so only basic SEO meta tags are implemented. App optimization is done by considering the application state management, the data fetching, and the distribution file sizes. The application is statically generated and deployed to Firebase Hosting.