Skip to content

Yōkoso Overview

Jump to bottom
Tommy Deng edited this page Jan 22, 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

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

Server

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

Back End

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

Challenges

Engineering Challenges

  • Scaling
  • Costs
  • SEO
  • Security
  • Technical debt
  • Malicious actors/attackers
  • Integration and deployment pipelines

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 post

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