A single-page eCommerce web application built with React 19, designed to practice and apply modern front-end development concepts, state management, routing, and asynchronous data handling.
The application includes multiple views and interactive features, focusing on user experience, performance, and clean component architecture.
Client-side navigation was implemented using React Router, providing multiple routes and views, including:
- Home
- Products
- Product detail
- Shopping cart
- Login
- User profile (protected route)
The profile page is protected and redirects unauthenticated users to the login view.
Authentication & Protected Routes
A login form was implemented to authenticate users and manage access control.
Authentication logic ensures that restricted routes are only accessible to logged-in users, improving application security and user flow.
Data Fetching & Error Handling
The application integrates with an external API to retrieve product and user data.
Data fetching was handled using @tanstack/react-query, leveraging caching and request management.
Error handling and loading states were implemented using React Error Boundary and Suspense, providing a smooth and controlled user experience during asynchronous operations.
Products, Search & Content Rendering
Product data is dynamically fetched from an API and rendered across multiple views.
A product search feature was implemented to filter results based on user input.
Since some API responses return HTML content, dangerouslySetInnerHTML was used responsibly to render formatted product descriptions.
State Management & Performance
Shared state across components was managed using React Context, enabling efficient data sharing without excessive prop drilling.
The useTransition hook was used to mark non-urgent state updates, improving UI responsiveness during search and data updates.
Custom hooks were created to encapsulate reusable logic and improve code maintainability.
Tech Stack
- React 19
- JSX
- React Router
- @tanstack/react-query
- React Suspense
- react-error-boundary
- Context API
- Custom Hooks