Mindful-Timer

• 

  Landing Page

• 

  Timer page

• 

  displaying exercise notification

Inspiration

The inspiration for this project came from the desire to implement a simple application that could perform a meaningful health-related task.

What it Does

Mindful Timer helps users generate random exercises and provides a timer to monitor how long they take to complete each exercise.

How We Built It

The application was built using React.js for functionality and TailwindCSS for styling.

1. I started by implementing the timer component, which performs the core functionality of the application.
2. Afterward, I designed and built a simple yet engaging landing page.

Challenges We Ran Into

While building this application, I didn’t encounter any major problems since I leveraged ideas and knowledge I was already familiar with. The minor challenges I faced included:

1. Setting up TailwindCSS to work properly.
2. Configuring the routes using React Router.

Accomplishments That We’re Proud Of

I’m proud of the visually appealing landing page. Although the timer page is simple, the overall user interface is clean and user-friendly, which I’m happy with. What We Learned

The key takeaway for me was learning more about Framer Motion. This was my second time using it, but through this project, I familiarized myself with some of its advanced features. What’s Next for Mindful Timer

Future plans for Mindful Timer include:

1. Enhancing the user interface for better aesthetics and functionality.
2. Adding new pages to extend the application's features.
3. Transitioning from local storage to a real backend for saving data more reliably.

Built With

• react
• react-router
• tailwind