https://github.com/immark007/starbucks
Projeto para praticar Tailwind
https://github.com/immark007/starbucks
Last synced: 30 days ago
JSON representation
Projeto para praticar Tailwind
- Host: GitHub
- URL: https://github.com/immark007/starbucks
- Owner: immark007
- Created: 2024-09-11T15:52:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-21T09:11:15.000Z (over 1 year ago)
- Last Synced: 2025-03-02T13:23:25.125Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ☕ Starbucks Clone
Este projeto é um clone da interface do site da Starbucks, desenvolvido utilizando **React**, **TypeScript**, **Vite** e estilizado com **Tailwind CSS**. Ele tem como objetivo reproduzir a interface de forma responsiva e moderna, aplicando boas práticas de desenvolvimento front-end.
🔗 **Acesse o projeto online:** [Starbucks Clone - Deploy](https://immark007.github.io/starbucks/)
## 🚀 Tecnologias Utilizadas
- ⚛️ **React** – Biblioteca para criação de interfaces de usuário.
- 🟦 **TypeScript** – Superset do JavaScript que adiciona tipagem estática.
- ⚡ **Vite** – Build tool para desenvolvimento web rápido.
- 🎨 **Tailwind CSS** – Framework CSS utilitário para estilização rápida e responsiva.
- 🔍 **ESLint** – Ferramenta para análise de código e padronização.
- 📝 **PostCSS** – Ferramenta para transformar CSS com plugins JavaScript.
## 📁 Estrutura do Projeto
```
src/
├── assets/ # Arquivos estáticos (imagens, fontes, etc.)
├── components/ # Componentes reutilizáveis
│ ├── Button/ # Componente de botão
│ │ └── index.tsx
│ ├── Footer/ # Rodapé
│ ├── Main/ # Componente principal
│ ├── Navbar/ # Barra de navegação
│ ├── Rewards/ # Seção de recompensas
│ └── Sections/ # Outras seções da página
├── App.tsx # Componente principal React
├── index.css # Estilos globais
├── main.tsx # Ponto de entrada do React
└── vite-env.d.ts # Definições de tipos para Vite
```
## 💻 Como Rodar o Projeto Localmente
1. **Clone o repositório:**
```bash
git clone https://github.com/immark007/starbucks.git
cd starbucks
```
2. **Instale as dependências:**
```bash
npm install
```
3. **Execute o servidor de desenvolvimento:**
```bash
npm run dev
```
4. **Acesse o projeto:**
Abra o navegador e acesse: [http://localhost:5173](http://localhost:5173)
## 🎨 Funcionalidades Implementadas
- Interface responsiva e semelhante ao site oficial.
- Componentização reutilizável para manutenção e escalabilidade.
- Estilização moderna e minimalista com Tailwind CSS.
- Configuração otimizada com Vite para rápido carregamento.
## 🛠️ Scripts Disponíveis
- `npm run dev`: Executa o servidor de desenvolvimento.
- `npm run build`: Cria a build de produção.
- `npm run preview`: Visualiza a build de produção localmente.
- `npm run lint`: Executa o ESLint para checagem de problemas no código.
## 🌐 Deploy
O projeto está disponível online e pode ser acessado pelo seguinte link:
🔗 **[Starbucks Clone - Deploy](https://immark007.github.io/starbucks/)**