Interface Front-End moderna e totalmente responsiva para um restaurante fast-food, desenvolvida com React, TypeScript e Tailwind CSS, utilizando componentes reutilizáveis, dados dinâmicos e integração com APIs externas, com arquitetura preparada para integração com backend.
Demonstração visual do layout em notebook, tablet e smartphone.
Ambiente extremamente rápido para desenvolvimento.
Build otimizado.
Suporte ESModules nativo.
React para criação de componentes reutilizáveis e declarativos.
Tipagem estática para maior confiabilidade.
Redução de erros em tempo de desenvolvimento.
Melhora a manutenção e escalabilidade do projeto.
Estilização baseada em classes utilitárias.
Produtividade alta na construção de layouts.
Design responsivo com breakpoints claros.
Customização rápida e eficiente.
Animações suaves e fluidas.
Controle fino de transições.
Ótimo para banners, modais e movimentos do layout.
Carrossel moderno e completamente responsivo.
Suporte a swipe, navegação, autoplay e paginação.
Perfeito para seções dinâmicas como banners e destaques.
O projeto foi estruturado com foco em reutilização e escalabilidade, utilizando uma abordagem própria de organização de componentes (“lógica fluida”).
- Componentes desacoplados e reutilizáveis
- Lógica baseada em objetos para facilitar manutenção
- Estrutura preparada para integração com backend
- Separação clara entre UI, regras de negócio e dados.
- Google Maps API para exibição de localização
- Configuração de variáveis de ambiente (.env)
- Pronto para consumo de APIs REST.
- Interface responsiva (mobile, tablet e desktop)
- Componentes reutilizáveis
- Conteúdo dinâmico baseado em objetos
- Animações com Framer Motion
- Estrutura preparada para integração com backend
Este projeto foi construído com foco total em responsividade:
Mobile First
Layouts fluindo naturalmente entre celulares, tablets e desktops
Grid e Flex bem aplicados
Imagens otimizadas para qualquer dispositivo
Instale as dependências
#Escolha um desses comandos e intale no terminal do seu vscode
yarn install
npm install
#No terminal do seu vscode rode um desses comandos abaixo
yarn dev
ou
npm run dev
Acesse em: http://localhost:5173
Este projeto foi preparado para deploy na Vercel, que realiza automaticamente:
Build do Vite
Otimização dos assets
Publicação contínua via GitHub
📦 src ┣ 📂 assets ┣ 📂 components ┣ 📂 pages ┣ 📂 hooks ┣ 📂 styles ┗ main.tsx
© - eriston.dev -
Júnior Front-End
Clique nos ícones abaixo para acessar:
