Client Application

The client application is how the user interfaces with the Aprimo API. The primary purpose of the site is to provide guest users the ability to upload files to Content Commons without provisioning them full access. The interface also as an admin portal where authorized team members can invite guest users, as well as a super admin page where authorized users can create/edit team and add new admin users.

This interface is deployed as a statically generated site built on Astro. Data interactions are processed offsite using a series of Lambda serverless functions. These Lambda functions handle authentication, fetching and updating system data, and the connection to Aprimo.

Project Structure

The client application is found inside of the web directory and is a fairly standard Astro project. You’ll find the following folders and files:

web/
│
├── public/ # Unprocessed static assets (images, fonts, icons, etc.)
│   └── dos_seal.svg # Used as a favicon
│
├── src/
│   ├── components/ # Reusable UI components
│   │   └── Button.astro # Astro components
│   │   └── Table.tsx # React components
│   │
│   ├── layouts/ # Shared UI configuration used by multiple pages
│   ├── pages/ # Website page files
│   ├── styles/ # Application-wide style sheet
│   └── utils/ # Reusable utility functions
│
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name. The page 404.astro serves as a fallback should the user navigate to an non-existent page.

Most of the site is built of simple Astro components, however, where we need to maintain client-side state we can use React components. These components can be import just as any other Astro components and utilized as a standard React component would be:

// src/pages/somepage.astro
---
import MyReactComponent from '../components/MyReactComponent.tsx';
---

<div>
  <h1>Use React components directly in Astro!</h1>
  <MyReactComponent value="my-prop"/>
</div>

Commands

All commands are run from the root of the project (i.e., the web directory), from a terminal:

More on Astro

For more information on Astro, please refer to their official documentation.

Mockups

Below you will find mockups for the user flow for each of the user types.

• Super Admin User
• Admin User
• Guest User Team Lead
• Guest User