Carshop

Índice

• Carshop
• Índice
• Introdução
• Principais tecnologias utilizadas
• Demonstração
• Como executar o projeto
  • Pré-requisitos
  • Como rodar a aplicação
  • Como rodar a aplicação sem Docker
  • Login administrativo
• Como executar os testes
  • Backend
  • Frontend
• Lighthouse

Introdução

Bem-vindo ao Carshop, um sistema de catálogo de carros a venda. Com o login administrativo é possível cadastrar, editar e excluir carros do sistema.

O Backend foi desenvolvido seguindo a arquitetura DDD (Domain Driven Design), SOLID e Clean Code. Visando a escalabilidade, manutenibilidade e testabilidade do sistema.

O Frontend foi desenvolvido tendo em mente boas práticas, componentes reutilizáveis e experiência do usuário.

Principais tecnologias utilizadas

Backend: C#, ASP.NET Core 6.0, Entity Framework Core 6.0, BCrypt, Docker, XUnit, FluentAssertions.

Frontend: React + Vite + TypeScript, Tailwind CSS, Axios, React-cookie, React-router-dom, Yup, Docker, Vitest.

Banco de dados: SQL Server. (Dockerizado para facilitar a execução do projeto).

Demonstração

GIF de demonstração

Como executar o projeto

Pré-requisitos

• Docker
• Docker Compose
• Git
• .NET 6.0 (Para rodar os testes do backend)
• Node.js (Para rodar os testes do frontend)

Para rodar o projeto sem Docker, veja como rodar a aplicação sem Docker.

Como rodar a aplicação

Clonar o repositório:

git clone git@github.com:Brendon-Lopes/carshop.git

Entrar na pasta do projeto:

cd carshop

Rodar com docker compose (Pode demorar um pouco pra iniciar):

docker-compose up -d

O projeto estará disponível em http://localhost:3000

A API estará disponível em http://localhost:5000

A documentação da API estará disponível em http://localhost:5000/swagger

Como rodar a aplicação sem Docker

Backend (Clique para expandir)

Requisitos:

• .NET 6.0
• Banco de dados SQL Server

1. Tenha um banco de dados SQL Server rodando.

2. Entre na pasta do backend:

cd carshop/server

3. Edite a connection string no arquivo appsettings.json e appsettings.Development.json dentro de Carshop.API, de acordo com o seu banco de dados:

• exemplo:

// ...
"ConnectionStrings": {
  "DefaultConnection": "Server=localhost;Database=carshop;User Id=sa;Password=123456;"
}
// ...

4. Instale as dependências:

dotnet restore

5. Rode a aplicação:

dotnet run --project ./src/Carshop.API/Carshop.API.csproj

A API vai criar o banco de dados e populá-lo automaticamente.

6. A API estará disponível em http://localhost:5146/swagger

Frontend (Clique para expandir)

Requisitos:

• Node.js

1. Entre na pasta do frontend:

cd carshop/client

2. Instale as dependências:

npm install

3. Rode a aplicação:

npm run dev

Login administrativo

Email:

admin@mail.com

Senha:

123456

Como executar os testes

Backend

Entrar na pasta do projeto:

cd server

Executar os testes:

dotnet test

Frontend

Entrar na pasta do projeto:

cd client

Instalar as dependências:

npm install

Executar os testes:

npm test

Lighthouse

Notas de acessibilidade, melhores práticas e SEO do Frontend, de acordo com o Lighthouse: