Server Side Rendering

Time: 1 weeks
Difficulty: Medium
Code Qualtiy points: 10 points

Right now, you have a working CLI based TODO app. However you noticed that sometimes you need to access these tasks from your mobile phone and your tablet. In order to do that you need to be able to access your computer from different devices. This means that you need a some kind of server that will be always running and accessible from the internet. In this challenge, you will implement a server side rendered TODO app. This means that you will have a server that will be running on a remote machine and you will be able to access it from your mobile phone, tablet or any other device that has a browser. You will be able to add, delete, update and list your tasks from your browser.

1. Introduction

Hyper Text Markup Language (HTML)

A markup language is a language that is used to annotate text. The reason why it is called markup language is that you are marking up the text. Why we need to annotate text? Lets sey that we want to write a book. We need to add some formatting to the text. For instance, we may need to make some words bold, italic or underline. Also we may need to add some images, tables, lists etc. to the text. However, at the and of the day, we need to store the text in a text file. So, we need a way to annotate the text. This is where markup languages come into play. There are a lot of markup languages. For instance:

  • Markdown
  • Latex
  • HTML
  • XML

HTML is different from other markup languages. Because you can view the result in a web browser. It is used to create web pages. A web page is a text file that contains HTML tags. A tag is a special text that starts with < and ends with >. There are two types of tags. The first one is a self closing tag. It does not have a closing tag. For instance, <br> is a self closing tag. The second one is a normal tag. It has a closing tag. For instance, <p> is a normal tag and </p> is its closing tag.

Historically, HTML was used to create static, not styled web pages. If you want to style your web page, you need to use CSS. CSS is a language that is used to style HTML elements. However, in order to create dynamic web pages, you need to use a programming language. This is where javascript comes into play. Javascript is a programming language that is used to create dynamic web pages.

However, also you can serve dynamic web pages with a trick called server side rendering. This means that you can create a web page with a programming language and send it to the client. This is what you will do in this challenge.

Some resources;

Hyper Text Transfer Protocol (HTTP)

In order to serve your webpage, you need a some kind of protocol. This protocol is called HTTP. HTTP is a protocol that is used to transfer hypertext. Hypertext is a text that contains links to other texts. For instance, a web page is a hypertext. It contains links to other web pages.

HTTP is a request-response protocol. This means that a client sends a request to the server and the server sends a response to the client. A request contains a method, a path and list of headers. A response contains a status code, some headers and a body. A method is a verb that tells the server what to do. For instance, GET method is used to get a resource from the server. A path is a string that tells the server which resource to get. For instance, / path is used to get the root resource. A header is a key-value pair that contains some information about the request. For instance, Content-Type: text/html header tells the server that the body of the request is a HTML document. A status code is a number that tells the client what happened. For instance, 200 status code means that everything is OK. A body is a string that contains the response. For instance, if the response is a HTML document, the body will contain the HTML document.

Sample HTTP request:

