/coffee-magic-web

Aplicação Web front-end feita com React para integração com back-end feito em Node.js.

Primary LanguageTypeScriptMIT LicenseMIT

Projeto Front-end desenvolvida durante a Trilha React disponível na plataforma da Rocketseat.

License


📁 Sobre o projeto

O Coffee Magic é uma aplicação Web que consiste em um sistema para controle interno de um estabelecimento fictício, no qual é apresentado um dashboard com informações importantes como receita total, pedidos por mês, pedidos por dia, cancelamentos, entre outros. A aplicação também possuí a área de cadastrar um estabelecimento, fazer Login e além disso, é possível trocar o tema para Light, Dark ou System. Para o funcionamento correto, a aplicação depende de uma API que é responsável pelo tratamento, validação e armazenamento dos dados. Por fim, foram realizados testes unitários e E2E para garantir o bom funcionamento da aplicação.


Requisitos

  • Node.js versão 20 ou superior

💻 Tecnologias

  • React e React-DOM
  • React Hook Form
  • React Input Mask
  • Date-fns
  • Tailwind CSS
  • JavaScript
  • TypeScript
  • Vite
  • Vitest
  • Radix UI
  • Lucide React
  • Axios
  • Match Sorter
  • Sonner
  • Recharts
  • Localforage
  • Sort By
  • Zod
  • PlayWright

💡 Utilização

  1. Clone o projeto Web e a API:
$ git clone https://github.com/JaasielAntunes/coffee-magic-web.git
$ git clone https://github.com/rocketseat-education/pizzashop-api.git
  1. Acesse a pasta do projeto Web:
$ cd coffee-magic-web
  1. Acesse a pasta da API:
$ cd pizzashop-api
  1. Configurando e executando a API
    Obs: A API depende do Docker para configurar o banco de dados. Com o Docker instalado, clone o projeto, instale as dependências, configure os contêineres do Docker e execute o aplicativo. É necessário ter instalado o framework Bun disponível em https://bun.sh/docs/installation#macos-and-linux.
$ bun i
$ docker compose up -d
$ bun migrate
$ bun seed
$ bun dev
  1. Localize o arquivo seed.ts na pasta db e na parte de criar um administrador utilize um email de sua preferência para acesso ao painel.

  2. Instale as dependências do projeto Web:

$ npm i
  1. Inicie a aplicação:
$ npm run dev

Feito com ❤️ por Jaasiel Antunes - Entre em contato

Jaasiel Antunes