/penny-web

Penny Web UI

Primary LanguageJavaScript

Penny Web CircleCI

Penny (http://mypenny.co) is a free tool to help people split complicated group expenses with their friends. The service is launched in 2016 and getting more and more popular nowadays because it's so easy to use. Not like other group expense tool, Penny doesn't require sign up or login. You just need to share the URL to your friends, then everyone can start filling the expense they paid from their own device. In the meantime, the settlement will be calculated automatically to guide you how to pay out.

Just like the backend, I've open sourced this web UI of Penny in 2018. This single page application is written in React, Redux and Semantic-UI. The amazing styled-components, Webpack and Babel also help to make it happen. The static files are hosted on AWS S3. DNS is managed by AWS Route 53 and CDN is hosted by CloudFront. Remember, if possible, do not use Google Cloud.

Development

This project uses webpack-dev-server to spin up local server

  1. Make sure node 8+ and npm 5+ are installed.
  2. Install dependencies 
    npm i
  3. Start local web server 
    npm run start

Deployment

This project use Circle CI to deploy master changes to production. Webpack will generate prod bundle and it will be synced to AWS S3. In case you need to manually deploy:

  1. Make sure awscli is installed and properly authorized
  2. Create production build first 
    npm run build
  3. Copy files to mypenny.co S3 bucket 
    aws s3 sync ./build s3://mypenny.co --delete

TODOS

  1. React Final Form
  2. Redux Database
  3. Redesign
  4. Async Await
  5. Refactor
  6. PWA
  7. Fix linting