Studio Ghibli Shopping Cart is an e-commerce web application built using React and designed to allow users to browse, search and purchase films from the world of Studio Ghibli.
Building this Studio Ghibli Shopping Cart application was a great learning experience for me. I had the opportunity to dive deeper into React and learn about React Router, which allowed me to create a seamless navigation experience for users.
I also gained a better understanding of building an e-commerce website, including concepts such as creating a catalog of items, adding items to a cart, and calculating the total cost of the items in the cart.
Overall, this project was a great opportunity for me to improve my skills in React and gain experience in building e-commerce websites.
- Catalog of Studio Ghibli films: The main feature of the application is a catalog of Studio Ghibli films. Users can browse through the catalog to view the available items and learn more about them.
- Add items to cart and view total cost: Users can add items to their cart and view the total cost at any time.
- React Router for seamless navigation: The application uses React Router to handle client-side routing, allowing for a smooth and seamless navigation experience for users.
- Search bar functionality: The application includes a search bar feature, which allows users to quickly and easily find specific items in the catalog. Users can enter keywords related to the item they are looking for, and the application will display a list of relevant results. This feature makes it easy for users to find the specific items they are looking for, and can help them save time when browsing the catalog.
- Retrieving data from an API: The application retrieves data for the items in the catalog from an external API. The data includes information such as item name, price, and image URL. However, the API was hosted on Heroku, which no longer supports free hosting for web applications. As a result, the API is no longer available and the data is not being updated. In order to continue to use the application, an alternative data source will need to be found.
- React
- React Router Dom
- Jest
- HTML
- CSS
- Git
- Sass
- Clone this Repo
- Run npm install and npm run start to start the dev environment
- The application runs in http://localhost:3000/.
- Thanks to Studio Ghibli for creating such an iconic and beloved world of animation.
- API used: https://github.com/janaipakos/ghibliapi
Studio Ghibli is a registered trademark of its respective owners. No copyright infringement intended. This is just a learning project. All rights to all pictures, products and names on this website belong to the respective publishers of the films displayed. This page is not being used commercially. If you are an owner of the copyrighted material, please let me know if you have any issues with this page and I'll take it down immediately.