The Wall

This is a social media home page React web application, using AWS serverless backend. Users are able to sign up, sign in, view other users' posts, heart posts and post their own posts.

Table of Contents

• Technologies
• Architecture
• Pages
  • Sign Up
  • Confirm Sign Up
  • Sign In
  • Home
• AWS Amplify
  • CI
  • Amazon Cognito
  • DynamoDB
    • Posts Table
  • API Gateway
  • Lambda Functions
    • /posts
    • /heart
• Possible feature additions
  
  

Technologies

• React
• Material-ui
• React Router
• AWS
  • AWS Amplify
  • Amazon Cognito
  • API Gateway
  • Lambda functions
  • DynamoDB
    
    

Architecture

Pages

Sign Up

SignUp Component

Confirm Sign Up

ConfirmSignUp Component

Sign In

SignIn Component

Home

Home Component

AWS Amplify

Framework and web hosting solution for web applications. The Amplify Framework consists of 3 components, libraries, UI components, and a CLI toolchain. On this project I am using the libraries and the CLI toolchain.

The CLI (and the AWS management console) enables me to setup the serverless backend.

The libraries enable me to connect the backend with my frontend web app.

CI

Any commits made to the master branch, will automatically trigger a new build in the live application (see Demo). This continuous intergration is set up by AWS amplify using CLI.

Amazon Cognito

Serverless authentication and authorization service. The application's authentication flow is as follows:

1. Sign Up with username, email and password. A verification code is sent to the email.
2. Verify the email by entering the verification code
3. Sign In using username and password
   
   

DynamoDB

Fully managed NoSQL database

Posts Table

This is the only table we are using on this application. It contains all information that pertain to the posts that users make.

Primary partition key: id (String)
Primary sort key: creationDate (Number)

Current Schema: {
  id: String //UUID that is created on the POST method of /posts
  creationDate: int //the creation date in UTC milis
  content: String //the user input text of the post
  hearted: int //the amount of hearts the post has
  heartedUsernames: String[] //the usernames that have hearted the post. PATCH method of /heart
  username: String //the username of the poster
}

API Gateway

The application API, has the Lambda functions connected to serve the paths /posts and /heart as REST.

Lambda Functions

/posts

Contains HTTP Methods for CRUD on the postsTable

/heart

HTTP PATCH

This method is called whenever a user clicks on the heart button of a post.

It adds or removes the username from the list of users that have hearted the post.

Request Body:
{
  postId : String,
  username: String,
  creationDate: int
}

Possible feature additions

• Post comments
• Show who hearted your post on mouse hover
• Light/Dark mode switch on TItle Bar
• Avatar or profile picture