This is the react-based client application for the Directory Screen on the SEAS Allston Campus. It was bootstrapped with Create React App using the default Typescript template.
This is meant to be used in conjunction with the sec-directory-server project, which is responsible for populating the Algolia database.
- Clone this repo
- Run
npm installto get all dependencies - Copy
.env.exampleto.envand populate with the desired Algolia details
The backend of the application is the Algolia search index defined in the REACT_APP_ALGOLIA_INDEX/REACT_APP_ALGOLIA_APP_ID environment variable. You'll also need to provide an API key in REACT_APP_ALGOLIA_API_KEY, which should only have "search" permissions for the specified index. This API key will be included verbatim in the client code, so you should never use an admin key, or any key with write permission. Best practice is to create a "Secured API Key" scoped only to the index you want to use.
npm run start will bring up a live development environment with hot-reloading. Once it's started, you can view the app in the browser at http://localhost:3000/.
As we're building for specific 55" touch screen displays (Planar PS5561T) in portrait mode, the design of the page is fixed to a 1080x1920 rectangle with scrolling and pinch-to-zoom disabled. To view the application on a standard screen, you can use the Responsive Design Mode built into most browsers to emulate a 1080x1920 viewport.
The only outbound data connections are to Algolia, so the server project does not need to be running at the same time.
Ideally, each developer working on the project should create their own Algolia index (and corresponding API Key) to use while developing. You can use the same index for both client and server operations, though the server application does require an API key with write permission. As noted above, you should use a Secured API Key and not an admin key.
npm run test will run the Jest test suite. By default, Jest will run in watch mode and re-run tests whenever the code changes on disk. For more information on Jest and its features, see the project homepage.
You can optionally create a file called .env.test if you want to specify a separate index for testing. This is recommended, as some of the end-to-end tests defined in src/__tests__/e2e.test.tsx expect the index to include to include actual data, and keeping a separate test index can reduce phantom test failures.
npm run build will compile the full application in /build.
The official build of our code is handled by GitHub actions, and will be published to the releases section on every push to our main branch if all the tests pass.
In production, the app will be server from an Amazon S3 bucket behind CloudFront.