Sample customer management application. Frontend built with GatsbyJS, and backend built with Azure Function App nodejs.

Stacks & Libraries Used:

• Gatsby V2, a static site generator with React frontend https://www.gatsbyjs.org/
• Bulma CSS framework https://bulma.io/
• Bloomer https://bloomer.js.org, a React component wrapper for Bulma
• axios https://github.com/axios/axios, a HTTP client
• React Hook Form https://react-hook-form.com/, form validation helper

Demo at https://demo-crm.surge.sh

My codes are at src\pages\index.js and azure_function_app folder. All the other files & folders are generated by Gatsby. 😁

I prefer to separate the application into two distinct components, the frontend part and backend part. The frontend part is a static page generated by Gatsby. The backend part is using serverless function offering by Microsoft, called Azure Function App, an alternative to AWS Lambda.

Why? I could use AngularJS and make this into SPA, and then host it at Heroku. That also works. 😁

I'm actually borrowing the idea of recent trends of headless WordPress. Traditional WP sites are monolith application, in case of performance issues, its kinda hard and expensive to scale, since we have to scale the whole application itself.

What headless WP does, is to separate the application into frontend and backend part. So if problem arises, we can choose to scale either frontend or backend part separately, which will result in much cheaper cost.

So with this in mind, I choose serverless functions. 😁

1. Start developing.

   npm install
   gatsby develop

2. Open the source code and start editing!

   Your site is now running at http:https://localhost:8000!

1. It would be nice to add profile picture as well.