GET / HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.64.1
Accept: */*

As you can see the first line contains the method (GET), the path (/) and the HTTP version (HTTP/1.1) separated by spaces. The first line is called request line and the other lines are called headers. These lines are separated by \r\n. After sending all headers, in order to tell the server that the headers are finished, you need to send an empty line. After that, you can send the body of the request. In this case, the body is empty.

Sample HTTP response:

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 25

<h1>Hello World</h1>

As you can see the first line contains the HTTP version (HTTP/1.1), the status code (200) and the status message (OK) separated by spaces. The first line is called status line and the other lines are called headers. These lines are separated by \r\n. After sending all headers, in order to tell the client that the headers are finished, you need to send an empty line. After that, you can send the body of the response. In this case, the body is <h1>Hello World</h1> which is an HTML document.

HTTP Server

In order to serve your web page, you need a HTTP server. A HTTP server is a program that listens for HTTP requests and sends HTTP responses. There are a lot of HTTP servers. We will use express.js in this challenge. Express.js is a framework that is built on top of node.js. A sample express.js server:

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("<h1>Hello World</h1>");
});

app.listen(3000, () => {
  console.log("Server is listening on port 3000");
});

Html Forms

An HTML Form (<form>) is a simple way to collect input from user. Most commonly input is sent to a server to be processed. <form> element supports common input UI component types such as text, checkbox, radio. Then the values written by the user can be submitted to a server with the submit element.

Template Engine

In order to create dynamic web pages, you need to use a template engine. A template engine is a program that is used to create HTML documents. It takes a template and some data and creates an HTML document according to the template. There are a lot of template engines. We will use handlebars in this challenge. A sample handlebars template:

<h1>{{title}}</h1>
<ul>
  {{#each tasks}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Database

A database is a repository that efficiently manages CRUD operations on data. An instance of a database is usually served by a DBMS. A DBMS can be either relational or non-relational. In relational databases, data is organized into tables with predefined schemas. Relational databases use SQL (Structured Query Language) to access and manipulate data. In non-relational databases, data is organized into collections with dynamic schemas. Non-relational databases use NoSQL (Not only SQL) to access and manipulate data.

SQL

SQL is the standard language for relational database management systems. SQL statements are used to perform tasks such as update data on a database, or retrieve data from a database.

AWS EC2

EC2 is the short for Elastic Compute Cloud. It is an Aws microservice that provides virtual machines. A cloud hosted virtual machine is useful because you can access it from anywhere/anytime. A connection is needed to access the virtual machine. Opening a connection session is called SSH for Linux systems.

AWS RDS

In order to host a DBMS, you need to host the actual database software in a system. This is where AWS RDS comes into play. AWS RDS is a service that provides DBMS instances. As you expose your DBMS to the internet, you can access it from different sources.

Authentication

Authentication is the process of verifying the identity of a user, system, or entity attempting to access a computer system, network, or application. In the web applications this process typically involves the use of usernames and passwords, multi-factor authentication, or other security measures to ensure that only authorized individuals gain access to web-based resources, protecting user data and maintaining system security. Not only for securing the sensitive data, but also for matching a data with a user, a user can only access their own data.

SQL Injection

SQL injection is a malicious technique in computer engineering where an attacker manipulates input data to insert or execute arbitrary SQL query within a web application’s database. This vulnerability occurs when user inputs are not properly validated or sanitized, allowing unauthorized access to the database and potentially exposing sensitive data. SQL injection poses a significant security risk, as it can lead to data breaches, unauthorized data manipulation, and even full system compromise if not adequately mitigated. It is not only made by attackers but can occur by mistake by filling forms that runs SQL queries behind.

XSS

Cross-Site Scripting (XSS) is a security vulnerability in web applications where untrusted data is improperly included in web page content, enabling malicious code execution in the context of other users’ web browsers. This vulnerability occurs when web applications fail to adequately validate or sanitize input data, allowing an attacker to inject and execute code that can steal information, manipulate user sessions, or perform unauthorized actions on the affected website.

CSRF

Cross-Site Request Forgery (CSRF) is a security vulnerability in computer engineering where an attacker tricks a user’s web browser into making unauthorized and unintended actions on a different website where the user is authenticated. This occurs when the victim, who is already logged into a web application, visits a malicious website that initiates requests to the target site on the victim’s behalf, potentially leading to actions such as changing account settings or making financial transactions without the user’s consent. CSRF exploits the trust between the user and the web application, highlighting the importance of proper request validation and the use of security tokens to prevent such attacks.

2. Requirements

There are some rules that you need to follow. If you don’t follow them, you will get 0 points.

  1. You need to use git as version control system.
  2. You need to use express.js as the web framework.
  3. You need to use handlebars as the template engine.
  4. You will host your server on AWS EC2 machine.
  5. You need to use an SQL database for storing your TODOs. You will use PostgreSQL DBMS and AWS RDS to host your PostgreSQL instance.

3. Features

You need to implement the following features. You will get 0 points if one of them is not implemented.

  1. List all tasks from browser (with filters done and undone tasks)
  2. Add a task from browser
  3. Mark a task as done
  4. Mark a task as undone
  5. Delete a task
  6. Update a task

4. Score

You will get a score for code quality.

  1. [5 pts] Easy to read code (Good comments, small functions etc.).
  2. [1 pts] Usage of linter and formatter.
  3. [1 pts] Good usage of git commits and messages.
  4. [2 pts] Prettier code formatting.
  5. [1 pts] Good usage of package.json.

5. Objectives

It is expected to learn these topics (or getting familiar with):

  • Basic Http protocol (GET, POST, PUT, DELETE)
  • Basic Html elements and their attributes (head, body, p, a, h1, h2, h3, p, ul, ol, li, div, span, input, button, img, br, table, tr, td, th)
  • Basic CSS properties (background-color, color, font-size, font-family, text-align, margin, padding, border, width, height, border-radius, display, float, position, top, left, right, bottom, box-shadow, text-shadow, opacity, z-index)
  • Basic Express.js usage (routing, body parsing, static files, f)
  • Basic template engine usage (instead of focusing on handlebars, try to understand the concept of template engines)
  • Basic AWS EC2 machine usage (ssh, scp, chmod, chown, sudo, apt-get)
  • Basic SQL usage (select, insert, update, delete)

TODO: Authentication Requirement