heyacherry/Serverless-ReactNotes

Serverless ReactNotes

This is a SPA built with React and AWS Serverless service. And this demo will keep improving in coming July 2017. Fun:blush:

---

Story

A problem is a chance for you to improve yourself and do your best.

I have built SPAs with vueJS(demo) and React(demo), but it is my first time to get deep into Serverless 🤔 . So what's this, is it something like the heroku or websphere I use before? Then I did some study on Serverless (I asked google/gitter chatroom/youtube) and I found no, it is not like backend technicals I applied beore. I feel lucky that I got this chance to study serverless Architectures.

Serverless Stack comes with below advantages:

• Low maintenance
  You don't need to worried about server maintance(Such as the issues I met in my previous company: hight cpu, disk storage and perfoemance), as you push the code to third-party platforms and run there.
• Low cost
  You will be charged when there is request.
• Easy to scale
  Overall, all you need to worry about is the code.You can foucs on your code,your product and user experience.

I spent some time on Serverless Architectures and I built a Serverless-ReactNotesApp with
React(Create React App) + React-bootstrap + React-Router + AWS S3 + Serverless Framework(API Gateway + Lambda) + Dynamodb

I got stuck on seeting issues with API Gateway, the features like Login/Signup/CURD work well(sometimes there will network issue.), So the UI may be not perfect. But I will keep on improving this demo:grin: Here is the demo
Play around: username hello@world.com / password Hello2World!

Structure

• FrontEnd-ReactNotes

  • SPA - Build with React(Create React App) + React-bootstrap + React-Router.
  • Amazon Cognito
    • User Singup & Login
    • Identification
  • Call API Gateway
    • Creat Notes
    • Read Notes
    • Update Notes
    • Delete Notes

• BackEnd-serverless-api

  • Serverless framework - Amazon API Gateway + AWS Lambda
  • Deploy API Gateway
    • Creat Notes
    • Read Notes
    • Update Notes
    • Delete Notes
  • Mock test

Where I got stuck

• API Gateway CROS Diabled
  • checked the API Console
  • checked serverless.yml
  • Added header response

• Internal Server Error / 403(Forbidden) / 401(Unauthorized)
  Sometimes the client side will get above responses while there is verified user/content in database and the userToken work in API test Console