v3
v3 is an entire rework of MAKE designed to be more robust, future proof, and maintainable in the future.
This change is primarily motivated by the increasing amount of mental load required to add new complex features to the site, especially anything relating to real-time updates. Currently, the frontend is entirely built in pure JS + CSS + HTML and the ba…
v3 is an entire rework of MAKE designed to be more robust, future proof, and maintainable in the future.
This change is primarily motivated by the increasing amount of mental load required to add new complex features to the site, especially anything relating to real-time updates. Currently, the frontend is entirely built in pure JS + CSS + HTML and the backend is MongoDB supported by Python.
Some preliminary goals for v3 are:
- Improved feature development process
- With the start of the Makerspace Website/IT junior developer program, the current pipeline for feature development is split among a team of people.
- The current structure of MAKE makes it difficult for newcomers to begin working, as there is a complex connection between different aspects of the website (both frontend and backend) interwoven throughout every file.
- By moving towards a discretized, component-based system that builds onto itself to create the whole site, new developers can work on individual aspects of the site without needing to completely grasp unrelated areas.
- Strict types
- The current codebase is built upon two untyped languages. When new developers begin working on this site, it's extremely difficult to determine exactly what different functions do, because arguments have no type hints.
- By using a strictly typed language for the site code, it will make it easier for future developers to interpret the use of all parts of the codebase.
- Module-based imports
- As it stands, the site uses pure JS + CSS + HTML, which does not support the
module
import for functions used across files. - This often means files will reference functions defined in entirely different files with no explicit connection between, which makes it exceptionally difficult for developers to trace function calls.
- By implementing module-based imports, every function used in every file can be traced to a specific location, which avoids creating duplicate code and makes it easier to use previously defined code in new features.
- As it stands, the site uses pure JS + CSS + HTML, which does not support the
- Customizable theming
- To expand the reach of MAKE, it would be very useful for other institutions to incorporate the site into their own makerspace, using their own custom theming and logo.
- This will be a core consideration when it comes to styling components.
- Open Source
- To continue with the core goal of MAKE, which is creating a unified makerspace management system that is open to all institutions, it follows that keeping MAKE open source is a must.
- Further, it's important that all of the frameworks used in v3 are also open source, and this proposal follows this requirement.
v3 will shift towards the following frameworks:
- TypeScript for all code, for its strict-type checking and ease of portability from the existing JavaScript frontend,
- React for the frontend, for its versatility and component-based ideology that separates functionality into discrete working objects
- Express for the backend, as an industry-standard routing system
- MongoDB as the backend database, for consistency with the current database schematics and for its simple integration with Next.JS
- Bun as a package manager for the Next.JS/Node environment, for its speed and simplicity
- Pino as a logging package for Node, which offers simplistic yet comprehensive logs in both development and production environments with a small footprint
- Jest for testing
- Redux.JS, a state management library that organizes a global state variable that can easily be used across files in a multi-component structured app.
- TailwindCSS, a CSS styling framework that allows for easier component-based styling that essentially embeds CSS straight into JSX components without the need for a separate .css file.
Other considerations for possible frameworks include:
- Mantine UI, a component library that greatly simplifies the HTML and CSS needed to produce good looking objects on the screen, or
- Material UI, an industry standard Tailwind component library
- A documentation framework could be a useful inclusion
v3 is expected to be completed prior to the start of the Spring 2025 semester.
Further References:
- https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
- https://www.mongodb.com/docs/drivers/node/current/quick-start/create-a-deployment/
- https://github.com/pinojs/pino-nextjs-example/tree/master
- https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs
- https://betterstack.com/community/guides/logging/nodejs-logging-best-practices/
- https://www.typescriptlang.org/tsconfig/#outFile
- https://medium.com/@amritkhadka_44739/send-google-form-response-to-external-api-c0b9160fe6b7
- https://tabler.io/docs/icons
- https://onlook.dev