Projeto do bootcamp academy do Instituto Atlântico
Através do https
git clone https://github.com/stack-over-code-atlantico/supermercadosq-fe.git
Através do ssh
git clone git@github.com:stack-over-code-atlantico/supermercadosq-fe.git
Utilizamos o npm install para instalar todas as depedências utilizadas no projeto.
npm install
Para essa próxima etapa é necessário ter o arquivo .env configurado
E, por fim, usamos o npm run dev para iniciar o servidor em modo de desenvolvimento utilizado no endereço: http://localhost:3000
npm run dev
- apexcharts/react-apexcharts
- axios
- cpf-cnpj-validator
- date-fns
- js-cookie
- jwt-decode
- nookies
- react
- react-dom
- react-hook-form
- react-icons
- react-paginate
- react-router-dom
- react-select
- react-type-animation
- styled-components
- typewriter-effect
Por padrão, estamos usando a pasta supermercadosq-fe para manipularmos git e github e estamos usando supermercadosq para colocarmos todo o código assim como suas dependências
A primeira tela é a de início, onde haverá uma breve amostra da identidade visual do site. Lá há as opções de ver o blog (onde ficam as postagens), sobre o nosso projeto, algumas das alergias principais e a opção de registrar-se e logar.
A tela de postagens é onde há todas as postagens dos usuários. Nessa tela há uma validação do tipo de usuário.
- Caso o usuário não esteja logado, ele poderá, apenas, ver as postagens como registrar-se no site.
- Caso o usuário seja Cliente ou Fornecedor, ele poderá criar postagens, editar suas postagens, comentar, denunciar, etc.
- Caso o usuário seja Administrador, ele terá acesso a tudo isso e a pagina de Dashboard.
Há a paginação de acordo com a quantidade de postagens, um filtro funcionando de acordo com as alergias e postagens e comentários funcionando como modais para melhor experiencia do usuário e rápida visualização.
A tela de perfil de cada usuário poderá ser editada todas as informações, desde de informações pessoais, até sua senha. Também há a possibilidade de ver suas ultimas publicações e comentários, funcionando como um histórico.
Tela acessada somente pelo Administrador, onde será feita a analise de denuncias feitas em comentários e postagens. Lá é onde é mantido o controle de toda aplicação relacionado às postagens.
Tela para fazer o login e adentrar ao site. Através dela tela é retornado 2 tokens. Um chamado 'token' onde retorna as informações do usuário e um chamado 'expires' onde o token é expirado depois de um certo tempo (1h).
Tela para ser criada uma conta para ser utilizada afim de postar e comentar os diversos produtos.
Todas as requisições estão sendo feitas através do Axios, utilizadas nas pastas de "services" e "utils" onde é feito a comunicação com a API.