Code Monkey home page Code Monkey logo

brunowzz / rick-and-morty Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 28.65 MB

O projeto "Rick and Morty Info" é uma aplicação desenvolvida em React com o objetivo de explorar e aprender a consumir APIs. Ele oferece uma interface intuitiva para visualizar informações sobre personagens, episódios e localizações da famosa série animada "Rick and Morty".

Home Page: https://randminfo.netlify.app

JavaScript 1.39% HTML 4.56% TypeScript 69.61% Sass 24.44%

rick-and-morty's Introduction

Rick and Morty Info

Imagem 5

🔎 Obtenha as informações da série Rick and Morty.

📄 Projeto de Estudo: Rick and Morty Info.

Visão Geral: Este projeto foi desenvolvido com o objetivo de aprender a consumir APIs utilizando React, Axios e TypeScript. Ele oferece uma interface para explorar informações sobre personagens, episódios e localizações da série animada "Rick and Morty".

Requisitos Funcionais:

  • Exibir informações resumidas de personagens, episódios e localizações.
  • Permitir acesso detalhado a informações específicas, como perfis de personagens e detalhes de episódios.

Estrutura de pastas:

  • .github: Esta pasta é utilizada para armazenar recursos relacionados à documentação, como imagens, gifs e outros arquivos necessários para a documentação do projeto.

  • assets: Este diretório é utilizado para armazenar recursos estáticos do projeto, como imagens, ícones, fontes e outros arquivos que serão utilizados na interface do usuário.

  • components: Aqui estão localizados os componentes reutilizáveis do React. São unidades independentes de interface do usuário que podem ser utilizadas em várias partes do projeto.

  • layout: Neste diretório estão os componentes de layout compartilhados entre várias páginas ou componentes do aplicativo. São responsáveis por definir a estrutura básica da página.

  • pages: Esta pasta contém as páginas principais do aplicativo. Cada arquivo nesta pasta representa uma página diferente do aplicativo.

  • routes: Aqui são definidas e organizadas as rotas da aplicação. Este diretório contém os arquivos que definem as rotas e o roteamento do aplicativo.

  • services: Este diretório agrupa partes relacionadas à integração com a API. Aqui são armazenados os arquivos que contêm funções e classes para consumir e interagir com a API do Rick and Morty.

  • styles: Neste diretório ficam os arquivos relacionados à estilização do projeto. Aqui são armazenados arquivos Sass, onde podem ser encontrados mixins, variáveis e estilos globais utilizados em todo o projeto.

📁 Pages

  • Home: Apresenta informações resumidas sobre personagens, episódios e localizações.
  • Character: Exibe uma lista de todos os personagens da série.
  • Character/:id: Mostra informações detalhadas de um personagem específico, incluindo foto de perfil e nome.
  • Episodes: Lista todos os episódios da série.
  • Episodes/:id: Exibe informações detalhadas de um episódio específico.
  • Locations: Apresenta todas as localizações da série, como planetas e cidades.
  • Locations/:id: Mostra informações detalhadas sobre uma localização específica.

📁 Screens

Imagem 5 Imagem 6 Imagem 7 Imagem 7

🚀 Tecnologias

✅ Requisitos

Antes de iniciar 🏁, certifique-se de ter o Git e o Node instalados em sua máquina.

🏁 Iniciar

#  Clone este projeto
$ git clone https://github.com/brunowzz/rick-and-morty

# Acessar
$ cd rick-and-morty
# Instalar dependências
$ yarn
# Execute o projeto
$ yarn dev
# O servidor será inicializado em <http://localhost:5173>

🤝 Colaborador

Foto do Kayke Fujinaka no GitHub
Bruno Vinícius

📝 Licença

Este projeto está sob licença. Consulte o arquivo LICENSE para obter mais detalhes.

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.