Habit Circle is a habit tracker that provides an appealing data visualization of monthly progress to motivate the completion of daily tasks. Rendering a circle with a ring for each habit you are a tracking and a slice for each day of that month, users can click on squares to color in habits and record completion, allowing user to playfully engage, track success, and visualize outcomes. This simple click to mark a habit complete is fun and simple.
This is Habit Circle's backend. You can find the frontend repository here.
✨ Watch Demo.
- React frontend
- Rails API backend
- Semantic UI for styling
- useState, useContext and useReducer hooks to manage global state
- d3 charting library to render nested donut charts to visualize outcomes
- JSON Web Tokens, Rails Bcrypt and localStorage to store encrypted user information client-side
- Fork and clone this repository and the frontend repository onto your local environment.
- Open a terminal and cd into the backend folder. Run rails s to launch backend server.
- Open a second terminal and cd into the frontend folder.
- Run npm start to launch front end. Follow the prompts to create account or login.