https://github.com/williangiacomelli/origamidreactchallenge
https://github.com/williangiacomelli/origamidreactchallenge
javascript reactjs
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/williangiacomelli/origamidreactchallenge
- Owner: WillianGiacomelli
- Created: 2023-08-15T14:38:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-15T14:43:35.000Z (about 2 years ago)
- Last Synced: 2025-01-15T21:57:10.323Z (9 months ago)
- Topics: javascript, reactjs
- Language: JavaScript
- Homepage:
- Size: 5.66 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Desafio React - Minha Solução
Este projeto apresenta a minha solução para o desafio de Rotas (Routes) proposto no curso de React Completo da renomada plataforma Origamid.
## Objetivo
O principal objetivo deste desafio era aplicar os conceitos fundamentais do React, incluindo componentização, utilização de hooks e criação de rotas. Além disso, o desafio também envolvia a estilização dos componentes utilizando CSS.
## Descrição do Desafio
O desafio consistia em consultar uma API de produtos e exibi-los na página inicial da aplicação. Ao selecionar um dos produtos exibidos, uma nova requisição à API era feita para recuperar as informações específicas daquele produto. A interface gráfica para a exibição dos produtos e suas informações também era parte do desafio, e as especificações foram fornecidas como parte do contexto.
## 🚀Tecnologias Utilizadas
- [ReactJS](https://react.dev/): A biblioteca JavaScript utilizada para construir a interface do usuário de forma eficiente e dinâmica.
- [ReactRouter](https://reactrouter.com/en/main): Utilizado para criar e gerenciar as rotas da aplicação, permitindo a navegação entre diferentes páginas.
- [CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS): Utilizado para estilizar os componentes e criar uma experiência visual agradável para o usuário.
- [API](https://ranekapi.origamid.dev/json/api/produto): Uma API externa foi consumida para obter as informações dos produtos a serem exibidos na aplicação.
## Funcionalidades
🔹Listagem de Produtos: A página inicial exibe uma lista de produtos obtidos através da API. Cada produto é apresentado com informações relevantes, como nome, preço e imagem ilustrativa.
🔹Visualização Detalhada: Ao clicar em um produto específico da lista, a aplicação realiza uma nova requisição à API para buscar as informações detalhadas daquele produto. Uma nova página é renderizada para exibir esses detalhes.
🔹Navegação: O React Router foi utilizado para criar uma navegação fluida entre a página inicial e a página de detalhes do produto. Isso proporciona uma experiência de usuário mais intuitiva.
## Pré-visualização
Aqui está uma pré-visualização do projeto em execução:
## ❓ Como Executar o Projeto
Certifique-se de ter o Node.js instalado em sua máquina.
Clone este repositório para o seu ambiente local.
Navegue até o diretório do projeto e execute o comando npm install para instalar as dependências.
Após a instalação das dependências, execute o comando npm run dev para iniciar a aplicação.
## Conclusão
Esse projeto representou uma oportunidade para aplicar os conhecimentos adquiridos no curso de React Completo da Origamid. Através da criação deste projeto, pude consolidar meu entendimento sobre componentização, hooks, rotas e estilização com CSS.