# Novox Photos manager

## Client - Photos react app

### App structure

- React application with a public facing website (`./public`) and an administration panel (`./private`)
- React router is split into `<PublicRoutes />` and `<PrivateRoutes />`
- `<PrivateRoutes />` is wrapped in the `<Keycloak>` context provider
- The `<Keyclock>` context provider is created using the `AuthProvider` from the 
[`oidc-react`](https://github.com/bjerkio/oidc-react) package 
- AutoSignin is explicitly set to `false` to prevent the website from always trying to log in (even if not trying 
to access the admin section)
- The `<AdminLayout>` component handles the authentication only rendering the `<Outlet>` when the user is logged in
and has sufficient permissions (role based)
- We can access the user info using the `useAuth` hook, only possible in React components or hooks
- Our `privateApi` service is provided using the `usePrivateApi` hook, it makes use of the `useAuth` hook to set 
the authorization header
- The url for the private api is set using a "environment variable" (see build process)

### Build process

- The build process is quite simple and uses `react-scripts build`
- "Environment variables" can be set in the `.env` file. Before starting the application run `./scripts/env.sh` to 
create an `env-config.js` file in the`./public` folder which is then loaded using a `<script>` tag in index.html
- In our docker setup, we can pass the environment variables in our docker-compose. When starting the container
the `env.sh` script is executed before starting the application

## Server - Photos node api

### App structure

- We use [Koa](https://github.com/koajs/koa) to setup our web api
- Our api is split into a `/api/public` and `/api/private` routes (see the 2 routers)
- `Router` and `HttpEndpoint` types can be used to add new endpoints
- Following middleware is provided:
  - JWT token validation
  - Request/response logging
  - CORS
  - Error handling
  - `@koa/multer` to handle file uploads using `multipart/form-data`