Utage

Event / Party Planning app that is installable and accesible, with offline usability.

Browsers support ^{_{made by godban}}

Firefox	Chrome	Safari	Opera
last version	last version	last version	last version

Key Features

• facebok login
• Responsive design / Cross platform
• Installable on Mobile Devices
• Offline first. App works in bad internet connection or offline
• Accessibility (Visuality impaired, Screen reader, Keyboard only navigation, Color blindness friendly)
• Using Geolocation API to calculate the distance to the event location
• Account / Setting Page (Notification enable/disable, Userinfo, etc)
• Push Notification / Web Notification API on newly available event

In Future

• Conversation / Comments section in Single Event Page
• Testing
• Better icons, photos, etc

How to run locally

git clone git@github.com:yhagio/utage.git
cd utage
npm install
npm run prod
npm run prod:run

Go to http://localhost:8080/

For development (No support for service worker/offline)

npm run start

Tech Stack & Tools

• Firebase (database, deployment)
• Facebook login
• React.js + React-Router + Immutable.js (UI)
• Redux (state management)
• SW-Precache + SW-Toolbox (Offline feature)
• Webpack (Module bundling, development)

Resources

GoogleMap

• react-google-maps library

Offline

• Google: Service Worker Libraries SW-Precache/Toolbox
• Blog: Improve (offline) user experience with Service Worker Toolbox

Accessibility

• Accessibility Developer Tools for Chrome

Geolocation API

• MDN Using geolocation

Image Optimization

• Image Source (Unsplash)
• Optimizilla
• Image Optim

For Deployment

• https://firebase.google.com/docs/cli/

npm i -g firebase-tools
firebase login
firebase init
firebase deploy

Testing

• Mocha for test runner
• Chai for assertion
• Sinon for spy
• Enzyme for component testing
• Istanbul for the coverage

Testing files are in ./test directory. To run testing,

npm run test

To see the coverage + to see the report in your browser,

npm run cover

• Redux testing doc