Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vmnog/ifood-inicio
🍕🍔 Aprenda a criar um clone da interface do iFood utilizando Next.js e TailwindCSS! Neste tutorial detalhado, vamos construir juntos uma aplicação que replica a interface do popular serviço de entrega de comida, explorando as funcionalidades essenciais, as melhores práticas para desenvolvimento web moderno e responsivo.
https://github.com/vmnog/ifood-inicio
caraquecoda
Last synced: 10 days ago
JSON representation
🍕🍔 Aprenda a criar um clone da interface do iFood utilizando Next.js e TailwindCSS! Neste tutorial detalhado, vamos construir juntos uma aplicação que replica a interface do popular serviço de entrega de comida, explorando as funcionalidades essenciais, as melhores práticas para desenvolvimento web moderno e responsivo.
- Host: GitHub
- URL: https://github.com/vmnog/ifood-inicio
- Owner: vmnog
- Created: 2024-05-21T16:31:24.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-25T02:57:52.000Z (8 months ago)
- Last Synced: 2024-12-10T18:16:52.844Z (29 days ago)
- Topics: caraquecoda
- Language: TypeScript
- Homepage: https://ifood-inicio.vercel.app
- Size: 454 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# iFood Início Clone com Next.js e TailwindCSS | @caraquecoda
Bem-vindo ao repositório do projeto iFood Início, um clone da interface do site [iFood](https://www.ifood.com.br/inicio), desenvolvido com Next.js e TailwindCSS.
- Veja a aplicação em funcionamento: [Demo](https://ifood-inicio.vercel.app/)
- Assista ao tutorial no YouTube: [Tutorial](https://www.youtube.com/watch?v=GGJsbj0NrkM&list=PLCwsaNyAWqXoFYN-ZcQGE-RsdY1WrNrxA)
## Sobre o Projeto
🍕🍔 Aprenda a criar um clone da interface do iFood utilizando Next.js e TailwindCSS! Neste tutorial detalhado, vamos construir juntos uma aplicação que replica a interface do popular serviço de entrega de comida, explorando as funcionalidades essenciais e as melhores práticas para desenvolvimento web moderno.
## Funcionalidades
- **Interface Responsiva:** Design responsivo para uma ótima experiência em dispositivos móveis e desktops.
- **Navegação Rápida:** Navegação eficiente utilizando as rotas do Next.js.
- **Estilização Moderna:** Estilos aplicados com TailwindCSS para um design moderno e consistente.
## Estrutura do Projeto
O projeto é composto por vários arquivos e pastas principais:
- `pages/`: Contém as páginas da aplicação, seguindo a estrutura de rotas do Next.js.
- `components/`: Contém os componentes reutilizáveis da aplicação.
- `styles/`: Contém os arquivos de estilo, incluindo a configuração do TailwindCSS.
## Como Usar
Para usar o clone do iFood Início, siga os passos abaixo:
1. Clone este repositório para sua máquina local:
```bash
git clone https://github.com/vmnog/ifood-inicio
cd ifood-inicio
```
2. Instale as dependências:
```bash
pnpm install
```
3. Execute o projeto em modo de desenvolvimento:
```bash
pnpm run dev
```
4. Abra o navegador e acesse:
```
http://localhost:3000
```
## Tecnologias Utilizadas
- **Next.js**: Framework React para renderização do lado do servidor e geração de sites estáticos.
- **React**: Biblioteca JavaScript para construção de interfaces de usuário.
- **TailwindCSS**: Framework CSS para estilização da aplicação.
- **TypeScript**: Superset do JavaScript que adiciona tipos estáticos ao código.
## Scripts Disponíveis
No projeto, você pode executar os seguintes scripts:
- `pnpm run dev`: Executa a aplicação em modo de desenvolvimento.
- `pnpm run build`: Cria a versão de produção da aplicação.
- `pnpm run start`: Inicia o servidor da aplicação.
- `pnpm run lint`: Executa o linter para verificar problemas no código.
## Contribuições
Contribuições são sempre bem-vindas! Se você tem alguma sugestão para melhorar este projeto, sinta-se à vontade para criar uma issue ou enviar um pull request.
---
Esperamos que você aproveite a utilização do nosso Clone do iFood Início, e estamos ansiosos para ver as incríveis funcionalidades que você pode adicionar a ele!