Motors Shoop é uma aplicação que oferece aos usuários um sistema completo de compra e venda de veículos. A plataforma conta com dois tipos de usuários: o anunciante e o comprador.
O anunciante pode realizar todas as operações de CRUD (criação, leitura, atualização e exclusão) em relação às suas publicações, permitindo que ele gerencie facilmente seus anúncios de veículos. Já o comprador pode navegar pela ampla variedade de veículos disponíveis, comparar preços e condições, e realizar comentarios nos respectivos anuncios de forma transparente.
Além disso, a Motors Shoop oferece recursos adicionais para tornar a experiência do usuário ainda mais completa. O cadastro, login e recuperação de senha são fáceis e intuitivos, garantindo que os usuários possam acessar a plataforma com facilidade e segurança.
Nessa aplicação estamos consumindo um api que simula a Tabela Fipe, que expressa preços médios de veículos no mercado nacional, servindo apenas como um parâmetro para negociações ou avaliações. Os preços efetivamente praticados variam em função da região, conservação, cor, acessórios ou qualquer outro fator que possa influenciar as condições de oferta e procura por um veículo específico
Além disso, a Motors Shoop pode oferecer aos usuários recursos adicionais, como filtros de busca avançados e informações detalhadas sobre os veículos.
Tudo isso torna a experiência de compra e venda de veículos mais fácil, segura e conveniente para todos.
-
Você precisa ter o banco de dados postegresSQL e node.js em sua máquina. Node.js | PSQL
-
Clone o repositório do back-end: Repo
git clone <URL-GITHUB>
- Crie banco de dados postegres
Conectado no terminal interativo do PostgreSQL (psql)
psql -U postgres
Postgres user default password
1234
Create Database
CREATE DATABASE <name-your-database> ;
desconectar terminal interativo do PostgreSQL
ctrl + c
- Criar arquivo .env
DATABASE_URL="postgresql://postgres:1234@localhost:5432/<name-your-database>"
URL_FROM_FRONT="http://localhost:5173"
SECRET_KEY="#%$*&**&&-09875$hddsa%TT"
SMTP_USER="motorsshopofficial@gmail.com"
SMTP_PASS="zfhshplcuubhrsrz"- Executar Migraçoens
npm run typeorm migration:run -- -d ./src/data-source
- Instale a node modules
npm install
- Rodar servidor
npm run dev
- Clone o repositório do front-end: Repo
git clone <URL-GITHUB>
- Instale a node modules
npm install
- Rodar servidor
npm run dev
Principais componentes:
- Botão: foram construídos dois componentes de botão, um de submit e outro de âncora. Ambos possuem 6 estilizações diferentes, que podem ser passadas via props.
- Input: responsável pela captura de dados do formulário, possui estilização do tipo outlined e recebe 4 campos via props (id, tipo, label e registro).
- Select: responsável pela captura de dados do formulário, possui estilização do tipo outlined e recebe 4 campos via props (id, options, label e registro).
- UserInitiais: este componente aparece em vários locais da aplicação, como no header quando o usuário está logado, nos cards da homepage e no momento de realizar comentários sobre um veículo. Ele exibe as iniciais de cada usuário acompanhadas de uma cor. Para que isso seja possível, uma vez que se tenha informação sobre um usuário a partir do seu nome, utilizamos as duas primeiras letras para formar sua sigla e a cor é definida pelo seu id. Com uma lógica de fazer o módulo do id dividido por 5, ficamos apenas com 6 opções de resultados que definem uma cor para cada usuário
- Showcase: O componente Showcase é responsável por renderizar uma lista na interface. Ele foi projetado para ser responsivo, adaptando-se a ambientes de desktop quanto a dispositivos móveis.
- Card: o componente Card é versátil e estilizado de maneira uniforme, embora tenha uma renderização condicional dependendo da página em que está sendo usado (seja na página inicial ou no painel de controle). Isso significa que ele pode mudar seu conteúdo e aparência com base no contexto, proporcionando uma experiência de usuário mais dinâmica e interativa.
- Axios: É uma biblioteca JavaScript que é usada para fazer solicitações HTTP a partir de navegadores e servidores Node.js. DOC
- React-hook-form: É uma biblioteca de formulários para React que visa minimizar o número de re-renderizações e melhorar o desempenho do formulário. DOC
- React-router-dom: É uma biblioteca de roteamento para aplicativos React que permite a criação de rotas em aplicativos de página única. Ele fornece componentes como Router, Route e Link para controlar a navegação e renderização de componentes em seu aplicativo. DOC
- Zod: É uma biblioteca de validação de esquema declarativa para TypeScript. Ele permite que você construa esquemas complexos e aninhados enquanto mantém a segurança dos tipos. DOC
- Styled-components: É uma biblioteca que permite usar bits do ES6 e CSS para estilizar seus aplicativos. Permite que você escreva código CSS real para estilizar seus componentes DOC
- Swiper: Biblioteca de código gratuito e aberto, com transições aceleradas por hardware e comportamento nativo. Neste projeto, usamos com o intuito de criar um banner de imagens no formato de carrossel. DOC
- React-toastify: Permite adicionar notificações ao seu aplicativo com facilidade. DOC
- React-icons: Inclui ícones populares em seu projeto. DOC
- Core: No contexto de desenvolvimento de software, pode se referir a um conjunto de bibliotecas ou módulos centrais que fornecem funcionalidades básicas para um aplicativo ou sistema entre o front-end e back-end.
- bcryptjs: É uma implementação otimizada do algoritmo bcrypt em JavaScript. Ele é usado para criptografar senhas de maneira segura. DOC
- Dotenv: É um módulo zero-dependência que carrega variáveis de ambiente de um arquivo .env em process.env DOC
- express: É um framework web minimalista e flexível para Node.js que fornece um conjunto robusto de recursos para aplicativos web e móveis DOC
- jsonwebtoken: Esta biblioteca ajuda você a trabalhar com JWTs (JSON Web Tokens) em seu aplicativo Node.js. JWTs são úteis para autenticação e troca segura de informações entre partes DOC
- Jwt-decode: Biblioteca que ajuda a decodificar tokens JWT (JSON Web Tokens) em navegadores e servidores Node.js. Ele não valida o token, apenas decodifica as informações contidas nele. Isso pode ser útil para extrair informações do token, como o ID do usuário ou outras reivindicações. DOC
- typeorm: É um ORM (Object-Relational Mapper) para JavaScript e TypeScript que pode ser usado com várias bases de dados SQL (como MySQL, PostgreSQL etc.) e NoSQL. Ele suporta os recursos mais recentes do JavaScript (ES7/ES8) e fornece padrões adicionais para trabalhar com bancos de dados DOC
- reflect-metadata: É uma biblioteca que permite adicionar e manipular metadados em objetos JavaScript. É um recurso experimental que é usado em conjunto com a funcionalidade de decoradores do TypeScript DOC