An alarm clock app with weather forecasts meant to be used on your phone. This project was designed by Xiaotong Yuchi.

The design was intended to be built on the iOS or Android platform. However, I wanted to challenge myself by building a dynamic web application that relies entirely on managing all logic, data, and the view locally.

• Performant. Must feel like a native app.
• Responsive. UI shouldn't break on mobile devices

• separate time-wheel into its own component, eliminating duplication across EditAlarmPage and AddAlarmPage
• split up scss file
• setup react router
• look into creating a progressive web app
• create splash screen
• highlight time-wheel to pink on tap
• add on-hover effects to buttons
• add transitions between pages
• add animation to open/close days container
• align Wakey title

1. Compile with webpack
2. Install vulcanize
3. Run

vulcanize indexsource.html > index.html

• Audio will not autoplay when the alarm is triggered on mobile. No workaround. Reason is autoplay attribute is disabled on mobile browsers. Link. Wish I'd known this before I started the project :(

Live Demo

Libraries: React, Polymer, react-polymer, react-localstorage, XScroll, Prefixfree, Dragdealer

Tools: webpack, bower, npm, vulcanize