DSCarrosTop

Sobre o Projeto

O projeto DSCarrosTop é um catálogo de carros desenvolvido como parte do treinamento de reciclagem e aprimoramento em React, TypeScript e Vite, chamado ReactJS Professional, oferecido pela escola DevSuperior. Este projeto tem como foco principal a fixação de conceitos em Componentes e Rotas no desenvolvimento frontend com essas tecnologias. Embora o projeto se concentre na montagem da estrutura, ele foi projetado para ser uma página única. O projeto foca na montagem da estrutura, sem se preocupar com os links, resultando em uma página responsiva.

Estrutura Básica do Projeto

A estrutura do projeto é modular, o que facilita tanto a manutenção quanto a escalabilidade do código. Cada componente e rota tem sua própria pasta, contendo um arquivo index.tsx para o código do componente e um arquivo styles.css para os estilos.

DSCarrosTop/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── CarCard/
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── CommentCard/
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── Footer/
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── Header/
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── TitleCard/
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   └── TitleComment/
│   │       ├── index.tsx
│   │       └── styles.css
│   ├── routes/
│   │   └── Home/
│   │       ├── index.tsx
│   │       └── styles.css
│   ├── App.tsx
│   ├── index.tsx
│   └── index.css
├── package.json
└── vite.config.ts
└── ...

Elementos CSS frequentemente utilizados para Responsividade

Media Queries: Para adaptar o layout a diferentes tamanhos de tela.
```
@media (max-width: 576px) {
    /* Seu CSS aqui */
}
```

Flexbox ou Grid Layout: Para criar layouts flexíveis e responsivos.

.container {
    display: flex;
}

.container {
    display: grid;
}

Unidades Relativas: Use em, rem, %, vw, vh em vez de unidades fixas como px.
```
font-size: 1.2rem;
```
Overflow: Para lidar com o conteúdo que pode sair dos limites do container.
```
overflow-x: auto;
```
Aspect Ratio: Manter a proporção de aspecto de elementos como imagens.
```
aspect-ratio: 16 / 9;
```
Min e Max Width/Height: Definir limites para que os elementos não fiquem muito pequenos ou grandes.
```
min-width: 300px;
max-width: 1200px;
```

Interface Responsiva para Mobile

Aqui está uma prévia de como o projeto DSCarrosTop se parece em dispositivos móveis. O layout é otimizado para telas pequenas, garantindo uma excelente experiência do usuário.

Interface Responsiva para Desktop

Abaixo está uma prévia do projeto em uma visão web padrão. O layout se adapta para aproveitar o espaço da tela, tornando o projeto igualmente eficaz em dispositivos desktop.

Pré-requisitos

Certifique-se de ter instalado em sua máquina:

Node.js
npm ou yarn

Como Baixar o Projeto

Clone o repositório para sua máquina local usando o seguinte comando:
```
git clone git@github.com:solucaoerp/dscarros-top.git
```

Instalação

Navegue até o diretório do projeto.
```
cd dscarros-top
```
Instale as dependências do projeto.
```
npm install
```
ou
```
yarn
```

Execução

Execute o projeto em modo de desenvolvimento.
```
npm run dev
```
ou
```
yarn dev
```

Agora, o projeto deve estar rodando em http://localhost:5173/.

solucaoerp/dscarros-top