https://github.com/josana-kla/project10-trackit

In this project I built a complete habit tracking application! Containing pages such as registration, login and many libraries
https://github.com/josana-kla/project10-trackit

axios circular-progress-bar create-react-app css3 dayjs javascript loading-spinner reactjs styled-components

Last synced: 28 days ago
JSON representation

In this project I built a complete habit tracking application! Containing pages such as registration, login and many libraries

Host: GitHub
URL: https://github.com/josana-kla/project10-trackit
Owner: Josana-Kla
Created: 2022-08-02T11:37:36.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2023-06-09T01:50:17.000Z (almost 3 years ago)
Last Synced: 2025-06-02T13:24:38.792Z (about 1 year ago)
Topics: axios, circular-progress-bar, create-react-app, css3, dayjs, javascript, loading-spinner, reactjs, styled-components
Language: JavaScript
Homepage: https://project10-trackit-brown.vercel.app/
Size: 1.89 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

TrackIt: Rastreamento de Hábitos

> Status do Projeto: 🟢 CONCLUÍDO

### Tópicos

:small_blue_diamond: [Descrição do projeto](#descrição-do-projeto)

:small_blue_diamond: [Acesso ao projeto](#acesso-ao-projeto)

:small_blue_diamond: [Como abrir e rodar o projeto localmente](#como-abrir-e-rodar-o-projeto-localmente)

:small_blue_diamond: [Funcionalidades da aplicação](#funcionalidades-da-aplicação)

:small_blue_diamond: [Demonstração da aplicação](#demonstração-da-aplicação)

:small_blue_diamond: [Tecnologias utilizadas](#tecnologias-utilizadas)

:small_blue_diamond: [Desenvolvido por](#desenvolvido-por)

:small_blue_diamond: [Contatos](#contatos)

## 🧾Descrição do projeto

O projeto foi feito utilizando principalmente React.js com intuito de criar um gerenciador e rastreador de hábitos pessoais. A aplicação conta uma página de criação e login do usuário. Ao fazer login, é possível criar, remover e atualizar hábitos, fazer o acompanhamento diário e semanal da lista de hábitos, quais foram concluídos e os que estão pendentes, a sequêncial atual e o recorde de dias mantendo um hábito. Também é possível ver a porcentagem de hábitos concluídos de forma gráfica.

(Voltar para o topo)

## 📁Acesso ao projeto

Você pode [acessar o código fonte do projeto](https://github.com/Josana-Kla/project10-trackit) ou [baixá-lo](https://github.com/Josana-Kla/project10-trackit/archive/refs/heads/main.zip).

Outra opção bem prática é você acessar o deploy da aplicação no Vercel por [aqui](https://project10-trackit-brown.vercel.app/).

(Voltar para o topo)

## 🔌Como abrir e rodar o projeto localmente

Inicializar o projeto TrackIt de rastreamento de hábitos em seu ambiente de desenvolvimento local é bem simples. Primeiro tenha certeza de ter o [Git](https://git-scm.com/downloads) e [Node.js](https://nodejs.org/) instalados e então siga os passos abaixo.

1. Clone o código fonte usando o terminal/prompt de comando

`git clone https://github.com/Josana-Kla/project10-trackit.git`

2. Abra o diretório do projeto na IDE de sua preferência

2. Instale as dependẽncias de desenvolvimento

`npm install`

3. Execute um servidor de desenvolvimento local

`npm start`

4. Acesse [http://localhost:3000](http://localhost:3000) no browser de sua preferência

Pronto! O projeto TrackIt já está funcionando!

(Voltar para o topo)

## 🔨Funcionalidades da aplicação

### O que foi feito:
- [x] Cadastro de usuário (e-mail, senha, nome e foto)
- [x] Login do usuário (e-mail e senha)
- [x] Menu com logo e perfil do usuário
- [x] Criação, deleção e atualização de hábitos
- [x] Rastreamento da sequência e recorde diário dos hábitos a serem feitos e concluídos
- [x] Visualização gráfica da porcentagem de hábitos concluídos
- [x] Listagem semanal de todos os hábitos

(Voltar para o topo)

## 🎬Demonstração da aplicação

### Abaixo temos simulações da aplicação:

Ao rodar a aplicação com seu navegador de preferência, você terá acesso a página de login do usuário contendo um formulário a ser preenchido com e-mail e senha. Caso seja o primeiro acesso, é possível fazer o cadastro do usuário clicando no link em azul: "Não tem uma conta? Cadastre-se!", que o redicionará para a página de cadastro, onde é necessário preencher os campos: e-mail, senha, nome e foto.

(Voltar para o topo)

## ✔Tecnologias utilizadas
### As tecnologias e bibliotecas utilizadas para o desenvolvimento do projeto foram:
- ``React.JS``
- ``Javascript``
- ``CSS``
- ``StyledComponents``
- ``Axios``
- ``DayJS``
- ``Loading Spinner``
- ``Circular Progress Bar``
- ``Git``
- ``Visual Studio Code IDE``

(Voltar para o topo)

## 👩‍💻Desenvolvido por

_{Josana Klagenberg}