Feature
Customer Storefront
Product catalog, product detail pages, cart flow, checkout, QR payment path, and account pages built with Next.js App Router and React 19.
Project 01 / 2026
Smart PC Store
Lead Developer, Project Manager, Code Reviewer/ Next.js/ Java/ PostgreSQL/ FastAPI/ AI
Year
2026
Role
Lead Developer, Project Manager, Code Reviewer
Technologies
Next.js, Java, PostgreSQL, FastAPI, AI
About this project
Smart PC Store is a complete e-commerce system for PC components and gaming gear. The platform combines a Next.js storefront, a Java Jakarta EE backend, and a Python AI microservice for product advice and price prediction.
Overview
Overview
Smart PC Store was built as a production-style commerce platform for PC components, gaming gear, suppliers, stock movement, and order management. The system is split into focused services: a modern customer/admin frontend, an enterprise Java REST API, and an AI server that enriches the buying experience with market-aware recommendations and price forecasts.
My Role
My Role
Led the project direction, backend architecture, frontend integration, code review, and delivery planning. The work included defining API boundaries, shaping the admin workflows, implementing authentication flows, coordinating AI integration, and keeping the multi-repo system deployable and documented.
Key Features
Key Features
06 Items
Feature
Admin Operations
Admin panel for products, categories, orders, users, suppliers, stock imports, and operational analytics.
Feature
JWT Authentication
Access-token and refresh-token flow with Axios interceptors, silent refresh, and race-condition-safe token rotation.
Feature
Enterprise Backend API
Jakarta EE backend with layered controllers, services, DAOs, DTOs, JPA/Hibernate entities, RBAC, and PostgreSQL persistence.
Feature
AI Shopping Assistant
FastAPI microservice that answers product questions, reads product data, and returns suggested products for the storefront chat widget.
Feature
Price Forecasting
Forecast endpoint that uses supplier quotation history and Markov-style prediction to power 7-day price trend charts.
Tech Stack
Tech Stack
Frontend
Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiTanStack QueryZustandRecharts
Backend
Java 17Jakarta EEHibernatePostgreSQLMavenTomcatJWTDocker
AI Service
PythonFastAPISupabaseOpenAI-compatible APIFPT Cloud AINumPyVercel
Challenge & Solution
The Challenge
The project needed to support both customer shopping flows and internal inventory operations while also connecting a separate AI service to live product and supplier-pricing data. Keeping authentication, admin CRUD, checkout, analytics, and AI responses consistent across three repositories was the main complexity.
The Solution
Separated the system by responsibility: Next.js owns UX and client state, Jakarta EE owns commerce rules and persistence, and FastAPI owns AI chat plus forecasting. The frontend talks to stable domain services, the backend exposes role-aware REST endpoints, and the AI server periodically syncs product and price-history data for grounded recommendations.
Results
Results
04 Metrics
Impact
Repos
3
Impact
Admin Domains
6
Impact
Backend Layers
5
Impact
Forecast Window
7
Lessons
Lessons Learned
01
Multi-repo products need clear ownership boundaries early; otherwise frontend, backend, and AI changes become tightly coupled.
02
Admin workflows are easier to maintain when every domain owns a narrow service, store, and type contract.
03
AI features work better as product infrastructure when they return structured data, not only natural-language answers.
Screenshots
Screenshots
Swipe or use the arrows.
01 / About Page
Informational page about the store, its mission, and the team behind it.
01 / 14
02 / User Cart
Shopping cart interface for managing selected items, quantities, and checkout process.
01 / 14
03 / Product Details
Comprehensive view of a product's specifications, reviews, and availability.
01 / 14
04 / Categories
Browse products by category, with filtering and sorting options.
01 / 14
05 / Home Section 1
Initial view of the homepage with featured products and promotions.
01 / 14
06 / Home Section 2
Secondary view of the homepage with additional featured products and promotions.
01 / 14
07 / My Orders
View and manage your order history and details.
01 / 14
08 / Online Payment
Secure online payment processing for completed orders.
01 / 14
09 / Profile
Manage your account settings and personal information.
01 / 14
10 / Admin Category
Manage product categories in the admin panel.
01 / 14
11 / Admin Dashboard
View and manage the overall store performance and analytics.
01 / 14
12 / Admin Orders Management
View and manage orders in the admin panel.
01 / 14
13 / Admin Products Management
View and manage products in the admin panel.
01 / 14
14 / Admin Suppliers Management
View and manage suppliers in the admin panel.
01 / 14
Links
Related Work
More case studies
03 Cases
Open Source Contributor/TypeScript
Kiro
Contribution to Kiro, an agentic IDE and CLI for spec-driven development, hooks, powers, MCP integrations, and codebase-aware AI workflows.
TypeScriptAIDeveloper Tools
Read case study
Frontend Developer/Next.js
Youth for Change
SDG-focused landing page, learning hub, and Notion-powered blog platform for the Youth for Change initiative at UD-UFLS.
Next.jsTypeScriptNotion
Read case study
Fullstack Developer/Next.js
MovieOn
Movie browsing interface built with Next.js 15, Supabase, Tailwind CSS v4, semantic theme tokens, and accessible UI primitives.
Next.jsSupabaseTypeScript
Read case study