How I created a google forms clone using AWS

#aws #serverless #showdev #react

Introduction

Last month I decided to learn cloud, as it is a key requirement for most developer jobs and also because I have interest in web development. I started learning about different services of AWS like EC2, S3, DynamoDB, Lambda, etc.

So, I decided to use these services in a personal project. I chose to create a google forms clone as it was a challenging idea for beginner like me and it involved use of three key services of AWS i.e. Lambda, DynamoDB & S3. I decided to only include the key feature of google forms i.e. creating a customized form and sharing it with everyone so they can fill in their responses.

Backend

I chose to go with serverless rather than deploying my app on EC2. Backend consist of two services FormService & AuthService.

All functions in FormsService can be accessed via the API Gateway. All functions require user to be authenticated.

For authentication, I decided to go with Auth0 as it eases my work by providing all the tools I need for authentication. You can login into the app using username/password or Google OAuth.

Whenever a request is made to any of the functions. It is first passed to an authorizer lambda function. After checking user's credentials, authorizer returns a JSON Web Token. It is decoded & added into the request context property of the event which function receives. So function has access to user's info such as email, name, etc.

Now, we have total 5 lambda function as part of FormService.

createForm
getForm
getForms
submitResponse
getResponses

I think they are pretty much self explanatory. But still I will go over them.

createForm

This function receives all the form info such as title, description, questions, etc. It adds a form ID and form creator email and saves it to FormsTable, which is a DynamoDB table.

getForm

This function retrieves the form by form ID.

getForms

This function retrieves all forms of the logged in user. It gets user email from the decoded JWT and fetches all forms with form creator email equal to user email.

submitResponse

This function receives answers to all question of the form and saves the data in ResponsesTable.

getResponses

This function retrieves all responses of the given form using form ID.

Frontend

Frontend is basically a react app with three pages. A homepage which shows all your forms. From homepage, you can get the shareable link of the form to send to others and an option to download all the responses of the form.

Another page to create new forms and lastly a page which others see when they open sharable link. This is where they can fill out the form and submit it.

create form page was particularly challenging for me as I did not have much idea how to add new questions on click of a button. But I managed to solve that problem somehow.

Other than that I have used bootstrap to style the components. I am not much of a frontend guy. I can write logical code very well but can't design anything creative, so I decided to stick to a basic layout.

Result

In the end, I managed to create a good serverless app using the things I learned. It is deployed to AWS. The frontend is deployed to netlify, you can check it here.

I have also added a video demo of the project on LinkedIn.

Let me know what you think.