Pomodoro.dev

<p align="center"> <a href="https://github.com/thsthiago/pomodoro.dev/blob/main/LICENSE"> <img alt="licence" src="https://img.shields.io/github/license/thsthiago/pomodoro.dev?label=license"> </a> <a href="https://github.com/thsthiago/pomodoro.dev/stargazers"> <img alt="stars" src="https://img.shields.io/github/stars/thsthiago/pomodoro.dev?style=social"> </a> <a href="https://www.linkedin.com/in/thsthiago-cabral/"> <img alt="Feito por Thiago Cabral" src="https://img.shields.io/badge/Feito%20por-Thiago%20Cabral-red"> </a> </p> <h1 align="center"> <img style="width: 60%" alt="Pomodoro.Dev" title="Pomodoro.Dev" src="./github/Logo.png" /> </h1> <h4 align="center"> Veja o projeto online: <a href="https://pomodorodev.vercel.app/">Pomodoro.Dev</a> </h4> <p align="center"> <a href="#-sobre-o-projeto">Sobre</a> • <a href="#-funcionalidades">Funcionalidades</a> • <a href="#-layout">Layout</a> • <a href="#-como-executar-o-projeto">Como executar</a> • <a href="#-tecnologias">Tecnologias</a> • <a href="#-obrigado">Agradecimentos</a> • <a href="#-autor">Autor</a> • <a href="#user-content--licença">Licença</a> </p>

💻 Sobre o projeto

O Pomodoro.Dev foi criado com base na Técnica Pomodoro, para a diminuição da ansiedade e ao aumento do foco e concentração nas tarefas, evitando o tempo desperdiçado e distrações.

Projeto desenvolvido durante a NLW4 - Next Level Week 4 oferecida pela Rocketseat. O NLW é uma experiência online com muito conteúdo prático, desafios e hacks onde o conteúdo fica disponível durante uma semana.

---

⚙️ Funcionalidades

• [x] O usuário pode fazer login com o Username ou Username do Github:

  • [x] Username:
  • Salva apenas o nome cadastrado.
  • [x] Username Github:
  • Salva foto do perfil do Github.
  • Salva o nome cadastrado no Github.

• [x] Modo dark.

• [x] Iniciar um ciclo de 25 minutos.

• [x] Abadornar ciclo.

• [x] Dispara um efeito sonoro quando o ciclo chega ao fim.

• [x] No final do ciclo libera um novo desafio.

• [x] A cada desafio concluído o usuário ganha XP.

• [x] O usuário pode subir de nível completando desafios.

---

🎨 Layout

O layout da aplicação está disponível no Figma:

<a href="https://www.figma.com/file/zKd584T9maFD5x3CzkhIxK/Pomodoro.dev?node-id=160%3A2761"> <img alt="Layout Figma" src="https://img.shields.io/badge/Acessar%20Layout-Figma-red"> </a>

Web mobile

<p align="center"> <img alt="Demo pomodoradev" title="Demo pomodoradev" src="./github/pomodorodev-mobile.gif" width="150px"> <img alt="Demo desafio-mobile" title="Demo desafio-mobile" src="./github/desafio-mobile.png" width="150px"> <img alt="NextLevelWeek" title="#NextLevelWeek" src="./github/nextLevel-mobile.png" width="150px"> </p>

Web

<p align="center"> <img alt="Demo pomodoradev" title="Demo pomodoradev" src="./github/pomodorodev-web.gif" width="500px"> <img alt="NextLevelWeek" title="#NextLevelWeek" src="./github/desafio.png" width="500px"> <img alt="NextLevelWeek" title="#NextLevelWeek" src="./github/nextLevel.png" width="500px"> </p>

---

🚀 Como executar o projeto

Pré-requisitos

• [x] Git
• [x] Node.js

🧭 Rodando a aplicação web

# Clone este repositório
$ git clone https://github.com/thsthiago/pomodoro.dev.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd pomodoro.dev

Rodando aplicação com yarn:

# Instale as dependências
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ yarn dev

# A aplicação será aberta na porta:3000 - acesse:
$ http://localhost:3000

Rodando aplicação com npm:

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm run dev

# A aplicação será aberta na porta:3000 - acesse:
$ http://localhost:3000

---

🛠 Tecnologias

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

• ReactJS
• NextJS
• Axios
• Yarn
• React Font Awesome
• JS Cookie

Utilitários

• Protótipo: Figma → Protótipo (pomodoro.dev)
• Editor: Visual Studio Code
• Ícones: Font Awesome
• Fontes: Inter, Rajdhani

---

💜 Obrigado

Obrigado ao Diego e a todos da equipe da Rocketseat, por mais um NLW🚀 incrível!

👨🏽‍💻 Autor

<img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/61162365?v=4" width="100px;" alt=""/> <br /> _{<b>Thiago Cabral</b>}</a> <br />

---

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com ❤️ por Thiago Cabral 🚀