A brief introduction
Hi all, I'm Marcus from Singapore I work primarily as a data engineer but like to dabble in full stack from time to time with my main languages being Python and Golang, during my timeoff I like to play video games mostly alot of World of Warcraft and Final Fantasy as well as spending time with my niece and nephews.
In this first post I'd will be giving a brief overview of the websites technical components of this website. I am using Typescript with a React framework called NextJS and hosting it on vercel who are the creators of NextJS.
The typescript code is held within my gitlab repository and integrated with the vercel deployment service resulting in quick and simple CI/CD for myself. This allows me to rapidly develop and test certain aspects of the website without fiddling around with tooling such as AWS beanstalk and route 53. though I do use AWS for other components such as my video player and the account service which I will go into more detail below.
Within NextJS I primarily use a UI framework known as Material UI. Material UI is an open-source React component library that implements Google's Material Design. It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. Material UI looks great by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components. For the frontend and UI/UX aficionados amongst y'all, I would also recommend TailwindCSS for its customizability options, however for someone like me who still has trouble centering a button. Material UI is a godsend.
I write each blog post itself (such as the one you're reading right now) using MDX. MDX is like Markdown except you can embed JSX components in it. You write your MDX, write React code here and there, and then you parse all that text (using one of the many available libraries for that) and you can use the result in your React code. Each blogpost is stored and deployed from the website repo and subsequently loaded via NextJS GetStaticProps() and GetStaticPaths(). The MDX itself is parsed using next-mdx-remote
For both the Account and Video Player services they utilise AWS API gateway and lambda to talk to the postgresql database. The repositories are stored within my github and are deployed using github actions integrated with AWS SAM CLI. The video player service interacts with the account service via AWS VPC and truth be told it is not a particularly good way of doing things mostly because it creates alot of complexity if you want to have more then just one service talking to another service e.g. a many to one, many to many where your many is more then just two but currently it works so 👍
The lambdas are written in Golang and handle the usual CRUD operations as well as JWT authentication. Each account has a limit of 50 songs currently as I am using AWS free tier and don't have the disposable income to extend it 😁. The account service handles both account creation and deletion as well as JWT authentication and the video playlist service purely handles what videos are used by which account.
If you like to know more about how I developed my website or regarding technology in general feel free to reach out to me and I will try my best get it out as soon as time allows me