Skip to content

Yōkoso Overview

Jump to bottom
Tommy Deng edited this page Jan 25, 2021 · 10 revisions

General

Outline

Yōkoso is a housing application for long-term rentals that allows landlords to post listings and students to search for housing, search for roommates, and post listings. Currently, this is done through Facebook, Craigslist, or Kijiji where it is difficult to search through postings and to know if a posting is legitimate. These sites are also general purpose and are not catered to housing, thus, they are often difficult to navigate.

Team Members

Name Role
Tommy Xu Developer
Tommy Deng Developer
Vivian Diec Developer & PM
Megan Hong Developer

Project Name

Yōkoso

Objective

  • Help students find housing
  • Help landlords get make postings to get a wider reach
  • Verify students and landlords

Criteria for success

  • Performant production grade service that scales
  • Professional UI and UX

Architecture

Anticipated Architecture

Auto-scaling and serverless application built on AWS cloud infrastructure.

Using the open source Serverless Framework, we aim to achieve the following architecture deployed to AWS.

As outlined in their Serverless Next.js At The Edge post:

Three Cache Behaviours are created in CloudFront.

The first 2. _next/* and static/* forward the requests to S3.

The 3rd. is associated to a lambda function which is responsible for handling three types of requests.

  1. Server side rendered page. Any page that defines getInitialProps method will be rendered at this level and the response is returned immediately to the user.
  2. Statically optimised page. Requests to pages that were pre-compiled by next to HTML are forwarded to S3 where the HTML is stored.
  3. Public resources. These are requests to root level resources like /robots.txt, /favicon.ico, /manifest.json etc. These are also forwarded to S3 where these resources can be found.

Front End

  • React/Next.js
  • Chakra UI

Server

  • Node.js
  • Express.js
  • Next.js

Back End

  • DynamoDB
  • S3 Storage
  • CloudFront
  • Lambda@Edge functions

Challenges

Engineering Challenges

Scaling

Mitigate scaling concerns using serverless AWS cloud infrastructure that supports horizontal auto-scaling.

Costs

Since we are using a pay-as-you-go or usage-based back-end and infrastructure services, the main concerns for cost are from an increase in users and malicious attackers. An increase in users is not troubling as it is natural and provides opportunity for greater revenue which would cover the additional cost. However, malicious attackers are always a concern. That risk can be mitigated through proper security, rate limiting, and DDOS prevention.

SEO

As a site with many user posts that each create a unique page, search engine optimization is very important. We are using Next.js to statically generate and server side render pages for best performance.

Security

We will ensure a secure application through proper authentication and authorization when dealing with non-public data.

Malicious actors/attackers

As previously mentioned, this risk can be mitigated through proper security (including authentication and authorization), rate limiting, and DDOS prevention.

Integration and deployment pipelines

We will use GitHub actions with AWS and Serverless Framework.

Technical Debt

We are using a robust architecture that will scale and likely hold up over time without the need of a major overhaul.

Legal & Social

User validation

Form of identification to ensure the user is a real person and information to hold them liable for listings that break guidelines/ policies

Release

Process

Requirements & UI/UX

  1. Form initial requirements after gathering user needs (from both tenants and landlords)
  2. Form design system and style guide for application UI
  3. Create mock-ups and prototypes of pages with various user flows using Figma (mobile and desktop)
  4. Validate initial requirements with mock-ups and prototypes
  5. Refine requirements and mock-ups until fully validated and satisfies user needs

Development

Front-end

  1. Create reusable component library from mock-ups
  2. Set up structure and common layout for each page
  3. Implement the pages considering dynamic data, authentication, and authorization (DynamoDB, S3, and Cognito)

Back-end & Architecture

  1. Design NoSQL data model
  2. Setup and configure database with DynamoDB and Serverless Framework
  3. Deploy on AWS using Serverless Next.js At The Edge

CI & CD

Use GitHub Actions to run continuous integration and deployment pipeline.

Initial Release

  • Landing page
  • User creation
  • Post listings
  • Filter through listings

Tool Setup

  • Next.js
  • TypeScript
  • Node
  • AWS
    • CloudFront
    • Lambda@Edge
    • S3 Storage
    • DynamoDB
Clone this wiki locally