Code Monkey home page Code Monkey logo

elygremi's Introduction

Elygremi

Terms

  • Angular = UI SPA framework, most used in enterprise UI development
  • Angular Material = Component library written for Angular
  • API = server
  • Cloudfront = AWS Cloudfront: an edge-caching service with additional features.
  • Cognito = AWS identity service that features an identity pool (at its core) as well as a number of associated services like token generation and credential management.
  • CSS = Cascading Style Sheets: syntax for styling web UIs
  • Docker = a containerization framework that provides features analogous to virtualization (w/o actually using any virtualization).
  • EC2 = AWS Elastic Cloud Compute: a rented server owned/provisioned by AWS
  • ECS = AWS Elastic Container Service: A service layered on top of EC2 that spins up Docker images and serves them on managed EC2 instances
  • ORM = object relational mapper: code contructs that abstract database interactions.
  • PostgreSQL = The most popular and most feature-rich SQL database used in enterprise software.
  • S3 = AWS Simple Storage Service: a cloud-based file system from where files are served. Files can be encrypted and conditionally unlocked. A "bucket" is an atomic, top-level grouping of files with a globally unique name and its own configuration.
  • SPA = single page application
  • Tailwind = UI CSS framework for declarative CSS using a compiler.
  • Terraform = IaC (Infrastructure as Code) tool that is used to script the provisioning and deprovisioning of cloud resources. It maintains the state of provisioned resources and can handle incremental changes.
  • TypeORM = a popular TypeScript-based ORM.

Overview

  • The UI is written in Angular 14 (current available version is 16) and uses both Angular Material as well as Tailwind as a design system.
  • The server is written in an enterprise-centric NodeJS framework called NestJS that runs on top of the most popular NodeJS web server, ExpressJS. It's distributed as a Docker image.
  • The entire application (API and UI) live in a single codebase (aka a monorepo) and the build tooling used to package the application is the popular monorepo framework NX. Even the infrastructure code lives in the same repository.
  • The provisioning is done with Terraform. The code is in the /terraform directory.

Runtime

  • node version: 16.17.0
  • npm version: 8.15.0

Platform => AWS

API

This app is entirely cloud-native. The API is deployed as a Docker container from which AWS ECS creates a managed EC2 instance running the container.

UI

The UI is served by the API. This is suboptimal from a performance standpoint but is easier to deploy and update. It works but should be migrated to an architecture where the UI assets are served directly out of S3 if scale reaches a certain threshold or development cycles afford the time to set up the additional infrastructure (Cloudfront and S3 Bucket hosting all provisioned through Terraform)

Database

The database is a serverless Postgres instance and is accessed from application logic via TypeORM.

Uploads

The uploaded images are stored in an encrypted, private S3 bucket. They cannot be accessed outside the context of the web application. In order to display them in the browser to the we app users, the API preauthorizes them thereby making them able to be accessed at a specific, unique URL for a short (configurable) period of time.

Source Code Directory Structure

The code is split at the top level into libs and apps. The apps folder has UI and API applications. The libs folder has the same plus and isomorphic iso directory for code that is shared between API and UI.

The apps directory has one API application and one UI application.

Accessing the Application

Application Premise

This is a contrived application that approximates an inventory application. The context is vehicle information because sample vehicle information was easy to find online, but --from the UI forms all the way down to the database tables-- this app could be easily modified to match a more generic (or specific) inventory application.

Random data is generated online and pasted into the API documentation or added through the UI application form.

App features:

  • File uploads with encryption and access control
  • Database persistence, paging, and search
  • Account registration and JWT bearer-token authenticated endpoints as well as public endpoints (which is to simulate the fact that access control can be different for the API, but more realistically we would add an API key for the API access instead of leaving it publicly accessible as it is in this demo)
  • Generally responsive UI

elygremi's People

Contributors

icedlee337 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.