TechZone is a physical mobile phone shop that sells both brand-new sealed phones and second-hand/used phones. This project delivers a native Android application whose central purpose is to let customers check, in real time, exactly which phones are currently available in the shop â the app is the shop window for live stock.
The application is split into two clearly separated areas:
The audience is twofold: walk-in shoppers browsing TechZone's current stock on their own phones, and the shop owner/staff who maintain that stock behind a secure login. The inventory must always represent the current stock in the physical TechZone shop, and the app must be scalable so more phones, brands, categories, and features can be added later.
TechZone is delivered as a native Android application built with Kotlin, Jetpack Compose, Material 3, MVVM architecture, and the Repository pattern, backed by a cloud backend (Firebase Authentication, Cloud Firestore, and Firebase Storage). The customer-facing inventory is driven by real-time backend synchronization: when the shop owner adds, edits, deletes, or re-statuses a phone, the customer-facing inventory updates automatically without requiring customers to manually refresh.
Actors
Accepted behavior
Narrow exclusions
The Customer Area is public and anonymous: no login, no account creation, and no gating of browsing, search, filtering, sorting, or phone details. The Admin Area is a separate, password-protected surface reachable only through the Admin Login screen, which requires username/email and password. Authentication and password hashing are handled by the backend; the Android app never stores the admin password as plain text. Authorization is enforced by the backend, not merely by hiding the Admin entry point.
The current delivery horizon covers the complete customer browsing and contact experience, the complete admin inventory management experience, shop settings, real-time synchronization, and the security model. The app is intentionally structured to be scalable so more phones, brands, categories, and features can be added later; such future additions are not part of the current acceptance scope.
Not applicable â no reference directive with content_source authority was supplied.
FR-1 â Customer Home Screen branding and header (explicit) As a Customer, I should see the TechZone logo/name at the top, the shop name TECHZONE, and a subtitle such as "Phones Available Now", so that I immediately know I am in the TechZone shop app.
FR-2 â Customer Home Screen search bar (explicit) As a Customer, I should have a search bar on the home screen, so that I can quickly find phones.
FR-3 â Condition filter buttons (explicit) As a Customer, I should be able to filter by All, Brand New, or Second Hand, so that I can narrow the inventory to the condition I want.
FR-4 â Brand filters (explicit) As a Customer, I should be able to filter by brand â Apple, Samsung, OnePlus, Xiaomi, Vivo, Oppo, Realme, Motorola, Other â so that I can browse phones from the brands I care about.
FR-5 â Available-phone cards (explicit) As a Customer, I should see available phones displayed as attractive cards showing phone image, brand, model name, storage, RAM, condition (Brand New or Second Hand), price, availability status, optional battery health percentage for second-hand iPhones, optional warranty information, and a "View Details" button, so that I can evaluate stock at a glance.
FR-6 â Only Available phones in the customer inventory (explicit) As a Customer, I should see only phones currently marked as Available in the customer inventory by default, so that I am not shown stock that is not for sale.
FR-7 â Phone Details Screen content (explicit) As a Customer, I should see a detailed page when I tap a phone, containing a large phone image/gallery, brand, model, storage, RAM, color, condition, price, battery health (if applicable), warranty, description, date/time when the item was added, and availability status, so that I can make an informed decision.
FR-8 â Contact TechZone button (explicit) As a Customer, I should have a prominent "Contact TechZone" button that opens WhatsApp or the phone dialer, so that I can contact the shop about the phone.
FR-9 â Configurable WhatsApp/phone number (explicit) As a Shop Owner / Staff (Admin), I should be able to configure the WhatsApp/phone number from the Admin Area rather than it being hard-coded, so that the customer contact action always uses the correct number.
FR-10 â Real-time inventory synchronization (explicit) As a Customer, I should see the customer-facing inventory update automatically when the shop owner adds, edits, or deletes a phone, without manually refreshing, so that I always see current stock.
FR-11 â Sold phone disappears from available inventory (explicit) As a Customer, when the shop sells a phone and the admin marks it as Sold/Unavailable, it should immediately disappear from my available inventory, so that I do not pursue stock that is gone.
FR-12 â Separate Admin Login screen (explicit) As a Shop Owner / Staff (Admin), I should have a separate Admin Login screen requiring username/email and password, so that only authorized staff can reach administration.
FR-13 â Customers cannot access inventory management (explicit) As a Shop Owner / Staff (Admin), customers should not be able to access the inventory management functions, so that stock control remains restricted to the shop.
FR-14 â Secure admin authentication and credential storage (explicit) As a Shop Owner / Staff (Admin), the admin section must be protected using proper authentication and authorization, and the admin password must not be stored as plain text inside the Android application, so that credentials remain secure.
FR-15 â Admin Dashboard metrics (explicit) As a Shop Owner / Staff (Admin), I should see total phones, brand-new phones, second-hand phones, available phones, and sold/unavailable phones after logging in, so that I understand the current inventory position.
FR-16 â Admin Dashboard actions (explicit) As a Shop Owner / Staff (Admin), I should have buttons for Add Phone, Edit Phone, Delete Phone, Mark as Sold, Mark as Available, Manage Categories, Shop Settings, and Logout, so that I can perform all inventory operations from one place.
FR-17 â Add Phone form fields (explicit) As a Shop Owner / Staff (Admin), I should have an easy form for adding a phone with brand, model, storage, RAM, color, condition (Brand New or Second Hand), price, original price (optional), battery health (optional), warranty, description, phone images, and availability (Available, Sold, Reserved), so that I can record complete inventory details.
FR-18 â Multiple photo upload (explicit) As a Shop Owner / Staff (Admin), I should be able to upload one or multiple photos for a phone, so that customers can see the actual device.
FR-19 â Required-field validation on Add Phone (explicit) As a Shop Owner / Staff (Admin), required fields must be validated before allowing the phone to be added, so that incomplete inventory records cannot enter the system.
FR-20 â Edit Phone (explicit) As a Shop Owner / Staff (Admin), I should be able to select an existing phone and edit any of its information â price, images, storage/RAM, condition, warranty, availability, and description â so that inventory stays accurate.
FR-21 â Delete Phone with confirmation (explicit) As a Shop Owner / Staff (Admin), I should have a Delete option that shows a confirmation dialog "Are you sure you want to delete this phone?" with Cancel and Delete, so that accidental deletions are prevented.
FR-22 â Soft deletion (explicit) As a Shop Owner / Staff (Admin), soft deletion should be considered in the database so that accidentally deleted inventory can potentially be recovered.
FR-23 â Customer search scope (explicit) As a Customer, search should work by brand, model, storage, and price, so that I can find phones by the attributes I know.
FR-24 â Sorting options (explicit) As a Customer, I should be able to sort by Price: Low to High, Price: High to Low, Newest Added, and Brand, so that I can order results the way I prefer.
FR-25 â Price range filter (explicit) As a Customer, I should have a price range filter, so that I can limit results to my budget.
FR-26 â Shop Settings configuration (explicit) As a Shop Owner / Staff (Admin), I should be able to configure shop name, shop logo, shop address, phone number, WhatsApp number, opening hours, Instagram/social media links, and shop description, so that the customer-facing app reflects the real shop.
FR-27 â Shop Settings appear in the customer app (explicit) As a Customer, the shop settings configured by the admin should appear in the customer-facing app, so that I have accurate shop information and contact details.
FR-28 â Clear status labels (explicit) As a Shop Owner / Staff (Admin), I should use clear status labels â Available, Reserved, Sold â so that inventory status is unambiguous.
FR-29 â Inventory record structure (explicit) As a Shop Owner / Staff (Admin), a phone/inventory record should contain fields similar to id, brand, model, storage, ram, color, condition, price, originalPrice, batteryHealth, warranty, description, images, status, createdAt, and updatedAt, so that inventory data is complete and consistent.
FR-30 â Shop settings record (explicit) As a Shop Owner / Staff (Admin), a shop settings record should exist in the backend, so that shop configuration is stored consistently.
FR-31 â Real-time database synchronization (explicit) As a Shop Owner / Staff (Admin), real-time database synchronization should be used if supported by the chosen backend, so that customer-facing inventory stays current.
FR-32 â Security implementation (explicit) As a Shop Owner / Staff (Admin), the app should implement secure admin authentication, password hashing/authentication handled by the backend, admin-only database permissions, customer read-only access to available inventory, admin-only create/update/delete permissions, secure image storage, session management, and logout functionality, so that the system is secure end to end.
FR-33 â Backend-enforced permissions (explicit) As a Shop Owner / Staff (Admin), the backend must enforce the permissions rather than relying only on hiding the Admin button from customers, so that security does not depend on UI concealment.
FR-34 â Recommended technology stack (explicit) As a Shop Owner / Staff (Admin), the app should be built as a native Android application using Kotlin, Jetpack Compose, Material 3, MVVM architecture, the Repository pattern, and a cloud backend such as Firebase, using Firebase Authentication for admin login, Cloud Firestore for inventory, and Firebase Storage for phone images; if a different backend is chosen, it must maintain the same security and real-time requirements.
FR-35 â Customer flow (explicit) As a Customer, the flow should be Open App â Browse Phones â Search/Filter â View Phone â Contact TechZone, and I should not need to create an account just to browse phones.
FR-36 â Admin flow (explicit) As a Shop Owner / Staff (Admin), the flow should be Admin Login â Dashboard â Add/Edit/Delete/Update Inventory.
FR-37 â Inventory reflects physical shop stock (explicit) As a Shop Owner / Staff (Admin), the inventory must represent the current stock in the physical TechZone shop; when a phone is sold, I should be able to mark it as Sold/Unavailable from the Admin Area, and customers should no longer see it as available.
FR-38 â Scalability (explicit) As a Shop Owner / Staff (Admin), the application should be scalable so more phones, brands, categories, and features can be added later.
FR-39 â Deliverables (explicit) As a Shop Owner / Staff (Admin), the complete Android application should include Customer UI, Admin UI, authentication, database, image upload, inventory management, search and filters, real-time inventory updates, secure admin permissions, shop settings, proper error handling, loading states, empty inventory states, responsive Android UI, and production-ready project structure.
FR-40 â Setup and publishing instructions (explicit) As a Shop Owner / Staff (Admin), clear instructions should be provided for setting up the backend, creating the first admin account, configuring TechZone's phone/WhatsApp number, adding the first phone, building the APK, and publishing the app to Google Play.
FR-41 â First admin account provisioning (required_inference) As a Shop Owner / Staff (Admin), a first admin account must be securely provisioned through the backend before administrative use, so that the accepted admin journey is executable.
FR-42 â Admin returning verification (required_inference) As a Shop Owner / Staff (Admin), returning verification must occur through the Admin Login screen before protected administration is available, so that only verified staff reach the Admin Area.
FR-43 â Backend authorization for mutations (required_inference) As a Shop Owner / Staff (Admin), backend authorization must restrict inventory and shop-setting mutations to authenticated shop owner or staff accounts, so that only authorized staff can change stock.
FR-44 â Customer inventory reads limited to Available (required_inference) As a Customer, customer inventory reads must expose only phones whose status is Available, so that I never see unavailable stock in the default inventory.
FR-45 â Real-time propagation of inventory changes (required_inference) As a Customer, real-time backend synchronization must propagate authoritative inventory changes to the customer-facing inventory, so that my view stays current without manual refresh.
Product context: A walk-in shopper browsing TechZone's current stock on their own Android phone. They may be looking for a sealed brand-new device or a graded second-hand phone, and they want to know what is actually on the shelf right now before visiting or calling.
Primary goal: Find an available phone that matches their needs and budget, and reach TechZone to buy it.
Distinct accepted responsibilities:
Relevant inputs or decisions: search queries; condition and brand filter selections; sort selection; price range; which phone to open; whether to contact the shop.
Interactions with other accepted participants: The Customer's browsing is served by the live inventory maintained by the Shop Owner / Staff (Admin). When the admin marks a phone Sold or Reserved, the Customer's available inventory updates automatically. The Customer's contact action uses the WhatsApp/phone number configured by the admin.
Observable success: The Customer finds an available phone and successfully reaches TechZone through WhatsApp or the dialer.
Product context: The shop owner or staff member who maintains the live inventory behind a password-protected login. They work back-of-house, keeping the app's inventory aligned with the physical stock in the shop.
Primary goal: Ensure the customer-facing inventory always reflects the physical stock in the shop.
Distinct accepted responsibilities:
Relevant inputs or decisions: which phone to add, edit, delete, or re-status; which images to upload; which categories to manage; which shop settings to configure; when a phone has been sold in the physical shop.
Interactions with other accepted participants: The Admin's inventory changes propagate in real time to the Customer's available inventory. The Admin's shop settings â especially the WhatsApp/phone number â drive the Customer's "Contact TechZone" action.
Observable success: The customer-facing inventory always reflects the physical stock in the shop, and customers can reach the shop using the configured contact details.
The creative direction is authoritative for this section. The muse is Virgil Abloh, and the headline concept is "TechZone as a drop, not a catalogue" â the app is the shop window for live stock, and the visual grammar is industrial precision, quoted labels, hazard stripes, and exposed grid lines rather than corporate retail calm.
Color tokens
| Role | Light mode | Dark mode |
|---|---|---|
| Background | #F4F4F2 | #0A0A0A |
| Surface | #FFFFFF | #161616 |
| Text | #0A0A0A | #F4F4F2 |
| Primary | #0A0A0A | #0A0A0A |
| Accent | #FF4D00 | #FF4D00 |
| Muted | #8C8C8C | #6E6E6E |
| Reserved status | #B58900 | #B58900 |
| Sold status | #8C8C8C | #6E6E6E |
Light mode is concrete-grey paper (#F4F4F2) with pure white product cards and near-black ink. Primary is black â used for the wordmark, top bars, and primary buttons, never as a background wash. Safety orange #FF4D00 is the single hot accent: status pills, price, the Contact TechZone button, hazard stripes, and the live-inventory pulse. Muted grey #8C8C8C carries specs metadata (storage, RAM, colour) in small caps. Dark mode inverts to #0A0A0A ground, #161616 surface, #F4F4F2 text, orange unchanged, muted #6E6E6E; the black-on-white cards become white-on-black with the same hairline borders. Ratio: ~70% neutral ground, ~20% black ink blocks, ~10% orange. Orange never carries body text on light ground at small size â it is reserved for large numerals, pills, and buttons where it sits on black or white with 4.5:1+ contrast.
Typography
clamp(40px, 11vw, 96px); section headers 28/22/18; card model name 20; specs labels 11 uppercase tracked; price 24 black; body 15/16; micro-labels 11. Mobile floor for the wordmark is 40px so TECHZONE stays whole at 375px; desktop ceiling 96px.Shape language
#0A0A0A at 12% opacity on light, #F4F4F2 at 14% on dark, plus 2px solid black borders on the primary action buttons.Spacing rhythm
Imagery style
The public entry â the Customer Home Screen â is composed as a drop board, not a catalogue page.
The first screen opens with a full-bleed black block (#0A0A0A) occupying roughly the top 38% of the viewport, with a faint 8px vertical grid rule pattern at 6% white behind it. TECHZONE is set in Archivo Black all-caps at clamp(40px, 11vw, 96px), white, tracking 0.06em, flush left with a 20px gutter, and it is allowed to run to the right edge of the viewport â it is the dominant element and the largest thing on screen. Beneath it, in orange tracked caps at 12px, PHONES AVAILABLE NOW, and next to it a live count rendered as a black pill with an orange square dot and the numeral in Archivo Black 16px, which rolls when inventory changes. A 6px hazard stripe (black/orange 45°) closes the black block and separates it from the grey paper feed. The search field and condition chips sit immediately below the stripe on the grey ground, not inside the black block. No centred headline, no subtext paragraph, no gradient, no button inside the hero â the only action above the fold is scrolling into the feed. At 375px the wordmark wraps to two lines if needed and the live-count pill drops to its own row so nothing is clipped.
The signature moves that carry the concept through the app:
#B58900 = Reserved, #8C8C8C = Sold) and a strikethrough that draws across the model name when an item is marked sold, so the admin's action is legible to customers who had the card open.Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief
prefers-reduced-motion all of the above collapse to instant state changes with no translate and no strike-through animation â the sold state is shown by the grey pill and a static strikethrough. The horizontally scrollable filter rails wrap into two rows instead of scrolling.NFR-1 â Real-time synchronization (explicit) The inventory must be stored in a proper database/cloud backend, and when the shop owner adds, edits, or deletes a phone from the Admin Area, the customer-facing inventory must update automatically. Customers must not be required to manually refresh the app if the backend supports real-time updates. Rationale: the app's core purpose is real-time stock visibility.
NFR-2 â Security (explicit) The app must implement secure admin authentication, password hashing/authentication handled by the backend, admin-only database permissions, customer read-only access to available inventory, admin-only create/update/delete permissions, secure image storage, session management, and logout functionality. The backend must enforce the permissions rather than relying only on hiding the Admin button from customers. Rationale: security is explicitly important and must not depend on UI concealment.
NFR-3 â Credential storage (explicit) The admin password must not be stored as plain text inside the Android application; credentials must be stored securely. Rationale: explicit security constraint.
NFR-4 â Responsive Android UI (explicit) The UI must work well on both small and large Android phones. Rationale: explicit design requirement.
NFR-5 â Light and dark mode (explicit) Both light and dark mode should be included if practical. Rationale: explicit design requirement.
NFR-6 â Error handling, loading states, and empty inventory states (explicit) The app must include proper error handling, loading states, and empty inventory states. Rationale: explicit deliverable.
NFR-7 â Production-ready project structure (explicit) The project must have a production-ready structure. Rationale: explicit deliverable.
NFR-8 â Scalability (explicit) The application must be scalable so more phones, brands, categories, and features can be added later. Rationale: explicit requirement.
NFR-9 â Backend portability (explicit) If a different backend is chosen instead of Firebase, it must maintain the same security and real-time requirements. Rationale: explicit constraint.
NFR-10 â Readable text and controls at every viewport (explicit)
Headlines, wordmarks, labels, numbers, cards' text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Moving and scrollable content may cross the viewport or container edge by design, but every item must become fully readable as it passes; with prefers-reduced-motion it stops and shows whole items. Rationale: explicit readability constraint from the creative direction.
The source specifies the following technology choices, which are preserved exactly:
If a different backend is chosen, it must maintain the same security and real-time requirements.
Presentation defaults [Default â not specified by user]:
Constraints (explicit, binding):
Assumptions (narrow, labeled):
[Assumption] The first admin account is provisioned through the backend before administrative use, as required to make the accepted admin journey executable.[Assumption] Admin returning verification occurs through the Admin Login screen before protected administration is available.[Assumption] Backend authorization restricts inventory and shop-setting mutations to authenticated shop owner or staff accounts.[Assumption] Customer inventory reads expose only phones whose status is Available.[Assumption] Real-time backend synchronization propagates authoritative inventory changes to the customer-facing inventory.[Assumption] Soft deletion is implemented in the database so accidentally deleted inventory can potentially be recovered, as the source asks to "consider" it.[Assumption] Light and dark mode are implemented, as the source asks to include both "if practical".No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!