About | Features | Technologies & Requirements | Show Off | Starting | License | Deploy & Repository | Author
The Focus Time application is a simple tool for managing your time and increasing your productivity. Using customized intervals of 5 minutes, the application helps you to work in focused sessions and keep track of your progress. It presents only three states: completed, in progress, and suspended.
The application aims to solve the problem of lack of focus and productivity during work sessions. By using a simple and customizable timer, it encourages users to work in focused sessions and take breaks to recharge their energy.
This project was created to practice fundamental concepts of React Hooks like useContext, useState, useEffect, useForm, useReducer, and Date Formatting. The main idea is to provide a simple and effective tool while improving React skills and learning how to use Hooks to manage state and form data.
☑️ Customizable Timer: allows the user to set the timer duration in 5-minute intervals.
☑️ Timer States: presents three timer states: completed, in progress, and suspended.
☑️ Task Listing: displays a list of completed, suspended, or in-progress tasks.
☑️ Integration with React Hooks: the application uses fundamental concepts of React Hooks such as useContext, useState, useEffect, useForm, and useReducer.
☑️ Integration with third-party libraries: the application uses various third-party libraries such as react-router-dom, styled-components, date-fns, phosphor-react, and react-hook-form.
☑️ Responsive Design: the interface adapts to different screen sizes.
🔲 Sound notifications: Adding sound notifications to the timer could be a helpful feature for users who want an audio cue when their timer is complete. Users could have the option to choose from different notification sounds or upload their own audio file.
The following dependencies were used in this project:
-
"date-fns": a library that provides various functions for formatting and manipulating dates and times in JavaScript.
-
"immer": a library for simplifying the creation and updating of immutable data structures.
-
"phosphor-react": a library of SVG icons that can be used in React applications.
-
"react": a JavaScript library for building user interfaces.
-
"react-dom": a package that provides DOM-specific methods for React.
-
"react-hook-form": a library for managing forms in React using hooks.
-
"react-router-dom": a library that provides routing functionality for React applications.
-
"styled-components": a library that enables developers to write CSS in JavaScript, making it easier to create and manage styled components in React.
Before starting 🏁, you need to have Git and Npm installed.
# Clone this project
$ git clone git@github.com:KayoRenato/FocusTime.git <Project-Name>
# Access
$ cd <Project-Name>
# Install dependencies
$ npm i
# Run the project
$ npm run dev
# The server will initialize in the <http://localhost:5173>This project is under license from MIT. For more details, see the LICENSE file.
Donate behind the QR code if this work helps you and you want to collaborate with a coffee ☕.
Nubank Pix