This is a project that manages your daily tasks and gives you access to how much time have you used and how many time have you spent on them. It also provides a chart where you can visually track the progress of the last week.
| Dependency title | Version |
|---|---|
| next | 14.0.4 |
| react | 18 |
| eslint | 8 |
| prettier | 3.2.4 |
| typescript | 5 |
| mui/material | 5.15.4 |
Install dependencies :
npm run install
Run the dev server :
npm run dev
Get a list of files that need formatting :
npm run format
Format all the files that needed formatting :
npm run format:fix
Run the unit tests :
npm run format:fix
| Directory | Content
| ------------- | -------------
| components | Components that are used in parent compoentns
| helpers | Functions that are used across different files
| pages | Components that act as the pages in the application
| styles | Global styles, mixins, themes are places here
| tests | Unit tests for components
In this application the functionalities that the user can do are the following :
- Create a task.
- Update the description and duration of the task.
- Delete a task.
- Reorder the list of tasks by description, duration or status.
- Start, pause, resume and finish the timer for a given task.
- See a list of finished tasks.
- Check a graphic of the finished tasks in the last week.
- Filter the set of tasks by their duration (Short, Medium, and High).
- Support dark mode based on the user's OS settings.
- The responsiveness is preserved across devices.
I used the project to keep track of the tasks and worked in branches.
https://github.com/users/MFRamon/projects/1/views/1
When I started working on the idea of how I would love to see the project in real life I used the Freeform to create a basic skeleton mockup so I can stablish the visual idea that I wanted to focus. This is how it looked in the begining.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.