🌱 SF Dashboard

🚧 SF Dashboard é uma dashboard simples, porém elegante! 👨🏾‍💻 Em desenvolvimento 🚀 🚧

Sobre • Funcionalidades • Como executar • Tecnologias • Autor • Licença

💻 Sobre o projeto

O projeto SF Dashboard foi desenvolvido utilizando o framework Nextjs, TypeScript e várias outras tecnologias utilizadas no mercado. O front-end foi utilizado o styled components para fazer toda a parte de estilo da aplicação. O react query foi utilizado para fazer o gerenciamento de estados. Para a parte de autenticação foi utilizado em conjunto com axios a biblioteca Nookies. Através dela foi possível armazenar nos cookies do navegador os tokens de autenticação do usuário. Por último, mas não menos importante, foi utilizado o story books para documentar os componentes da aplicação. A back-end foi desenvolvida utilizando o framework Express.js e TypeScript. Foram utilizados diversos conceitos como middlewares, autenticação JWT, persistência de dados, segurança, migrations, SOLID, entidades e relacionamentos. Para persistência dos dados foi utilizado o SQLITE3. Com a api é possível cadastrar usuários e consequentemente cadastrar, editar e excluir seus próprios produtos. E para fazer os schemas de validação dos campos foi utilizada a biblioteca Joi. Também foi utilizado o Swagger para fazer descrição, consumo e visualização da API REST.

OBS.: Esse projeto serviu como parte de um processo seletivo para estágio em desenvolvimento Full Stack.

---

⚙️ Funcionalidades

• Cadastrar produtos
• Excluir produtos
• Editar produtos
• Visualizar produtos
• Pagina exclusiva para criação de usuário
• Pagina exclusiva para login

---

🚀 Como executar o projeto

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git. Além disto é bom ter um editor para trabalhar com o código como VSCode

🧭 Rodando a aplicação front-end

# Clone este repositório
$ git clone https://github.com/FlavioInacio-jf/sfdashboard

# Acesse a pasta do projeto no seu terminal/cmd
$ cd sfdashboard

# Instale as depêndencias
$ yarn 

# Iniciar o projeto(O app estará deponivel no  http://localhost:3000)
$ yarn dev

🧭 Rodando a aplicação back-end

# Clone este repositório
$ git clone https://github.com/FlavioInacio-jf/sfdashboard-server

# Acesse a pasta do projeto no seu terminal/cmd
$ cd sfdashboard-server

# Instale as depêndencias
$ yarn 

# Iniciar o projeto(O servidor estará deponivel no http://localhost:3333 e a documentação da api estará disponivel no endereço http://localhost:3333/docs)
$ yarn dev

---

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Front-end

• React
• Nexjs
• TypeScript
• Styled Components
• Axios
• React Icons
• React Query
• Storybook
• React-toastify
• React-modal
• React Hook Form
• Nookies
• Json server

Back-end

• Express
• Bcrypt
• Joi
• TypeScript
• JSON Web Token
• SQLite
• Swagger
• TypeORM
• UUID

Utilitários

• Browser: Google Chrome
• Editor: Visual Studio Code
• Fontes: Inter, Poppins
• Outros: Insomnia
• Outros: Beekeeper
• Outros: StarUML

---

🦸 Autor

_{Flávio Inácio}

---

📝 Licença

Este projeto esta sobe a licença MIT.

Feito por Flávio Inácio 👋🏽 Entre em contato!