Run Locally

Move into the root directory and run npm install

Live demo

Here is the live demo of the project hosted on Vercel. https://got-app-five.vercel.app/

About Project

This is a small Game of Thrones themed site which primarily uses the open API provided by https://anapioficeandfire.com

Preview

Tech-Stack

React
Redux-toolkit

External libraries

react-toastify
react-hooks-use-modal

Features and pages

Homescreen with the GOT background video and menubar.
Explore page with a responsive gallery of all the major houses. After expanding the house you can click on the house name to fetch data related to that particular house from the API and display in on a modal screen.
Shop page with a tribute to the author in the 1st section and in the 2nd section a list of books fetched from the API and option to add them in your cart.
Cart page, which is opened after clicking on the shopping cart icon on the shop page. Here there are options to increase and decrease the quantity, delete an item from cart and clear the cart. The product quantities and total value is also displayed on the right.

Note

All the pictures and the video used in the site are static and NOT provided by the API.

Folder Structure

The index.html fie is stored in the public folder.
All the code is stored inside the src folder.
Static files are stored in src/assets
All the navigable pages are in src/pages
Individual components are stored in src/components
All the JS files related to Redux-toolkit is in src/slices
The routes are defined in the src/App.js
Since it was a design heavy project, all the CSS files associated with their corresponding pages or components are kept in the same folder wher the particular component/page is.