Client Side Rendering
Right now, you have a working server side rendered TODO app. Afterawhile, you have recognized that you need a native mobile app for your TODO app. Lets assume that this mobile app is written by another developer. However, he/she needs to access your tasks. In order to do that, you need to create a REST API. This means that you need to communicate via JSON objects. In this challange, you will implement a REST API for your TODO app. Also, you will remove SSR support from your TODO app. This means that you will create a client side rendered TODO app.
In addition to these, also you noticed that you need to attach some files or photos to your tasks. In order to do that, you will use AWS S3. This means that you will upload files to S3 and store their URLs in your database.
In this challenge, it is expected to learn basics of:
- AWS S3 (with presigned URLs)
- File Upload from browser
This challange does not introduce any new feature other than uploading files to S3.
Requirements
You can use libraries like axios and lodash. Also in the backend side, there are no restrictions. You can use any library you want. However, you should not use any React like framework or library. The purpose of this challenge is to learn the basics of client side rendering by using vanilla Javascript.
File Upload and S3
Sending files over HTTP is a common need in almost every web application. In this challange, you will try to upload files to S3. S3 is a cloud storage service provided by AWS. You can upload files to S3 and download them later. We will not use FTP because it is not a good practice to store files in your server. If you would use FTP, horizontal scaling would be a problem. Also, you would need to store files in your server. This means that you would need to pay for storage. However, S3 is a cloud storage service. This means that you will only pay for the storage that you use. Also, you can scale your application easily.
There are two approaches to upload files to S3. The first one is to upload files directly from your backend. This means that your backend will receive a file from browser and upload it to S3. The second approach is to upload files directly from browser. This means that your browser will upload a file to S3. The second approach is better because you don't need to send files to your backend. This means that you don't need to pay for bandwidth.
S3 Presigned Url
If you have an application where users need to upload files to your S3 bucket, you can provide them with a presigned URL to upload a file directly, without them having AWS access. This way you do not need to share AWS credentials or make the file public. The presigned URL is generated by server that has AWS credentials and permission to access the object. The URL embeds the permissions as query string parameters and a signature to ensure they can't be tampered with. The URL is valid for a limited time, defined when the URL is created. After this time, the URL will no longer provide access to the object.
Implementing with Vanilla JavaScript
Reactive Programming
Client side rendering has gained popularity in the last decade due to the rise of browser-based applications. In server side rendering, browser do not a heavy lifting, it just renders the HTML sent by the server. In client side rendering, the browser has to do a lot of work to render the page. For this reason, it was unconvenient to use client side rendering in the past.
However, managing a complicated client side rendering with traditional server-side rendering methods is not practical. This is the problem most frontend frameworks try to solve. React is one of the most popular frontend frameworks that solves this problem. In this challenge, it is expected to learn these concepts and apply them in a project: