https://github.com/fabiocasadossites/react-ignitetime-rocketseat

Neste projeto, desenvolvi o segundo módulo do curso de React da Rocketseat. Com isso, adquiri uma vasta experiência em React e outras tecnologias relacionadas.
https://github.com/fabiocasadossites/react-ignitetime-rocketseat

hooks immer pomodoro-timer react reacy syled-components

Last synced: about 2 months ago
JSON representation

Neste projeto, desenvolvi o segundo módulo do curso de React da Rocketseat. Com isso, adquiri uma vasta experiência em React e outras tecnologias relacionadas.

• Host: GitHub
• URL: https://github.com/fabiocasadossites/react-ignitetime-rocketseat
• Owner: fabiocasadossites
• Created: 2024-07-21T05:29:58.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-21T05:47:20.000Z (6 months ago)
• Last Synced: 2024-07-21T06:41:18.932Z (6 months ago)
• Topics: hooks, immer, pomodoro-timer, react, reacy, syled-components
• Language: TypeScript
• Homepage: https://react-ignite-time-rocketseat.vercel.app
• Size: 129 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Imagem do projeto](src/assets/projeto.png)

# Projeto Ignite Time | Rocketseat

Neste projeto, desenvolvi o segundo módulo do curso de React da Rocketseat. Com isso, adquiri uma vasta experiência em React e outras tecnologias relacionadas.

### Veja o projeto online

🚀 [Link do projeto online](https://react-ignite-time-rocketseat-n2u5y6zjy.vercel.app/)

### Tecnologias Utilizadas

- React com Vite: ^18.3.1

- Typescript: ^5.2.2

### Funcionalidades

- Pode cadasatrar um novo projeto com nome e tempo de desenvolvimento;

- Pode para esse projeto em execução;

- Na área de listagem, pode verificar todos os projetos que já trabalho com o devido status de cada projeto;

- Gravando os cyclos em localStorage;

### Aprendizado

- Styled-components;

- Roteamento com React Autodown';

- Contextos;

- Reducers;

- Immer;

- React Hook Form;

- Validação utilizando o Hook Form Resolvers e Zod;

- Fornatação de datas e hora com date-fns;

### Bibliotecas

Biblioteca para auxiliar o estilo em css do projeto

```

npm i styled-components

npm i @types/styled-components -D

```

Biblioteca Eslint

```

npm i eslint -D

```

Biblioteca as configurações da Rocketseat do eslint, não esqueça de baixar a estenção do Eslint e deixar a pasta .vscode no seu projeto.

```

npm i @rocketseat/eslint-config -D

```

Biblioteca de rotas no projeto

```

npm i react-router-dom

```

Biblioteca de icones para o projeto: https://phosphoricons.com/

```

npm i phosphor-react

```

Biblioteca de formulários

```

npm i react-hook-form

```

Biblioteca de validação de formulários

```

npm i zod

```

Biblioteca para intregar a zod com a Hook form

```

npm i @hookform/resolvers

```

Biblioteca para trabalhar com datas e tempo

```

npm i date-fns

```

Biblioteca para trabalhar com dados imutavies

```

npm i immer

```

### Comandos

Comando para vasculhar erros do eslint no código

```

npx eslint src --ext .ts, .tsx

```

Comando para corrir todos os erros no eslint automaticamente em todo o projeto.

```

npx eslint src --ext .ts, .tsx --fix

```

### Como Executar o Projeto

1. Clone o repositório:

   ```bash

   git clone https://github.com/fabiocasadossites/react-igniteTime-rocketseat.git

   ```

2. Navegue até o diretório do projeto:

   ```bash

   cd nome-do-repositorio

   ```

3. Atualize o projeto, Em seu terminal e na pasta do projeto

   ```bash

   npm install

   ```

4. Rodar o projeto

   ```bash

   npm run dev

   ```




## 👨‍💻 Expert



    

    
&nbsp&nbsp&nbspFabio Augusto


    &nbsp&nbsp&nbsp

    

    GitHub | 

    LinkedIn

 | 

    

    Portfolio 

  







💻 com ❤️ por [Fabio Augusto](https://github.com/fabiocasadossites)