architecture-reference.md

Architecture Reference

• Architecture decisions
• REST API Contract

Development environments

• Production (deployed from main branch): https://fridgefinder.app/
• Staging (deployed from dev branch): https://dev.fridgefinder.app/

UI Design

Images

• Aspect Ratio Guide

aspect ratio (width:height)

hero image : aspect ratio is 16:9, preferred size 1366x768

paragraph image : aspect ratio for mobile is 3:2, preferred size 414x276

fridge photo : aspect ratio is 1:1.15, exact size 300x345

screen size ranges (width x height)

• Mobile: 360 x 640 to 414 x 896 pixels
• Tablet: 601 x 962 to 1280 x 800 pixels
• Desktop: 1280 x 720 to 1920 x 1080 pixels

MUI breakpoints (width)

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

Tools

HTML Color

• Color Hex to RGBA converter

Image Editor

• XnView

XnView:

1. type in the width of 410
2. then select the aspect ratio of 3:2
3. the height should read 276
4. move the target around and crop

REST API

• API Editor

URL Encode

• Encode SVG as URL
• URL encoder/decoder

Web Analytics

• Google Analytics Debugger

Frontend Libraries

• Application Framework: Next.js

  • Next.js tutorial
  • Next.js repository

• Type Checking: prop-types

  • prop-types tutorial

• UI Components: MUI

• UI Dialogs: Formik

  • Formik tutorial

• UI Dialog Validation: Yup

• Geographical Maps: Leaflet, React Leaflet

  • Leaflet quick start tutorial
  • Leaflet mobile tutorial
  • Leaflet custom markers tutorial

• REST API: OpenAPI 3.0

  • API Primer
  • API Design Best Practices

• REST Mock Server: json-server

• Testing: Jest, React Testing Library

• State Management: zustand

• Fuzzy Search: fuze.js

Design philosophy

• Atomic Design