https://github.com/joaoplgaspar/studies-timing

Defina tarefas e o tempo para conclui-las, com um formulário, lista e cronometro funcional.
https://github.com/joaoplgaspar/studies-timing

css cssmodules html javascript js jsx organization react reactjs reactts sass scss studies ts tsx typescript vitrinedev

Last synced: 1 day ago
JSON representation

Defina tarefas e o tempo para conclui-las, com um formulário, lista e cronometro funcional.

• Host: GitHub
• URL: https://github.com/joaoplgaspar/studies-timing
• Owner: joaoplgaspar
• Created: 2023-08-10T16:43:19.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-10T16:59:06.000Z (about 1 year ago)
• Last Synced: 2024-09-21T03:03:27.936Z (6 days ago)
• Topics: css, cssmodules, html, javascript, js, jsx, organization, react, reactjs, reactts, sass, scss, studies, ts, tsx, typescript, vitrinedev
• Language: TypeScript
• Homepage: https://studies-timing.vercel.app
• Size: 185 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 Studies (Alura Studies) 


![Static Badge](https://img.shields.io/badge/Status-_Finalizado-green?style=for-the-badge)

Site para definir um plano de estudos e os seus devidos tempos, com uma lista mostrando todos os itens e um cronometro para informar quando o tempo for atingido a cada tarefa.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Alura Studies**

| :label: Tecnologias | react, typescript, html5, sass, javascript

| :rocket: URL         | https://studies-timing.vercel.app



![Alura Studies](https://github.com/joaoplgaspar/studies-timing/assets/130015259/a1faa676-edf1-47b0-865c-8ef57811b91e#vitrinedev)



## Resumo do projeto

Projeto proposto por um curso Alura para ensino de React com Typescript. O Alura Studies tem como objetivo organizar seus estudos, com a entrada do nome da tarefa e o seu tempo, mostrando em uma lista organizada todos os itens, neste ponto é possível selecionar uma tarefa e iniciar o cronometro, ao fim do tempo a tarefa é concluída na lista. Foi trabalhado os tópicos de organização de um projeto Typescript React, componetização, uso de modules css e sass, spreads operators, interface reutilizaveis e types no Typescript, uso de estados, ciclo de vida de um componente, useEffect e refatoração de um class component para um function component.

![Studies Gif](https://github.com/joaoplgaspar/studies-timing/assets/130015259/b0025d20-9899-48c9-a71b-0449c2667752)

# :hammer: Funcionalidades do projeto

- `Funcionalidade 1`: Adicionar uma tarefa com nome e tempo para ser concluída através do formulário

- `Funcionalidade 2`: Selecionar uma tarefa na lista com todas as tarefas

- `Funcionalidade 3`: Iniciar um cronometro para a tarefa selecionada, que ao final do tempo será concluída

## ✔️ Técnicas e tecnologias utilizadas e desenvolvidas

- ``React com TypeScript, JavaScript, Html, Css e Sass``

- ``Manipulação do estado do objeto``

- ``Componentização``

- ``Modulos de Css e Sass``

- ``Spreads Operator``

- ``Interfaces reutilizaveis em TypeScript``

- ``useState e useEffect``

- ``Ciclo de vida de um componente``

- ``Refatoração de um class component para function component``

# 🛠️ Abrir e rodar o projeto

**Utilize `npm install` dentro da pasta do projeto para baixar suas pendências**

**A seguir `npm start` para iniciar o projeto**