Track It

About

Track it is an application that helps you to easily create and maintain good and healthy habits.

The focus of this project is to further develop Front End skills and the concept of single-page applications, changing from vanilla JavaScript to React, using HTML5, CSS3 (with styled-components lib) and React itself. Or view here!

---

Features

• Mobile Layout

• Homepage (Today) experience:

  • Load the list of habits assigned for the current day;
  • Mark habits done or undone;
  • Track the percentage of completed habits;

• Habits session

  • Show all registered habits;
  • Let you create and erase habits;

• History session

  • Future session, to be implemented, that shows a calendar with highlighted color indication that differentiates days by habits accomplishment;

---

Layout

The application layout is available on Figma:

Demo (Mobile)

Tech Used

The following tools were used in the construction of the project:

• 
• 
• 
• 

Utilities

• Prototype: Figma → Prototype (Track It)
• Editor: Visual Studio Code
• Fonts: Lexend Deca, Playball

---

How to run

1. Clone this repository
2. Install dependencies

npm i

3. Create .env file in origin and insert

REACT_APP_API_BASE_URL="https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit"

4. Run the front-end with

npm start

Authors

_{André Carmo}

License

👋🏽 Get in Touch!

---