Technical Decisions

We utilized the most up-to-date web technologies to construct this project. Our tech stack is composed of numerous open-source projects that boast mature and active development communities. These projects have enabled us to deliver a high-quality with advanced features and great performance. In this section, we are disucussing our technical decisions and for each of them, we will discuss its purpose, its usage, and its advantage in detail.

Typescript

TypeScript is a programming language that is a superset of JavaScript, which means that it adds additional features and capabilities to JavaScript, such as static typing, interfaces, classes, and modules.

We use TypeScript to build our project, both for the front-end UI and the back-end services. TypeScript enables developers to catch errors in the compile-time rather than at the runtime. In addition, using Typescript still provides access to existing Javascript frameworks or libraries without having to rewrite them. It makes our code more organized and maintainable.

React.js

React.js is a JavaScript library for building user interfaces. It has become one of the most popular front-end frameworks for building web applications, thanks to its declarative approach to building components, that helps to make code more modular and reusable.

We use React to build our front-end UI. React enables us to write reusable and modular components, which makes our code more organized and our development process faster. Also, React.js has a relatively low learning curve compared to other front-end frameworks so we can quickly get started with it.

Material UI

Material-UI is a popular open-source UI library for React applications that provides a set of pre-built components based on the Material Design system developed by Google.

We use Material-UI components to facilitate the development of our front-end UI. It ensures consistenct look and feel across the application. And we saved a trenmedous amount of time and resources by using it, since we don't have to focus on the fine details of the UI design.

Next.js

Next.js is a popular framework based on React and include a lot of features that help to build a production-ready web application. Some of its great features include a built-in router, server-side rendering, and static site generation.

We use Next.js in our project to provide server-side rendering support for React components. It can drastically improve site performance and SEO ranking. Besides the performance boost, we adopt Next.js because it boasts lots of handy features for developers.

NextAuth.js

NextAuth.js is an open-source library for authentication in Next.js applications. It supports multiple authentication flows, such as email/password authentication, social media authentication, and single sign-on from custom providers.

We use NextAuth.js to conviniently implement email-password login as well as UCL Single-Sign-On authentication. NextAuth.js provides a simple API for authentication and we saved a lot of time and effort by using it. Also, as a tried-and-tested library, it provides strong security guarantees which is mandatory for the authentication system.

GraphQL

GraphQL is an open-source query language and runtime for APIs devloped at Facebook. Using a schema that defines the types of data available and the operations that can be performed on that data, clients can fetch that data from the server in a single response.

We use GraphQL alongside Prisma to build our back-end services. GraphQL provides a flexible and intuitive API for our front-end UI to interact with our back-end services. Besides its intuitiveness to use and efficiency in runtime, GraphQL can comfortably accomondate complex queries and mutations, which is widely present in our project.

Apollo

Apollo GraphQL is a set of open-source tools and libraries for building and consuming GraphQL APIs, also known as a GraphQL client. Not only it provides comprehensive and easy-to-interact API for developers, it has interactive web-based tools to guide developers to build and test GraphQL queries and mutations.

We use Apollo to build our GraphQL API. It is more efficient and stable compared to a custom-built GraphQL API, which can be extremely tedious and complicated.

Prisma

Prisma is an open-source database ORM (Object-Relational Mapping) and query builder that provides a type-safe and intuitive API for developers. It supports multiple database providers and a wide variety of languages and frameworks, including our project's tech stack.

We use Prisma to manage our database schema and to write type-safe queries, instead of raw SQL queries. It has strong performance and good security guarantees, which protects the data from malicous inputs.

PostgreSQL

PostgreSQL is an open-source relational database management system, known for its reliability, robustness, and scalability. It is often used in large-scale web applications and data-intensive projects.

Although our application is not considered to be a large-scale web application, we still use PostgreSQL as our database as it provides a flexible, secure, and reliable database solution. Also compared to other database management systems, PostgreSQL provides excellent support to annual data migration and backup feature, a key feature requested by our client.

Docker

Docker is an application that makes it easy to create, deploy, and run applications by using containers, which include all necessary componnets and dependencies to run an application.

We use Docker to deliver our final product and we have successfully deployed our project to the cloud. And we used to Docker to run some of our development tools, such as PostgreSQL and PrismaDB. The advanatage of Docker is its portability and efficiency. Docker containers can easily run on different environments and setups. And Docker containers are lightweight and fast to start up. It saves tremendous amount of time and resources in the development and deployment stage.

Nextra

Nextra is a lightweight static site generator for creating documentation websites and is built on top of Next.js. Nextra comes with built-in support for Markdown files, which makes it easy to create and manage content for your documentation website.

We use Nextra to build our documentation website, which is the site you are currently reading. It is a time-saving tool to build elegant and consistent documentation websites, as we can focus on the content rather than the design and layout.