Trata-se de uma aplicação que simula uma loja virtual, sendo possível cadastrar um novo usuário, realizar o login, visualizar e favoritar produtos, também como visualizar e remover os produtos favoritados. A aplicação depende da API disponível aqui.
Este projeto está sob licença do MIT
- ReactJS: Uma biblioteca JavaScript de código aberto utilizada para construir interfaces de usuário (UI). Desenvolvida pelo Facebook, ela é baseada em componentes reutilizáveis, permitindo a construção de interfaces dinâmicas e interativas de forma eficiente.
- TypeScript: Um superconjunto de JavaScript que adiciona tipagem estática opcional ao código. Ele ajuda os desenvolvedores a detectar erros mais cedo durante o desenvolvimento e oferece ferramentas avançadas para trabalhar em projetos de grande escala, melhorando a manutenibilidade e escalabilidade do código.
- Styled Components: Uma biblioteca para React e React Native que permite escrever estilos CSS diretamente dentro de componentes JavaScript. Isso facilita a criação e o gerenciamento de estilos, além de fornecer recursos como props dinâmicas e escopo encapsulado para estilos.
- Axios: Uma biblioteca JavaScript para fazer requisições HTTP a partir do navegador ou Node.js. Ele fornece uma API simples e concisa para lidar com solicitações e respostas HTTP, suportando várias funcionalidades, como interceptadores, cancelamento de requisições e transformações de dados.
- Vite: Um construtor de aplicações web moderno e rápido, desenvolvido principalmente para projetos usando Vue.js, mas também é compatível com outras estruturas como React e Svelte. Ele oferece um ambiente de desenvolvimento extremamente rápido e eficiente, com recarga rápida (hot module replacement) e suporte a módulos ES.
- React Icons: Uma biblioteca que fornece um conjunto de ícones populares para serem usados em aplicações React. Ela simplifica a inclusão de ícones vetoriais em projetos React, oferecendo uma ampla variedade de ícones e estilos prontos para uso.
- UseHooks: Um repositório no GitHub que contém uma coleção de hooks personalizados para React. Esses hooks abstraem lógicas comuns e reutilizáveis, como manipulação de estado, efeitos colaterais e interações com APIs externas, facilitando o desenvolvimento de componentes React mais limpos e modulares.
- React Alice Carousel: Uma biblioteca React para criar carrosséis (sliders) de forma simples e flexível. Ela oferece diversos recursos, como navegação touch-friendly, suporte a animações personalizadas e controle total sobre o conteúdo exibido no carrossel.
- Redux: Uma biblioteca de gerenciamento de estado para aplicações JavaScript, principalmente para aplicações baseadas em React. Ele centraliza o estado da aplicação em um único store e facilita o gerenciamento de estados complexos, proporcionando um fluxo de dados previsível e controlado.
- Redux Toolkit: Uma biblioteca complementar ao Redux, projetada para simplificar o desenvolvimento com Redux. Ela oferece utilitários e convenções que ajudam a reduzir a quantidade de código necessário, facilitando tarefas comuns como a criação de reducers e a configuração do store.
- React Spinners: Uma biblioteca React que fornece componentes para exibir indicadores de carregamento (spinners) em aplicações web. Ela oferece uma variedade de estilos e opções de personalização para spinners, facilitando a inclusão de feedback visual de carregamento em interfaces de usuário.
- React Query: Uma biblioteca para gerenciamento de dados em aplicações React. Ela simplifica o gerenciamento de dados assíncronos, como solicitações HTTP, cache de dados e atualizações em tempo real, fornecendo uma API simples e intuitiva para lidar com esses cenários comuns no desenvolvimento de aplicações web.
Git
Node v20.11.1
-
Clone o repositório com o comando git clone:
git clone git@github.com:danielbped/online-store.git -
Entre no diretório que acabou de criar:
cd online-store -
Para o projeto funcionar na sua máquia, será necessário instalar suas dependências, para isso, utilize npm install:
npm install -
Pronto, agora o projeto está pronto para ser rodado localmente, utilizando o comando npm run dev:
npm run dev⚠️ A aplicação, por definição, estará rodando na porta 5173⚠️
Na raiz do projeto, será necessário criar um arquivo .env, com as seguintes informações:
VITE_API_URL=""
VITE_SECRET_KEY_JWT="online-store"
Um arquivo com estas definições já está presente no projeto, o .env.example, para que funcione corretamente, basta renomear para apenas .env, e alterar os dados VITE_API_URL de acordo com a rota em que a API esteja rodando, provavelmente será http://localhost:3000. Em relação à outra variável, trata-se da chave para descriptografar as senhas do banco de dados, portanto deve ser a mesma chave utilizada na API, portanto, com o intuito de demonstração, não será alterada.
- Implementação de testes unitários;
- Implementar sistema de usuário, com redefinição e visualização de dados;
- Melhorias em alguns aspectos de responsividade;
- Correções de tipagens e interfaces;
- Implementação de lazy loading ou paginação,