Memo is a minimalistic, Google Keep -like progressive web application where you can keep notes. Currently notes can contain only text but preview of any given url is fetched. Application integrates with AWS infrastructure and services.
Try it out @ http://pwa-memo.com <- expired :(
Even if you identify as conservative, don't worry! You can still use Memo as progressive web applications have no liberal agenda. It just means that Memo is, among other things, responsive, installable and offline capable.
- Responsive
- Can be used on any device with any (modern) browser, layout adapts to screen size
- Installable
- Application can be used via web browser but it can also be installed as application on your computer or added to your phone's Home screen
- Offline capable
- Application can be used even without internet connection
When logged in and there's no connectivity, you can continue using the application as usual. When connection is detected, all changes you have made are synchronized with the backend. In this case you'll see a small "badge" pop up to indicate number of changes pending on the local device.
Here, I drew a picture and all.
In short, application is stored and hosted in a S3 bucket. Application is cached on multiple AWS edge locations as Cloudfront distribution. Route 53 routes requests to pwa-memo.com domain to these distros. Once web page is loaded, user is authenticated against Cognito user/indentity pools and client receives token that allows access to AWS services (namely, the GraphQL API). Serverless backend, the AppSync, handles GraphQL mutations and connection between application and the DynamoDB database.
Just because I wanted to get my hands dirty with various AWS services and tools they provide.
npm install
amplify config
amplify push
ng serve
Navigate to http://localhost:4200/
Note that you need to have AWS account and additional tasks may be required on the AWS console side.
ng build or ng build --prod for a production build.
http-server dist/pwa-memo -o to run locally.
ng test runs unit tests via Karma.
ng e2e runs end-to-end tests via Protractor.