CRUD de Produtos

This repositoty contains a authentication system and a CRUD of products

Telas criadas

Acesso pelo google drive.

Como rodar o projeto

Clone o repositório:

    git clone https://github.com/matheusmartinsviana/t-alpha-interview.git

Abra a pasta do projeto no terminal:

    cd crud-de-produtos-reactjs

Faça a instalação dos pacotes e dependências:

    npm install

Após a instalação de pacotes e dependências do projeto no terminal, digite:

    npm run dev

Abra o seu navegador e cole o link:

    http://localhost:5173/

Estrutura de Pastas

    /src/: Contém as arquivos do projeto

    /src/components: Responsável pelos componentes reutilizaveis da aplicação

    /src/layout: Definer a estrutura da aplicação com a navbar em uma posição e onde fica o Body da minha aplicação

    /src/pages: Contém as páginas do projeto

    /src/routes: Contém o arquivo de rotas com a definição de cada rota e oque será renderizado

    /src/utils: Utilizado armazenar as funções como: os Regex para inputs

Frameworks e Bibliotecas Utilizadas

• React Router Dom: Usado para possibilitar o sistemas de rotas dentro da minha aplicação e renderização dinâmica de elementos.
• Vite: Escolhido pela velocidade de build e por ter o sistema de live reloading então sempre tenho a visão ao vivo do meu projeto dentro no navegador.
• React.js: O react traz mais agilidade para o desenvolvimento front-end e também junto a um desenvolvimento otimizado traz um desempenho superior com a possibilidade de renderização de componentes.

Sistema de autenticação

• localStorage: Foi utilizado o localStorage pela questão de facíl aplicabilidade.
• useNavigation: Como a versão inicial da aplicação está sendo utilizado o localStorage basta eu verificar se há "token" que foi criado pelo back-end após o login, obviamente não é uma das melhores práticas de segurança mas com essa solução eu posso direcionar e quais páginas estão públicas (não há necessidade de um "token" para acessa-las) ou se estão privadas (sempre direcionando pro login se não houver um "token").
• Melhorias futuras: Uso de sessions com react.js, principalmente por utilizar o cliente-side-sessions onde conseguimos ter mais segurança na aplicação.

Linkedin

Matheus Martins Viana - Desenvolvedor Node.js | React.js