https://github.com/yurilrodrigues/autocars-frontend

https://github.com/yurilrodrigues/autocars-frontend

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/yurilrodrigues/autocars-frontend
• Owner: YuriLRodrigues
• Created: 2024-12-20T16:15:44.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-02-18T16:35:48.000Z (3 months ago)
• Last Synced: 2025-02-18T17:34:15.784Z (3 months ago)
• Language: TypeScript
• Size: 5.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚗 AutoCars - Plataforma de Anúncios de Carros (Frontend)

Este é o frontend da plataforma AutoCars, criado com foco em performance, acessibilidade e experiência do usuário. Ele permite a publicação e navegação por anúncios de veículos, proporcionando uma experiência fluida e otimizada.

## 🚀 Tecnologias Utilizadas

As principais tecnologias usadas no frontend incluem:

- ![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white) - Framework React para SSR e SSG

- ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white) - Tipagem estática para maior segurança

- ![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) - Estilização moderna e eficiente

- ![Zustand](https://img.shields.io/badge/State%20Management-Zustand-FF9900?logo=zustand) - Gerenciamento de estado leve

- ![React Hook Form](https://img.shields.io/badge/react--hook--form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white) - Gerenciamento de formulários

- ![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white) - Animações fluidas

- ![Shadcn](https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcn/ui&logoColor=white) - Componentes acessíveis e customizáveis

- ![Cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?logo=cypress&logoColor=058a5e) - Testes end-to-end

- ![Zod](https://img.shields.io/badge/-Zod-3E67B1?style=flat&logo=zod&logoColor=white) - Validação de esquemas

- ![Next Themes](https://img.shields.io/badge/NextThemes-000000?style=for-the-badge&) - Modo escuro e claro dinâmico

## 📂 Estrutura de Pastas

```bash

src/

  ├── @types/

  ├── app/

  │   ├── (home)/

  │   │   ├── cars/

  │   │   ├── components/

  │   │   ├── profile/

  │   │   ├── layout.tsx

  │   │   ├── page.tsx

  │   ├── auth/

  │   │   ├── forgot-password/

  │   │   ├── new-password/

  │   │   ├── sign-in/

  │   │   ├── sign-up/

  │   ├── dashboard/

  │   │   ├── components/

  │   │   ├── favorites/

  │   │   ├── manager/

  │   │   ├── profile/

  │   │   ├── seller/

  │   │   ├── layout.tsx

  │   │   ├── not-found.tsx

  ├── assets/

  ├── components/

  ├── context/

  ├── hooks/

  ├── http/

  ├── lib/

  ├── providers/

  ├── styles/

  ├── utils/

  ├── env.mjs

  ├── middleware.ts

```

## 🌟 Funcionalidades Principais

- 📌 **Publicação de anúncios** com upload de imagens

- 🔍 **Pesquisa e filtros** para encontrar veículos rapidamente

- 💾 **Favoritar e curtir anúncios** para acesso rápido

- 💬 **Criar e visualizar comentários** em anúncios

- 🖥 **Painel Dashboard** para gerenciar anúncios e métricas

- 🎨 **Escolha de tema** (escuro, claro ou cores personalizadas como laranja, vermelho, azul, etc.)

- 🚀 **Interface otimista** para respostas instantâneas

- 🎭 **Skeletons de carregamento** para melhor UX

- 📱 **Totalmente responsivo**, adaptado para qualquer tela

## 🔮 Futuras Atualizações

- 💬 **Conversa com vendedor** via chat

---

## ⚙️ Instalação

```bash

$ npm install

```

## 🚀 Rodando a Aplicação

```bash

# Desenvolvimento

$ npm run dev

# Produção

$ npm run build && npm start

```

## 🧪 Testes

```bash

# Testes unitários

$ npm run test

# Testes end-to-end com Cypress

$ npm run test:e2e

```

---

## 📬 Contato

- **Autor**: YuriLRodrigues

- **LinkedIn**: [Yuri Leite Rodrigues](https://www.linkedin.com/in/yuri-leite-rodrigues)