Purpose

The purpose of this article is to show how you can leverage the power of React, C# in a serverless way of thinking. This will be done by designing a web app for survey app.

Our requirement

First, let’s determine what our requirements are. We want to implement the following use cases:

1. View questions one at a time.
2. Show the progress using text and progress bar.
3. Showcase selection from a number of options.
4. Be able to go next and back.
5. Show complete when all the questions have been answered.
6. Be able to the server application without worrying about buying, renting or provisioning of virtual machines for the server code.

Implementation

After defining our requirements, let’s start by setting up the serverless backend.  We need an account for AWS and familiarize ourself with AWS Lambda. Here we will use Visual Studio to create a “AWS Serverless Application”. This well loved IDE gives us a nice template to put in our serverless functions.

1. Get setup with AWS Lambda Tools:
   1. You can execute your unit tests.
   2. Shows how to deploy application.
   3. See instructions here.
2. Create and deploy our AWS Lambda project

• Open Visual Studio and press File > New > Project

• Once you created your project in Visual Studio, your Solution Explorer should look like this:

• To see the source code for your project and test, you can check out the code here.
• Once your code is up, tested and you are happy with it, you can deploy to AWS Lambda as shown here:

1. Open Solution Explorer in Visual Studio
2. Right click your project
3. Click Publish to AWS Lambda…
4. In the “Publish AWS Serverless Application” window, click Publish

To fulfil the Survey web app requirements from number 1-5, you can use Semantic UI React.

The front end for our Survey web app uses the following:

1. Axios – for making calls to the serverless api exposed via Amazon AWS Lambda
2. PropTypes – for ensuring type safety of states and functions
3. React – for writing multi-platform application and leverage javascript
4. React-Redux – for managing react state with actions, reducers and store
5. Redux-Thunk – for writing action creators that return a function instead of action.

Live survey application

Now we have our survey application live.

Summary

In conclusion, you can use React.JS for the frontend. For the backend, we can quickly use Visual Studio with C#. I believe this combination can accelerate your time-to-market because we leveraged template power of Visual Studio together with serverless technologies like AWS Lambda.

[Talking of specification, I can build your web/mobile app according to specification, custom to your business or products needs. You get regular delivery, I get paid. Sounds fair to you?  Contact me to discuss further.]