Skip to content

Architecture

Ann 杏 Kilzer edited this page Mar 13, 2021 · 5 revisions

Overview

Our initial architecture is "serverless", meaning we rely on cloud tools such as Netlify and AirTable rather than running our own web server.

Architecture Diagram of the project

Frontend

Vue.js

This site is built using the Vue.js framework. Under the hood, Vue uses Webpack, Babel, and JavaScript.

Vuelidate

Vuelidate is a library we use to perform validations, e.g. making sure that the user enters sensible inputs.

Here's a short article about how we wrote a custom validator for Japanese.

Vue-i18n

Our site targets an international audience, with initial versions in English and Japanese. The term "i18n" is a shorthand for "internationalization". We use the Vue-i18n library to handle various translations of our site.

The locale files are stored as JSON with names such as en.json and ja.json

Read more about how localization works on the i18n page.

Vuetify

The Vuetify library provides Material Design components as layout elements for our pages.

Backend

For privacy and security reasons, the production configurations are only accessible to project owners. However, we thought it would be helpful to share what's happening for the sake of learning.

Netlify

Netlify hosts our website https://speakher.jp, and performs some basic functionality.

Netlify Forms

We use forms to collect data for speaker nominations as well as message requests.

Netlify Functions

TODO

AirTable

An easy-to-use, spreadsheet like database.

TODO: link sample DB

Heroku

Currently in progress, we are planning to migrate to Heroku once we exceed the free tier of Airtable. The implementation will use Ruby and PostgreSQL DB