zack hoang

Scope

Overview

MangaShop is a mock e-commerce app that simulates a real shopping app that you would find anywhere. This project aim to encapsulates the key elements of what is possible when building a front end project with React.

Tools

• Vite: scaffolding a React project
• React Router: page navigation
• CSS Modules: locally scoped CSS modules to style each component
• Fetch API: making HTTP requests
• Jikan API: collection of mangas data

Features

• SPA-like Navigation: eliminate the need of routing to multiple HTML files with React Router's routing
• Multiple product pages data fetching: Using Jikan's API query end-points and Fetch API to fetch new data as user navigate to the next or previous pages as user shops
• Adding/Removing Items Into Cart: users can add/remove different numbers of mangas and the cart will calculate the total sum

Challenges

• State Management: The component hierarchy for this project is quite simple: one main App component hosts the navigation bar and an Outlet component that renders the appropriate component depending on the route. Each states used to exists locally in each component. However, this quickly becomes a problem when states need to be shared across different routes. The quickest solution in this case is the host all states in the App component (state lifting) and pass the states down to child components with the context prop and access them with useOutletContext()


• Strict Mode: causes the targeted component to re-render one extra time to catch any impure re-rendering. However, this has also caused my component to fetch the API one more time, which exceeded the rate limit of Jikan API. Removing strict mode resolved this issue swiftly, but for future projects I will look into this problem more critical.

Takeaway

Overall, I think this was close to what I would call a React capstone project as of now. This project made me realize how a state manger such as Redux can come in handy and managing API fetch is important if we do not want performance overhead in a React app.