Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/claudiarojassoto/pomodoro_clock

Boost productivity with timed sessions. Set customizable breaks, sessions & timer controls. Stay focused and efficient. 🍅⏰
https://github.com/claudiarojassoto/pomodoro_clock

actions components javascript reactjs reducers redux store

Last synced: 19 days ago
JSON representation

Boost productivity with timed sessions. Set customizable breaks, sessions & timer controls. Stay focused and efficient. 🍅⏰

Awesome Lists containing this project

README 

        





  



  
Pomodoro_Clock






# 📗 Table of Contents



- [📗 Table of Contents](#-table-of-contents)

- [📖 Pomodoro\_Clock ](#-pomodoro_clock-)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

    - [Key Features ](#key-features-)

  - [🚀 Live Demo ](#-live-demo-)

  - [💻 Getting Started ](#-getting-started-)

    - [Project Structure](#project-structure)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Run tests](#run-tests)

  - [👥 Authors ](#-authors-)

  - [🔭 Future Features ](#-future-features-)

  - [🤝 Contributing ](#-contributing-)

  - [⭐️ Show your support ](#️-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)



# 📖 Pomodoro_Clock 



Pomodoro_Clock its a versatile application. Experience a highly functional clock app. Easily set session and break durations, watch an interactive countdown, and receive audio alerts. Build a unique experience using HTML, JavaScript, CSS, and React. Explore time management efficiently and effectively!

## 🛠 Built With 



### Tech Stack 



  React-redux

    



  HTML

  



  CSS

  
    

        
  • The CSS is used to provide the design in the whole page.
    • 

      



  Linters

  
    

        
  • The Linters are tools that help us to check and solve the errors in the code
    • 

        This project count with two linters: 

        
      

            
    • CSS
      • 

            
    • JavaScript
      • 

          
    

      



### Key Features 



- **SPA**

- **CRA**

- **Styles**

- **Router**

- **Logged**

- **Toolkit**

- **React-Redux**

- **Jest & React Test Library**

- **Deployment**



(back to top)



## 🚀 Live Demo 



> You can see a Demo [here](https://pomodoro-clock-cnpt.onrender.com).



(back to top)



## 💻 Getting Started 



> To get a local copy up and running, follow these steps.

> This project requires Node.js and npm installed on your machine.



> -Node.js

> -npm



> -Clone this repository to your local machine using:



>  git clone https://github.com/ClaudiaRojasSoto/Pomodoro_Clock.git



> -Navigate to the project folder:



> cd math_magicians



> -Install the project dependencies:



> npm install



> To start the development server, run the following command:



> npm start



### Project Structure



> The project follows the following folder and file structure:



- `/src`: Contains the source files of the application.

- `/src/index.js`: Main entry point of the JavaScript application.

- `/src/App.js`: Top-level component of the application where components are rendered.

- `/src/components`: Directory for React components.

- `/src/components/BreakControl.js`: Component for the Break Control.

- `/src/components/Timer.css`: Styles for the app.

- `/src/components/Timer.js`: Folder for the Timer.

- `/src/components/SessionControl.js`: Folder for the Session Control

- `/src/components/TimerControls.js`: Folder for the Timer Controls

- `/src/redux`: Directory for Redux management.

- `/src/redux/store.js`: Redux store configuration.

- `/src/redux/actions`: Folder for Redux actions.

- `/src/redux/actions/actionType.js`: Actions for action Type management.

- `/src/redux/actions/breakActions.js`: Actions for break Actions management.

- `/src/redux/actions/sessionActions.js`: Actions for session Actions management.

- `/src/redux/actions/timerActions.js`: Actions for timerActions management.

- `/src/redux/reducers`: Folder for Redux reducers.

- `/src/redux/reducers/breakReducer.js`: Reducer for break management.

- `/src/redux/reducers/sessionReducer.js`: Reducer for session management.

- `/src/redux/reducers/timerReducer.js`: Reducer for timer management.

- `/src/redux/reducers/rootReducer.js`: Reducer for root management.

- `/public`: Contains the public files and assets of the application.

- `/public/index.html`: Base HTML file of the application.

- `/build`: Contains the generated production files.



### Setup



> Clone this repository to your desired folder: https://github.com/ClaudiaRojasSoto/Pomodoro_Clock .git



### Install



> Install this project with: install Stylelint and ESLint



### Usage



> To run the project, execute the following command: just need a web Browser



### Run tests



> To run tests, run the following command: npm start

> you just need a simple web browser to run this project for a test



## 👥 Authors 



👤 **Claudia Rojas**



-   GitHub: [@githubhandle](https://github.com/ClaudiaRojasSoto)

-   LinkedIn: [LinkedIn](inkedin.com/in/claudia-rojas-soto)

-   AngelList: [AngelList](https://wellfound.com/u/claudia-rojas-2)



(back to top)



## 🔭 Future Features 



-   **User keys - login**



(back to top)



## 🤝 Contributing 



> Contributions, issues, and feature requests are welcome!



> Feel free to check the [issues page](https://github.com/ClaudiaRojasSoto/Pomodoro_Clock/issues).



(back to top)



## ⭐️ Show your support 



> If you like this project show support by following this account



(back to top)



## 🙏 Acknowledgments 



> -   Microverse for providing the opportunity to learn Git and GitHub in a collaborative environment.



> -   GitHub Docs for providing a wealth of information on Git and GitHub.



(back to top)



## 📝 License 



> This project is [MIT](MIT.md).



(back to top)