diaslucia / lotr

Lord of the Rings

View Demo

🔎 About

This website was built with the Lord of the Rings API.

Tools:

• 
• 
• 

🚀 Ejecution

Steps to install and run the project:

1. Clone the project

   git clone https://github.com/diaslucia/lotr.git

2. Open your current directory project

   cd yourProjectDirectory

3. Install the libraries

   npm install

4. Create an account in https://the-one-api.dev/ to get an API KEY

5. Create an .env file to enter your API KEY

   VITE_API_KEY = yourAPIKEY;

6. Ejecute the app (and close it with Ctrl + C)

   npm run dev

📂 Structure

The structure of the files is:

• assets: to store images.
• components: to store all componentes.
• layouts: to store basic structure layout.
• utils: to store sass global styles.

src/
┣ assets/
┃ ┗ images/
┣ components/
┃ ┣ CharactersContainer/
┃ ┣ Footer/
┃ ┣ Home/
┃ ┣ MoviesContainer/
┃ ┣ NavBar/
┃ ┣ Spinner/
┣ hooks/
┃ ┗ useWindowSize/
┣ layout/
┃ ┣ Header/
┃ ┣ Main/
┣ utils/
┃ ┗ sass/

🛠 Libraries

Framer-motion: to animate components.

React Router Dom: To manage navigations and pages.

React Icons: to display icons.

React Paginate: to use paginations in the characters page.

React Spinners: to display spinners while we wait for the API response.

(to Top)