Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matheusmartinsviana/crud-de-produtos-reactjs
Este repositório contém um sistema de CRUD feito com React.js.
https://github.com/matheusmartinsviana/crud-de-produtos-reactjs
crud-reactjs
Last synced: 12 days ago
JSON representation
Este repositório contém um sistema de CRUD feito com React.js.
- Host: GitHub
- URL: https://github.com/matheusmartinsviana/crud-de-produtos-reactjs
- Owner: matheusmartinsviana
- Created: 2024-08-07T18:34:53.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T14:06:00.000Z (4 months ago)
- Last Synced: 2024-09-09T14:43:29.929Z (4 months ago)
- Topics: crud-reactjs
- Language: JavaScript
- Homepage: https://crud-de-produtos-reactjs.vercel.app/
- Size: 1.14 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/matheusmartinsviana/t-alpha-interview.git
```
Abra a pasta do projeto no terminal:
```bash
cd crud-de-produtos-reactjs
```
Faça a instalação dos pacotes e dependências:
```bash
npm install
```
Após a instalação de pacotes e dependências do projeto no terminal, digite:
```bash
npm run dev
```
Abra o seu navegador e cole o link:
```bash
http://localhost:5173/
```
## Estrutura de Pastas
```bash
/src/: Contém as arquivos do projeto
```
```bash
/src/components: Responsável pelos componentes reutilizaveis da aplicação
```
```bash
/src/layout: Definer a estrutura da aplicação com a navbar em uma posição e onde fica o Body da minha aplicação
```
```bash
/src/pages: Contém as páginas do projeto
```
```bash
/src/routes: Contém o arquivo de rotas com a definição de cada rota e oque será renderizado
```
```bash
/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
