- 🟢 Status: Completed (frontend MVP ready)
- 🌐 Live Demo: tokokopistaria.pages.dev
- 🚀 Status: Active development and iteration
- 📅 Release Timeline: Backend & payment gateway integration planned for 2025
🎯 Business Context & Goals
- Help a local coffee brand move from purely offline and social-media sales to structured online orders.
- Provide a fast, modern storefront that matches the brand’s identity and supports future growth.
- Validate product-market fit for an e-commerce experience before investing in full backend build-out.
🧩 My Role & Responsibilities
- Acted as Product Engineer, owning UX, architecture, and implementation of the web frontend.
- Translated business requirements (menu, promotions, checkout) into flows and UI components.
- Prepared the codebase for future integration with APIs, payment gateways, and admin tools.
📊 Impact & Outcomes
- Delivered a production-ready frontend MVP in three weeks, ready to plug into backend services.
- Dramatically improved the structure and speed of the ordering experience versus ad-hoc chats/DM.
- Established a reusable design system and architecture that can scale into a full commerce platform.
📖 Problem & Solution
Staria Coffee previously relied only on offline sales and social media. The ordering process was slow, unstructured, and difficult to scale.
The solution I built: a modern web-based e-commerce platform that provides:
- An interactive product catalog
- Fast checkout with order validation
- Shopping cart with persistent state
With this platform, Staria Coffee can expand into the online market, increase repeat orders, and prepare the foundation for future mobile app development.
💻 Tech Stack
- Frontend: React 18.2 + Vite
- Styling: TailwindCSS
- UI Components: Radix UI + custom component library
- Animations: Framer Motion
- State Management: React Context API
- Build Tools: Vite, PostCSS, Autoprefixer
- Testing: Unit, component, and integration testing
- Version Control: Git workflow, ESLint, Prettier
🤖 AI-Assisted Development
- Leveraged AI coding tools to speed up boilerplate generation, UI components, and documentation.
- Focused my time on product architecture, UX, and feature validation instead of repetitive coding tasks.
- Demonstrated how AI can serve as a productivity co-pilot for Product Engineers.
🗒️ Best Practices
- Modular component structure & reusable hooks
- Clean code principles with linting & auto-formatting
- Accessibility-first design
- Performance optimization (code splitting, lazy loading, image optimization)
🗒️ Key Features
- Dynamic product catalog with filtering
- Shopping cart with local storage persistence
- Checkout flow with validation & order confirmation
- Brutalist-inspired design system
- Fully responsive layouts across devices
🔧 Engineering Challenges & Solutions
- State Persistence: Solved with local storage sync + React Context
- Performance & Animations: Optimized rendering with React hooks
- Responsive Design: TailwindCSS breakpoints + custom components
📊 Impact
- Performance: First Contentful Paint < 1.5s, TTI < 2s, Lighthouse Score 90+
- User Experience: Checkout flow 2x faster compared to the initial prototype
- Scalability: Ready for backend and payment gateway integration
📝 Project Metrics
- Timeline: 3 Weeks (Jul – Aug 2025)
- Role: Product Engineer (AI-assisted)
- Team Size: Solo Project
🚀 Future Improvements
- Backend API integration (Node.js/Laravel)
- Authentication & user management
- Payment gateway integration
- Admin dashboard
- Analytics & reporting system