https://github.com/alex-alina/habit-hop-client
The client side of a responsive, full stack app using React | Redux | Styled components | Styled system | Formik. Users can add goals and habits they want to build or drop in order to achieve their goals.
https://github.com/alex-alina/habit-hop-client
formik jest js react reacttestinglibrary redux styled-components styled-system superagent
Last synced: 8 months ago
JSON representation
The client side of a responsive, full stack app using React | Redux | Styled components | Styled system | Formik. Users can add goals and habits they want to build or drop in order to achieve their goals.
- Host: GitHub
- URL: https://github.com/alex-alina/habit-hop-client
- Owner: alex-alina
- Created: 2023-02-13T23:39:19.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-30T13:52:04.000Z (over 2 years ago)
- Last Synced: 2025-02-10T01:41:51.614Z (9 months ago)
- Topics: formik, jest, js, react, reacttestinglibrary, redux, styled-components, styled-system, superagent
- Language: JavaScript
- Homepage:
- Size: 3.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## HabitHop - Description
This is the client side of a responsive, tested, full stack app where users can set goals and add habits they want to build or drop in order to achieve their goals.
The app has a signup and a login page and users have to make an account in order to use it.
Users can add, edit and delete goals and habits. For each habit they will choose their preferred units of measurement. Stats showing progress in reducing or building the frequency of the tracked habits will be available.
Users will be able to edit their user data and change a forgotten password. They will also be able to delete their account and all their information if they want.
Navigation between pages of the application is possible, and the forms include validation.
[The app's server can be checked here](https://github.com/alex-alina/server-habit-hop)
**Status: WIP**
Estimated MVP deployment time: end of July.
Demo samples can be seen in the last section.
## Tech stack
- React (hooks)
- Redux
- JavaScript
- Styled components
- Styled system
- Formik
- Superagent
- Jest
- React Testing Library
## Implemented Features:
- Sign-up / Log-in
- Log out
- Goals page (a maximum of three goals can be added)
- Add / edit / delete goal
- Forms validation (for all the forms used in the app)
- User can add habits they want to build and habits they have but want to drop
- Goal cards can expand to show overview of habits.
## Current work:
- Habits screen UI and functionality
- Editing and deleting habits
- Components development: Tooltip, Expandable card
- Features: user profile/settings, add a prompt to confirm user wants to delete goal
- Filter goal cards display
- Show / hide password functionality
## Future development and features
- User can fill in data for each habit practiced based on chosen units of measurement
- User can see stats for each habit
- Forgotten password functionality
- Users can see the time lapsed between start and end dates on each goal card
- Components needed for the new screen and functionality
- Refreshing JWT
- Reload page on JWT expiration
## Setup
- The backend server and DB of this project must be running for the app to function correctly. Check how to setup it up [here](https://github.com/alex-alina/server-habit-hop).
- Fork / Clone the repository `https://github.com/alex-alina/habit-hop-client`
- Install the dependencies using `npm install`
- Start the application using `npm run start`
## Motivation
My goal is to work on this project as part of effective practice with building and deploying a full stack app.
## Demo - desktop view
## Demo - mobile view
## License
MIT Licence - Copyright © 2023 - Alina Rusu.