MotivaClock

Inspiration

I wanted to create something that would help me start each day with intention. Instead of just checking the time on my phone and getting distracted by notifications, I envisioned a clean, beautiful clock that would also give me a moment of reflection through meaningful quotes.

What it does

MotivaClock is a minimalist web app that displays the current time alongside inspirational quotes that change based on the time of day. Users can select their current mood, which influences the overall experience, and save their favorite quotes. The app features a beautiful gradient theme that adapts to different times of day (morning, afternoon, evening, night) with smooth animations and a modern glass-morphism design.

How we built it

Built with React and TypeScript for type safety and component reusability. Used Tailwind CSS for rapid styling and responsive design. The app features:

Real-time clock with custom formatting
Mood-based theming system
Local storage for user preferences
Quote categorization and favoriting system
Responsive design with smooth animations
Glass-morphism UI with backdrop blur effects

Challenges we ran into

The main challenge was creating a smooth, responsive theme system that could dynamically change based on time of day while maintaining good performance. Managing state between different components (time, mood, quotes) without over-complicating the architecture was also tricky. Getting the animations and transitions to feel natural rather than jarring took several iterations.

Accomplishments that we're proud of

Created a genuinely useful daily tool that I actually use. The theme system turned out really elegant - the way colors and gradients shift throughout the day feels natural and calming. The quote system with time-based selection adds real value without being overwhelming. The UI feels polished and modern without being over-designed.

What we learned

Learned a lot about creating cohesive design systems in code. Got better at TypeScript interfaces and custom hooks. Discovered how important it is to test an app in real daily use - several features only made sense after using it for a week. Animation timing is crucial for user experience.