Giter Club home page Giter Club logo

johnftitor / anime-list Goto Github PK

View Code? Open in Web Editor NEW
17.0 1.0 1.0 59.55 MB

This website was built using React and Redux. The main objective was to fetch data from an external API using the thunk middleware within the redux store, holding different states for each part of the app and filtering data based on user parameters.

Home Page: https://jfanime-list.netlify.app/

HTML 8.33% JavaScript 68.44% SCSS 23.23%
react react-redux javascript scss api jest

anime-list's Introduction

#

Anime List

This website was built using React and Redux. The main objective was to fetch data from the Jikan API using the thunk middleware within the redux store, holding different states for each part of the app and filtering data based on user parameters.

Desktop Preview

Desktop Preview

Mobile Preview

Mobile Preview

Have you ever felt like you wanted to watch a new Anime, but nothing seemed to catch your attention? No need to worry anymore! Here's a short but concise list of the 50 most scored animes for 5 types (Making a total of 250 Animes!) from which you can pick one you'll like to see. Additionally, you can check the list type to enjoy the best tracks used in the Anime industry! If you enjoy the Japanese animation industry, then you'll enjoy this fan page.

Live Version

Netlify

Built With

  • HTML/SCSS and JavaScript
  • React Framework, Redux, Redux Toolkit
  • Jest

Getting Started

To get a local copy up and running follow these simple example steps.

  • Clone this repository with git clone[email protected]:JohnFTitor/anime-list.git using your terminal or command line.
  • Change to the project directory by entering :
    cd anime-list in the terminal

Prerequisites

You need to make sure to have installed the latest version of Node.js and npm on your computer.

Setup

You can clone this repository or simply download the files as a .zip If you want to set up a personal repository based on this one, you can as well fork it.

Install

After clone it and before working on it, you have to run npm install so that all the dependencies of the project get downloaded in your pc locally. Such dependencies include React app and linters checks, for which you have to install the files following the wget commands inside linters.yml file.

Usage

You're free to use this project however you like it for educational purposes. Just keep in mind the acknowledgment described below

To work on the project, run npm start in your terminal to deploy a live version of the development. This works in watch mode so it automatically reloads any need change you make to the files.

Run linters checks

Linter Checks are automatically run with Github actions when there's a pull request. If you want to run them locally, remember to have the config file in the root of the local project.

Testing

Run npm test to check prepared test cases related to the website functionality simulating user interaction.

Deployment

Netlify is set to automatically deploy the production branch (main branch) of this project, so you don't need to worry about it. Heroku is manually deployed by our team whenever required. That is, when the main branch gets updated.

Authors

👤 Andrés Felipe Arroyave Naranjo

Acknowledgments

Web Design

The template style guidelines such as the layout distribution and selected fonts for the whole project were designed by Nelson Sakwa on Behance. This project worked based on it, selecting new colors and changing the nature of the content.

Check Nelson's page for more amazing GUI and Graphic designs!

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

anime-list's People

Contributors

johnftitor avatar

Stargazers

Richmond Adu-Kyere avatar Soufiane Boursen avatar Anuar Shaidenov avatar Mostafa Ahangarha avatar Souad El Mansouri avatar Awais Amjed avatar eduardosancho avatar Judá Teixeira avatar Melanie Sigrid Arellano Baratto avatar Reem janina  avatar Leonardo Goss avatar Roberto Andres Condezo Monge avatar Ciragane Nicole avatar Lynette Acholah avatar David Vergaray avatar Kyrillos Hany avatar Zeeshan Haider avatar

Watchers

 avatar

Forkers

jrosario19

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.