Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epiled/aluroni
🍕 Página de cardápio do restaurante Aluroni 🍕
https://github.com/epiled/aluroni
css css-modules html react sass typescript
Last synced: about 1 month ago
JSON representation
🍕 Página de cardápio do restaurante Aluroni 🍕
- Host: GitHub
- URL: https://github.com/epiled/aluroni
- Owner: Epiled
- License: mit
- Created: 2023-11-02T05:42:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-07T16:16:53.000Z (12 months ago)
- Last Synced: 2024-01-07T17:43:09.815Z (12 months ago)
- Topics: css, css-modules, html, react, sass, typescript
- Language: TypeScript
- Homepage: https://epiled.github.io/aluroni/
- Size: 2.31 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍕 Aluroni
Projeto do curso React: lidando com arquivos estáticos da Alura, curso ministrado pelo instrutoro Luiz Fernando Ribeiro.
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Aluroni**
| :label: Tecnologias | html, css, js, sass, css modules, node, typescript, react
📃 Detalhes do projeto
Neste projeto, foi desenvolvida uma página de cardápio para o restaurante Aluroni, que inclui filtros de busca, opções de ordenação e um campo de busca.
O código foi desenvolvido em React com TypeScript e estilizado usando CSS Modules e Sass.
📑 Tabela de Conteúdos
* [Detalhes do projeto](#detalhes-do-projeto)
* [Tópicos Desenvolvidos](#topicos-curso)
* [Demonstração](#demonstracao)
- [Home](#home)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)
👩🏫 Tópicos desenvolvidos
* Crie um projeto do zero com Create React App
* Aprenda a utilizar o normalize.css para resetar estilos padrões de navegadores
* Configure absolute imports para não precisar mais importar arquivos com vários níveis ('../../../')
* Aprenda boas práticas em CSS como criar variáveis, criar arquivos para estas variáveis e para breakpoints de media-queries
* Utilize o pacote classnames para poder utilizar o CSS Modules sem precisar concatenar um monte de estilos CSS e lidar com estilos condicionais
* Aprenda como utilizar o SVGR, um pacote que vem no Create React App para importar svgs como componentes React
* Entenda como o React entende os imports estáticos tanto via arquivos .js quanto em arquivos de estilos como .scss ou .css. Aprenda como importar arquivos estáticos como * variáveis via js ou utilizando a pasta public para imports dinâmicos de arquivos estáticos
👀 Demonstração
Home
https://github.com/Epiled/aluroni/assets/55258483/d6a281ba-d5fc-463f-98c0-29de81e381a5
https://github.com/Epiled/aluroni/assets/55258483/b0c2c8be-7f23-4d87-80a3-00f390fc9993
🚨 Pré-requisito
- Node
⚙ Instalação
```
1. git clone https://github.com/Epiled/aluroni.git
2. cd aluroni
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
Felipe De Andrade
Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!
[](https://www.linkedin.com/in/fademendonca/)
[](mailto:[email protected])
[](https://www.instagram.com/felipe.deam/)
[](https://codepen.io/epiled)