This project is my rendition of the B2W Challenge. Its objective is to create an e-commerce storefront for pokémon.
Live demo: https://pokestore-guswillemann.vercel.app/
Most of the pokémon data used in the project are available on the pokéApi. The missing data (needed for this project) was the pokémon's price, so I randomly generated it after fetching the data from the API.
- Products list
- User cart
- Cart summary
- Two storefronts for different Pokémon types.
- Search bar to filter Pokémon
- Checkout button, restarting the purchase data
- Checkout Modal.
- Save the cart data so it will not be lost on a page refresh.
B2W provides a wireframe for the storefront:
Since the challenge objective was to create multiple storefronts, I used the home page to display the available stores.
It has stores for Fire, Grass, Rock, and Water Pokémon:
The store pages are implementations of the provided wireframe.
On mobile, the user cart is a collapsable panel.
The storefronts follow the same layout. So I created the StoreScreen Component to handle the creation of the pages:
export default function StorePage({ products, cartListCookie }) {
return (
<StoreScreen
products={products}
cartListCookie={cartListCookie}
storeType={storeType}
theme={theme}
/>
);
}Component props:
- theme: an object with the theme values;
- products: an array with the pokémon data;
- cardListCookie: the cookie with the user cart data;
- storeType: the name of the store (based on the pokémon types).
The user cart data is saved in cookies for each path (e.g. '/fire'; '/grass'; etc.), thus having a unique cart for each storefront.