carvalhoviniciusluiz / eng-houpa-frontend

Desafio Técnico FrontEnd e BackEnd - Houpa :)

Home Page:https://houpa-sales.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Eng-Houpa-FrontEnd

Este projeto está arquitetado no framework Next.js, leia a documentação para mais detalhes ou veja o resumo existente na sessão Configurações > Next.js.

IMPORTANTE existe uma demo publicada no heroku clicar aqui, o primeiro acesso pode levar até 30s para ser estabelecido devido a conta ser gratuita.

Configurações

Dotenv (click to show)

O projeto depende do arquivo .env que deve existir na pasta raiz. Este arquivo não é versionado apesar do arquivo .env.sample ser.

DETALHAMENTO

Variável Descrição
NEXT_PUBLIC_BASE_URL Define a url de acesso ao banco de dados.
Scripts (click to show)

O projeto conta com diversos scripts de linha de comando para uso via terminal, i.e., yarn <SCRIPT> ou npm run <SCRIPT>

DETALHAMENTO

Script Descrição
build Compila o projeto gerando na pasta dist os scripts para produção
lint Roda o ESLINT padrão do Nextjs
start Inicia o servidor sem hot auto-reload
dev Inicia o servidor de desenvolvimento com hot auto-reload
Typescript (click to show)

Esta arquitetura utiliza Typescript como linguagem de codificação. Todas as features disponíveis pelo framework estão em Typescript e são altamente extensiveis, o que torna todo o código produzido super flexível para o desenvolvimento de softwares.

Apesar de adicionar uma estrutura diferente há sintaxe do javascript e que muitos programadores poderão não estar habitualidos a usar, TS trás vários benefícios a codificação:

  • Suporte intellisense para prover auto-completo, informações de parametros, informações rápidas, lista de membros, etc., tudo a nível de IDEs de código-fonte.
  • Melhor tooling para debug do desenvolvedor, fazendo verificações de erros e garantias de tipagens ao codificar.
  • Adição de suporte para design patterns como Abstract, Factories, Decorators, Singles, etc., para facilitar a gerência das dependências de forma padronizada e reutilizável.
  • Fornece um código mais confiável e explícito, menos sucetível a erros durante a programação.
  • Entre outros.

O projeto já possui um linter e o prettier configurados para garantir boa parte da formatação desejada no padrão de código definido. Arquivos de configuração .prettierrc e .eslintrc.js explicitam as configurações que dentre as poucas decisões definem: utilização obrigatória de aspas SIMPLES e a não-utilização de ponto e vírgula.

Um arquivo .editorconfig também dita as configurações acerca da formatação de arquivos: identação com 2 espaços, com codificação em UTF-8 e com linha em branco ao final dos arquivos.

NextJs (click to show)

This is a Next.js project bootstrapped with create-next-app.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Sobre o projeto

Requisitos:

Instalação:

No terminal faça:

yarn

Rodando o Projeto:

Na linha de comando faça:

yarn dev

NOTA: caso tenha dúvidas veja a sessão Configurações > Dotenv & Configurações > Scripts

Projeto Endpoints:

Vitrine de Produtos

  • #GET / - Tela publica, exibe todos os produtos cadastrados de todos os usuários registrados.

Auth

  • #GET /account/login - Tela de login.
  • #GET /account/register - Tela para registar uma conta de acesso.

Produtos

  • #GET /products - Tela de produtos do usuário logado.
  • #GET /products/edit/{id} - Tela de edição de produto.
  • #GET /products/new - Tela para cadastrar novos produtos.

Credenticial de Acesso:

IMPORTANTE: Para facilitar o primeiro acesso está disponível a conta de usuário válido abaixo:

Dados de acesso:

Param Value
Email carvalho.viniciusluiz@gmail.com
PASSWORD 123Ch@nge

OBS Caso não queira a conta padrão, use a tela de cadastro de usuários para registrar uma conta nova.

License

MIT

Copyright (c) 2022-present

About

Desafio Técnico FrontEnd e BackEnd - Houpa :)

https://houpa-sales.herokuapp.com/


Languages

Language:TypeScript 99.1%Language:SCSS 0.6%Language:JavaScript 0.3%Language:Procfile 0.0%