Skip to main content

Planning

Back to Documentation Intro Contents

Decide on Architecture​

If you already have an architecture in mind, jump to Plan the UI

If it is just a web app to be built, consider the below Front End, Back End and Database Architecture options. If it also needs to be a mobile app, consider the below Mobile Architecture options.

  1. Ask AI to recommend an architecture with justification - see the Obsidian note on AI Prompts here
  2. Review the below architecture considerations against the AI output and verify it makes sense

Front End Architecture​

  • Considerations:
    • Single page application or not?
    • SSR (Server side rendering) or SSG (Static site generation) required?
  • Options:
    • CRA (Create React App)
    • Vite.js
    • Next.js
  • Recommendations (from Robin Wieruch):
    • Vite.js for client-side rendered React applications
    • Next.js server-side rendered React applications
    • Astro for static-side generated React applications

Back End Architecture​

Database​

  • Considerations:
    • Should it be SQL or non SQL?
    • How am I going to query my database? Via a client? By the CLI?
    • Consider TypeORM or Prisma for type safe access to your database
  • Options:
    • Sequel DBs:
      • Xata
      • MySQL
      • Postgress (recommended)
    • No Sequel DBs:
      • Firebase
      • MongoDB
      • PlanetScale
      • Supebase

References

  1. Which Is Better? SQL vs NoSQL
  2. How To Choose a Database for your App
  3. Build a TypeScript API with Express, RapidAPI, and Xata

Hosting​

  • Considerations:
    • How much will hosting the site cost?
    • What features does the hosting provide?
    • What access protection does the hosting service offer for limiting access to your app or database?
  • Options:
    • Netlify (free)
    • Vercel
    • Heroku (cheap)
    • DigitalOcean (cheap)
    • Amazon RDS (expensive)
    • BlueHost (basic)

Mobile Architecture​

Plan the UI​

Inspiration​

For inspiration for projects, check out the following resources:

Colour Selection​

Fonts​

Design Guides​

Web Forms​