This project is a frontend-focused clone of the Shopee user-facing e-commerce experience, built to practice real-world frontend architecture, performance optimization, and scalable UI patterns.
The goal of this project is not to fully replicate Shopee’s backend system, but to demonstrate how a modern e-commerce frontend handles:
- Authentication
- Product listing & filtering
- URL-driven state
- Performance and SEO concerns
- Testing and maintainability
- Build a production-like e-commerce frontend
- Practice state management for asynchronous data
- Apply clean architecture and scalable folder structure
- Improve performance, SEO, and code quality
- Simulate real-world frontend responsibilities
- JWT-based authentication
- Automatic access token refresh
- Separation of public and private routes
- Product listing page
- Product detail page
- Smart pagination
- Filter & search by keyword, category, price
- URL-based state (
query params) for:- Shareable links
- Browser navigation support
- Asynchronous server state managed with React Query
- Client state synced with URL
- Optimistic UI updates where applicable
- Form handling with React Hook Form
- Schema-based validation using Yup
- Clear error messages and UX-friendly validation
- Code splitting with dynamic imports
- Bundle size analysis and optimization
- Lazy loading for heavy components
- Efficient re-render control with memoization
- Dynamic metadata management using React Helmet
- SEO-friendly page titles and descriptions
- Semantic HTML structure
- Unit testing with Vitest
- Component-driven development with Storybook
- Linting with ESLint
- Code formatting with Prettier
- React
- TypeScript
- Vite
- Tailwind CSS
- React Router
- React Query
- React Hook Form
- Yup
- React Helmet
- Vitest (Unit Testing)
- Storybook (Component Management)
- ESLint & Prettier
- Designing a real-world e-commerce frontend flow
- Managing complex UI state through URL synchronization
- Handling authentication and token refresh safely
- Improving perceived performance with loading strategies
- Writing testable and reusable UI components
- Understanding how SEO concerns apply to SPA applications
If I had more time, I would:
- Add E2E testing for critical flows
- Improve accessibility (ARIA, keyboard navigation)
- Introduce server-side rendering (SSR) or meta-framework integration
- Implement advanced caching strategies
This project focuses on frontend engineering quality, not visual cloning pixel-by-pixel. The emphasis is on:
- Architecture
- State management
- Performance
- Code maintainability
Nguyễn Thành Thuận
Frontend Developer
Skills: React • TypeScript • UI Architecture • Performance Optimization