https://github.com/joaoplgaspar/animerank-react

Site para descobrir animes ou rankear seus animes preferidos. Sendo desenvolvido com React JS com a API ANILIST.
https://github.com/joaoplgaspar/animerank-react

alura anilist-api animes api context context-api html html5 javascript rank react reactjs reactrouterdom sass scss singlepageapplication spa vitrinedev

Last synced: 3 months ago
JSON representation

Site para descobrir animes ou rankear seus animes preferidos. Sendo desenvolvido com React JS com a API ANILIST.

• Host: GitHub
• URL: https://github.com/joaoplgaspar/animerank-react
• Owner: joaoplgaspar
• Created: 2023-08-01T17:53:10.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-01T19:20:45.000Z (almost 2 years ago)
• Last Synced: 2025-01-22T17:27:00.804Z (4 months ago)
• Topics: alura, anilist-api, animes, api, context, context-api, html, html5, javascript, rank, react, reactjs, reactrouterdom, sass, scss, singlepageapplication, spa, vitrinedev
• Language: JavaScript
• Homepage: https://animerank-react.vercel.app
• Size: 7.14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
  AnimeRank - ReactJS 


![Static Badge](https://img.shields.io/badge/Status-_Em%20Desenvolvimento-yellow?style=for-the-badge)

Site para descobrir animes ou rankear seus animes preferidos. Sendo desenvolvido com React JS com a API ANILIST.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **AnimeRank REACTJS**

| :label: Tecnologias | react, html5, css3, javascript

| :rocket: URL         | https://animerank-react.vercel.app





  





## Resumo do projeto

O AnimeRank é um projeto que tem como propósito descobrir e rankear animes pelos usuário, que são salvos localmente no seu computador e dessa maneira poder compartilhar ao mundo seu próprio rank ou manter para si mesmo como forma de recordação de seu histórico. O projeto foi iniciado em apenas HTML, SCSS e Javascript, mas com a proporção do projeto decidi utilizar o react como forma de estudo e aprendizado para a linguagem, priorizando a reutilização de componentes e estilos, novas funcionalidades e entre outros. Utilização como Single Page Application (SPA) com React router dom, contextos, localStorage e manipulação de API

![Imagem AnimeRank](https://github.com/joaoplgaspar/animeRank-React/assets/130015259/9f077a68-3c24-44df-abb7-2f8abb64e332)

# :hammer: Funcionalidades do projeto

- `Funcionalidade 1`: Ver informações do anime, como descrição, titulo e popularidade pelo card

- `Funcionalidade 2`: Adicionar e remover animes da sua lista de animes

  ![AnimeRank Funcionalidades GIF](https://github.com/joaoplgaspar/animeRank-React/assets/130015259/be71b3bb-b444-463f-adb5-dec4c10f4ae7)

## ✔️ Técnicas e tecnologias utilizadas

- ``ReactJS, Html5, Sass``

- ``Manipulação do estado do objeto com useState``

- ``Single Page Application (SPA) com React Router Dom``

- ``Contextos com useContext``

- ``localStorage``

- ``Manipulação de entrega e recebimento de dados de uma API``

# 🛠️ Abrir e rodar o projeto

**Utilize `npm install` dentro da pasta do projeto para baixar suas pendências**

**A seguir `npm start` para iniciar o projeto**

## API por ANILIST