Scribble : Notes everywhere!!!

Shaurya Chauhan
Nov 1 · 5 min read

INTRODUCTION:

I am a kind of person who tends to forget things very easily. Notes are a very essential part in every student’s life. I have basically created a simple note taking web application which will help you create notes, update notes, delete notes. You can also add various attachments in my application like a photo, video and even a GIF.

I have used React in my front end and Node.js in my back-end. My back-end is built using Amazon web services serverless computing, i.e, AWS Lambda functions.

PROBLEM STATEMENT:

Nowadays as most of the things are online and everyone prefers everything on a soft copy format instead of buying a new notebook and spending some money, soft copy being more secured and easily available, notes are an essential part in while learning or remembering something. My note taking website will first let you create your account so that everything is safe and completely secured. All the notes will be stored in AWS and the backend will be serverless. In near future our application will have a premium feature in which the users will have an access to our plugin in which the user can take down notes on whichever site he or she is on without changing tabs and visiting our website again and again. It will be a much more efficient way and will save user time. Serverless computing is done in my project so that the developer need not worry about any servers in his back-end. The user will only be charged when he or she uses the resources. Serverless has low maintenance and is cost effective.

WHY SERVERLESS COMPUTING??

There are a many reasons why a serverless application is preferred over server hosted application:

1. Low maintenance.

2. Low cost.

3. Easily scalable.

TECHNOLOGIES USED:

Below are the list of technologies used in my back-end and front-end application.

Lambda & API Gateway: For our serverless API

DynamoDB: For our database in the back-end

Cognito: For each user authentication and even securing our APIs

S3: For hosing our application and file uploads (attachments in every notes)

React.js: For our single page front-end application

React Router: Helps in page navigation without refreshing

Bootstrap: For UI kit

WORKING OF THE APP

In this particular section I will be talking of the source of data in my project, what actually is happening in the front-end and what actually is happening in the back-end.

SOURCE OF DATA:

In my project the source of data will be the notes which have been made by the user through my web application or through the plugin which will be made in the coming weeks. The input provided by the user would be my source of data in this project.

FRONT-END:

Talking about my front-end in a little bit more detail. I have setup my project using React application. All the favicons, fonts and UI Kit has been done using bootstrap libraries.

Basically my front-end will have a homepage giving a description about my application. It will also have a signup and a login option. It is a single page application built in react. When you signup in our application using email id and password it will ask for a verification code which makes the environment much more secured and less vulnerable to attacks. I have used AWS Cognito SDK to login and signup users in my application. When the users will try create note, update note, delete note an API request will be sent to our back-end APIs to manage our notes. I have also used AWS JS SDK to upload files which the user can add as an attachment. All these attachments will be stored in an S3 bucket.

Application on web
Application on mobile

BACK-END:

The back-end of the application is built using Amazon Web Services. I have Chosen a serverless back-end because the developer need not worry about the servers, it is easily available and very cost effective. The user must only pay when it uses the application. The notes created by the user will be completely secured by our back-end. No privacy infringement will take place as users are our first priority. We have created some APIs like Update Note, Create Note etc in our back-end.

REMAINING WORK:

I have created a web application of my note taking application using Node and React. To make my application further more attractive I will create a plugin in the coming updates so that a user can take down notes in which ever site he wants by just opening the plugin. If a user is studying or reading something in any website he or she can just open the plugin and take down notes instead of coming again and again to our web application. It will be more efficient and less time consuming. Attaching the plugin to my front-end and even combining the back-end of my web application and my plugin will be a challenging task.

CHALLENGES FACED:

The storage space provided under the free tier agreement was difficult to accommodate. As web development spans over a wide scope it was a challenge to learn workings of a web application. As errors occurring during serverless computing were not very familiar, it was a challenging task to find the solution and proper approach was not that easily available online

CONCLUSION:

It was great learning experience building this application. I was working on various machine learning projects in my past three years. I wanted to know a little bit more about how to create a web application and how to achieve my goal on being a full stack developer in near future. Cloud computing is also an upcoming and a growing field in computer science. Learning about AWS, Azure and even GCP was helpful. This was the first time I had done a project on my own without any team members so it was unique experience.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade