Helium is a lightweight copy of the blogging platform, Medium.com.
In my work as a UXer, I was curious to learn more about not only how products appear to the end-user, but how they are built. This year, 2022, I have been focused on learning frontend concepts.
As part of my DPC Digital Academy Scholarship with Code Like A Girl's Foundations of Web Dev Program, I took this opportunity to:
- Build sassy components
- Improve performance
- Practise frontend routing
- Learn global state management and authentication
The tools I used are:
- React
- Node
- Typescript
- SASS
- Markdown
Previously, I toyed with using a headless CMS like Strapi.io to follow JAMstack architecture. I realised it wasn't necessary for a website like so since CMSes are expensive, they save assets on their own servers and, for a simple site like here, CMSes do not provide the best performance.
I decided to use a Markdown file system that I store in Github and call dynamically.
Using an asynchronous function in JavaScript, I import the Markdown files from the content folder project into a JSON file, posts.json. Later I return them in the form of a promise as an array of JSON objects.
Concurrently runs the client and server (getposts.ts, to be replaced with a Node backend as the course progresses)
Serves the client only, assuming that the posts.json file is up to date
Master branch is automatically deployed to Netlify.