In this project, I built the front-end side of a tracking application that allows you to track your daily tasks to install a healthy daily routine. This project was built following the specifications and user stories given here: Click here to read the projects specifications
- Secure authentication system that connects to Devise and JWT authentication in the Back-and
- Admin panel that allows the editing of routines' categories
- It allows the user to create a task that belongs to a routine selected from a list made by the Admin.
- It allows the user to take a measurement for a task.
- It displays lists of routines and tasks ordered by priority.
- It displays charts and statistics of the progress.
- It displays a timeline of the measurements.
- About the project
- Built with
- Live demo
- Back-end Api
- Screenshots
- Dependencies
- Linting tools
- Getting started
- Automated tests
- Author
- Contributing
- Acknowledgments
- License
To demo admin feature:
- username: 'admin'
- email: admin@test.com
- password: 123456789
The main dependencies used in this web application:
| Dependency | for | Development | Test | Production |
|---|---|---|---|---|
| React | JS library for building user interfaces | ⭐️ | ||
| Redux | A Predictable State Container | ⭐️ | ||
| Prop-types | Runtime type checking for React props | ⭐️ | ||
| Redux Thunk | Middleware for basic Redux side effects logic | ⭐️ | ||
| Axios | Promise based HTTP client for the browser and node.js | ⭐️ | ||
| stylelint | Css linter | ⭐️ | ||
| eslint | Javascript linter | ⭐️ | ||
| Jest | JavaScript testing framework | ⭐️ | ||
| Enzyme | JavaScript Testing utility for React | ⭐️ | ||
| Enzyme-adapter-react-16 | Adapter to use Enzyme with React 17 | ⭐️ | ||
| react-addons-test-utils | React Test Utilities library | ⭐️ | ||
| react-test-renderer | To take snapshots of the "DOM tree" rendered by a React DOM | ⭐️ | ||
| redux-mock-store | Allows to make a redux store for testing | ⭐️ | ||
| history | To manage session history | ⭐️ | ||
| jwt-decode | Decodes JWTs Base64Url encoded tokens | ⭐️ | ||
| Bootsrap | Styling framework | ⭐️ | ⭐️ | |
| react-validation | Forms validation library | ⭐️ | ⭐️ | |
| React-Bootstrap | Bootstrap 4 components built with React | ⭐️ | ⭐️ |
| Linter | Use | Files |
|---|---|---|
| eslintrc | Linting Javascript files | .js |
| Stylelint | Linting styling errors | .css .scss |
To get a local copy of the repository, please run the following commands on your terminal:
$ git clone git@github.com:CalyCherkaoui/task-track-front-end.git
$ cd task-track-front-end
$ git branch feature
$ git checkout feature
$ npm install
$ npm run build
$ npm start
To lint Js code:
$ npx eslint . --fix
To lint the Styling:
$ npx stylelint "**/*.{css,scss}" --fix
To run the tests:
$ npm test
👤 Houda Cherkaoui
- Github: @CalyCherkaoui
- Twitter: @Houda59579688
- Linkedin: Houda-Cherkaoui
Contributions, issues, and feature requests are welcome!
Give a ⭐️ if you like this project!
- Hat tip to stackoverflow comunity.
- Hat tip to Microverse TSE for Code Review.
- Hat tip to anyone whose code was used
All source code is available jointly under the MIT License. See MIT licence for details.