Overview

In this section document I will be covering design philosophy, future features to implement, and a bit on how the website works. The best way to discover how the website works passed this document is definitely by exploring the code and the live website.

How it Works

This website was built with React and the Ant Design component library. The Main Website has several components: the informational pages, the simulators page, the workshops page, and the admin pages. For state management, we decided on a less intensive system and pick the React Context API over something like Redux. The reason behind using Context API was because we felt that Redux was too much overhead as we had not need for a large global state. We only needed to hold the simulators and workshop data, as well as some authentication data and Context API was simpler yet sufficient solution.

Informational Pages

This includes the landing page and the about page. Just pages to display content written by our team members, not much to it. However, this is a good chance to talk about internationalization for French and English as this is a website primarily sporting the uOttawa name, bilingual support is important. Internationalization was handled with the i18next and react-i18next packages. Detailed in the i18n.js, there were multiple namespaces created and split typically by page; the translations are available in src/locate.

<aside> 💡 For pages which require translation, the withTranslation higher order component (HOC) was used, withTranslation give access to the t value in props

</aside>

<aside> 💡 For an in-depth walk-through on react-i18next look here

</aside>

Simulators Page & Workshops Page

These pages are very much similar in that they both display the content which has been added and curated by the BioMakerSpace team. This content is stored on our Firestore database and fetch by calling our Core Service API.

The simulators page only features the simulators as cards in a grid. Clicking on a card will link you to that given simulator
The workshops page features workshops as card on a grid as well, but clicking on the card will display a template page with the contents of the workshop filling out the information on the page

<aside> ⭐ There is one special simulator, which is the Biocomputing Circuit Designer. The BCCD lives exclusively at biomakerspace.ca/biocomputing and is a iframe component setup pointing to the Biocomputing team's our simulator hosted online

</aside>