Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/onda-style


https://github.com/epiled/onda-style

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

# 🍕🍷 Aluroni 2 Rotas

Projeto do curso React: conhecendo a biblioteca React Router da Alura, curso ministrado pelo instrutoro Luiz Fernando Ribeiro.

| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Aluroni 2 Rotas**
| :label: Tecnologias | html, css, js, sass, css modules, node, typescript, react

![thumb-aluroni-2](https://github.com/Epiled/aluroni-2-router/assets/55258483/4be912b8-cf45-4a92-9431-1e4e8474ac89#vitrinedev)

📃 Detalhes do projeto

Neste projeto, foram desenvolvidas diversas páginas para o restaurante Aluroni, incluindo um cardápio detalhado com informações sobre seus pratos, além de filtros de busca e ordenação. Também foi implementada uma lógica para exibir uma página de erro caso o usuário acesse uma URL que não exista.

Um ESLint foi configurado para garantir o padrão e a qualidade do código.

O código foi desenvolvido em React com TypeScript e estilizado usando CSS Modules e Sass.

![Badge](https://img.shields.io/github/last-commit/Epiled/aluroni-2-router?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/code-size/Epiled/aluroni-2-router?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/count/Epiled/aluroni-2-router?style=for-the-badge)
![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)
![Bagde](https://img.shields.io/github/v/release/Epiled/aluroni-2-router?style=for-the-badge)
![Bagde](https://img.shields.io/github/license/Epiled/aluroni-2-router?style=for-the-badge)

![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)
![Badge](https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![Badge](https://img.shields.io/badge/-CSS%20Modules-000000?style=for-the-badge&logo=cssmodules&logoColor=white)
![Badge](https://img.shields.io/badge/-Typescript-3178C6?style=for-the-badge&logo=json&logoColor=white)
![Badge](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black)

📑 Tabela de Conteúdos

* [Detalhes do projeto](#detalhes-do-projeto)
* [Tópicos Desenvolvidos](#topicos-curso)
* [Demonstração](#demonstracao)
- [Início](#inicio)
- [Cardapio](#cardapio)
- [Sobre](#sobre)
- [Prato](#prato)
- [Not Found 404](#notFound404)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)

👩‍🏫 Tópicos desenvolvidos

* Saiba como refatorar um projeto utilizando ESLint
* Desenvolva um código escalável, priorizando um código limpo e fácil de entender
* Utilize o pacote react-router-dom de forma simples e prática, aprendendo todos os conceitos principais da biblioteca
* Descubra como a biblioteca se integra com o navegador e utiliza de coisas nativas para mudar as rotas e compartilhar estados
* Crie telas navegando entre elas de diversas formas diferentes e reaproveite componentes eles elas
* Entenda sobre nested routes e como criá-las para reaproveitar código e resolver problemas

👀 Demonstração

Início

https://github.com/Epiled/aluroni-2-router/assets/55258483/65004157-72ab-4979-9542-c64583196d21

https://github.com/Epiled/aluroni-2-router/assets/55258483/9beeb7ab-0f8d-4b8a-b5a1-8b3e03c94286

Cardapio

https://github.com/Epiled/aluroni-2-router/assets/55258483/a55b9681-7434-47e8-9db8-b5c2b6745e15

https://github.com/Epiled/aluroni-2-router/assets/55258483/c50e4d65-c10c-4187-a3bb-c15859ff1c96

Sobre

https://github.com/Epiled/aluroni-2-router/assets/55258483/6f1861fa-62e5-4c31-80db-842357ac5fa9

https://github.com/Epiled/aluroni-2-router/assets/55258483/f2fa2ad6-b50a-4165-9b8b-27e29993d50b

Prato

https://github.com/Epiled/aluroni-2-router/assets/55258483/00c2ebad-8702-49d6-8a90-633009b6bb9a

https://github.com/Epiled/aluroni-2-router/assets/55258483/4d314941-8df8-4953-ab97-025c8fa48fb5

Not Found 404

https://github.com/Epiled/aluroni-2-router/assets/55258483/dcab9311-a639-42a6-b135-7ce38aa8ea75

https://github.com/Epiled/aluroni-2-router/assets/55258483/a74bbc06-a447-4f2e-8177-1df4c0e20138

🚨 Pré-requisito



  • Node

⚙ Instalação

```
1. git clone https://github.com/Epiled/aluroni-2-router.git
2. cd aluroni-2-router
3. npm install
```

👩‍🏫 Como usar

```
1. npm start
2. Caso a url não abra sozinha acesse através deste caminho http://localhost:3000/
```

🛠 Tecnologias

As seguintes tecnologias foram usadas na construção deste projeto:

👨‍💻 Autor

![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)


Felipe De Andrade

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)
[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)
[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)