https://github.com/martonpaulo/pomodoro-timer
Manage your time effectively using the Pomodoro Timer. The application is built with a focus on simplicity, usability, and modern web development practices.
https://github.com/martonpaulo/pomodoro-timer
context-api react react-hooks-form styled-components typescript vite zod
Last synced: 22 days ago
JSON representation
Manage your time effectively using the Pomodoro Timer. The application is built with a focus on simplicity, usability, and modern web development practices.
- Host: GitHub
- URL: https://github.com/martonpaulo/pomodoro-timer
- Owner: martonpaulo
- License: mit
- Created: 2024-12-19T03:29:03.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-30T03:02:53.000Z (4 months ago)
- Last Synced: 2025-02-17T06:42:04.429Z (4 months ago)
- Topics: context-api, react, react-hooks-form, styled-components, typescript, vite, zod
- Language: TypeScript
- Homepage: https://martonpaulo.github.io/pomodoro-timer/
- Size: 556 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pomodoro Timer
Welcome to the **Pomodoro Timer** project! 🚀
This project is a sleek and modern Pomodoro Timer application designed to help you manage your time effectively using the Pomodoro Technique. The application is built with a focus on simplicity, usability, and modern web development practices.
Inspired by a tutorial from [RocketSeat](https://www.rocketseat.com.br/), the initial design is available on [Figma](https://www.figma.com/design/4tCa5znwYHpmT0bYGQp8u1/Pomodoro-Timer).
## 🛠️ Technologies Used
The project leverages the following technologies and tools:
- **React**, **React Router DOM**, and **Context API + Reducer**: React for building UIs, React Router for routing, and Context API with Reducer for state management.
- **TypeScript** and **Zod**: Type-safe JavaScript with TypeScript and schema validation with Zod.
- **Vite** and **ESLint**: Fast build tool (Vite) and code quality tool (ESLint).
- **Styled Components** and **Phosphor Icons**: Styling React components with Styled Components and using Phosphor Icons for flexible icons.
- **React Hook Form** and **immer**: Managing form state with React Hook Form and handling immutable state with immer.
- **date-fns**: Modern date utility library.
- **GitHub Pages** and **localStorage**: Hosting the project on GitHub Pages and storing user data locally using localStorage.
## 🌐 Live Project
The project is integrated with GitHub Pages, ensuring that every commit triggers an automatic deployment. The live version of the application is hosted on GitHub Pages.
🔗 **Live Project:** [martonpaulo.github.io/pomodoro-timer](https://martonpaulo.github.io/pomodoro-timer)
For more information about me and my other projects, visit my portfolio: [martonpaulo.com](https://martonpaulo.com)
## 🚀 Getting Started
To get started with the project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/martonpaulo/pomodoro-timer.git
```
2. Navigate to the project directory:
```bash
cd pomodoro-timer
```
3. Install the dependencies:
```bash
npm install
```
## 📜 Available Scripts
In the project directory, you can run the following scripts:
- **`npm run dev`** - Starts the development server at `http://localhost:3000/pomodoro-timer`.
- **`npm run build`** - Builds the project for production, outputting the files to the `dist` folder.
- **`npm run lint`** - Runs ESLint to lint the code and ensure code quality.
## 🔧 Future Improvements
Here are some planned improvements and features to be implemented:
- [x] Change route to `localhost:3000` 🚦
- [x] Add a favicon to the project 🌟
- [x] Document the technologies used in the project 📚
- [x] Add a LICENSE file to the project 📜
- [x] Host the project on GitHub Pages 🌐
- [x] Sort imports in the project 🧩
- [x] Add linting and formatting to the project 🧹
- [x] Write a detailed project description in GitHub 📝
- [x] Make the project responsive for mobile devices 📱
- [x] Test scenarios and fix bugs 🐛
- [x] Add a recording to the README file 📸
## 📄 License
This project is licensed under the **MIT License**. For more details, see the [LICENSE](LICENSE) file.