Dynamic Webpage to Display Portfolio w Authentication

Context

Context on the Astro-Knots monorepo

We develop and maintain multiple sites for multiple clients. Each site needs to be independently deployed with no dependencies on the Astro-Knots monorepo. However, we have developed patterns and boilerplate code, etc.

Preferred Stack

  1. Astro for Static Site Generation
  2. Svelte for dynamic UI.
  3. ImageKit for scalable image CDN.
  4. Tailwind with tokens edited for the brand we are building for, using our Customizing Tailwind best practices.
  5. Preference for using documents in Markdown or in JSON in the repository over any database use.
  6. Avoidance of anything React or React patterns. HTML, CSS, Astro, and Svelte only.

Responsive Design

Most people will be viewing it initially from Mobile. However, analysts will usually want to "dive in" so we need laptop and large screen variants, and a clinically responsive layout.

Clickable Levels of Detail

Logo Clouds. Cards of various sizes and various level of detail, expandable to more detail. Convenient collapse detail. Full pages.

Branded Exports and Downloads

It's common for potential investors and their analysts to want to download a PDF, and download CSV exports.

Multiple Layouts & Arrangements

Because it's so important for analysts to browse and find the information they need, it would be good for them to toggle different layouts with different types of cards and different levels of detail.

Connection to a Google Sheet for Data Variables

When displaying a portfolio, it's often helpful to have "facts" or "metrics" about any portfolio company. I want to be able to access a Google Sheet through the Google Workspace API, and point to specific numbers or tables.

Strategy for Sensitive Data & Content

When displaying a portfolio, it's common to have certain financial information like "share price" or "amount invested" hidden in a layer that is only accessible to potential Limited Partners.
I can already imagine there being multiple levels of access requested by the investing partners, so it's best to think about this system smartly. At base, we should have an accepted passwords list and put sensitive content behind a simple password authentication (note, we should avoid User Accounts unless it's a Google/Microsoft OAuth that just matches a list of authorized users or organization emails)