Marvel Comics Website 🦸

🖥️ About the App

This is a website about the Marvel Comics using their API whose full documentation can be find on their oficial site.

The motivation for creating this project was to practice the basics of React Query, which is a powerful state management library and also the features of Next.js Version 13, such as server and client components, file-system based router, dynamic routes, error handling, fetching data etc.

⏹️ Demonstration

Home page

Comics page

Comic details page

Character details page

---

✨ Features

• List all Marvel comics and characters 👊.
• Filter comics by "category" (comics, series or events).
• Filter comics by name.
• Add infinite scroll to comics and characters list.
• Filter characters by name.
• Display details page of a comic/character by clicking on one of them.
• On this page list related comics or characters to a specific comic or character.
• Add pagination to related comics/characters list.
• Filter related comics by "category" (comics, series or events).
• Filter related comics/characters by name.
• [] Show variants comics of a specific comic (if it has at least one).

---

🛠️ Technologies

This app was developed using the following technologies:

• ReactJs

• Next.js

• TypeScript

• Framer Motion

• TailwindCSS

• RadixUi

• Lottie

---

🚀 How to run this app?

Prerequisites

You will need a package manager like npm or yarn to run the application.

📟 Running the application

# Clone this repo
$ git clone https://github.com/JohnPetros/marvel-comics-website.git

# Access the app's folder
$ cd marvel-comics-website

# Install the dependecies
$ npm install or yarn add

# Set the env viarables in .env.local
BASE_URL=
PUBLIC_KEY=
HASH=
TIMESTAMP=

# Run the app in development mode
$ npm run dev or yarn dev

# Probably the app will runnig on http://localhost:3000

---

More about the env variables can be found here

⚙️ Deploy

This app was deployed by Vercel. This means you can access the running app by accessing this link.

---

💪 How to contribute

# Fork this repo
$ git clone https://github.com/JohnPetros/marvel-comics-website.git

# Create a branch with your feature
$ git checkout -b my-feature

# Commit your changes:
$ git commit -m 'feat: My new feature'

# Push to your branch:
$ git push origin my-feature

You also can open a new issue report. It will be an honor to be able to help you and improve this application as well.

---

📝 License

This app is under MIT lincese. See the License file for more details.

---

Made with 💜 by John Petros 👋🏻