Here’s the TECH that Went Into My Dissertation Project!
Introduction:
Following on from last week’s blog post, this week’s article focusses on the tech behind my dissertation project. I was able to incorporate a wide range of tech and this post documents my progress to date.
As always, be sure to applaud, comment and share with your friends.
Happy Reading!
Disclaimer:
I’ve already written 15,000 words on my dissertation and this week’s blog post will not attempt to regurgitate that. All I’m trying to do is briefly cover the technologies I’ve been able to work with, highlighting key positives and learning experiences.
Brief Project Overview:
Project Title: “Developing a Web App to Visualise Physical Activity Data and Promote an Active Lifestyle”.
Clearly there’s an emphasis on developing a web app (full stack) and incorporating visualisations (graphing libraries) into this.
Technologies:
Next JS 14:
This framework was used to contain the whole application. The great thing about it is that it provides backend, server-side support (built in API). Even smaller features such as the ‘file-based routing’ really simplifed the development process.
Even though I was unable to utilise the performance features such as mutations and caching, I was able to build up a lot of confidence with React JS, even building my own custom hooks (Future block post INCOMING) and developing a sufficient application.
Tailwind CSS:
I’ve been using Tailwind CSS for a few years now and it went hand in hand with Next JS.
Material UI:
This was my first time using a component library and the time saved on perfecting my CSS was significant. I was able to pull in a variety of complex components (dropdown, auto-select, date-picker, dynamic navbar…) which where all crucial in storing data in relation to physical activity.
Firebase:
If you’ve been a long time viewer of my blogs then you’ll know that I love Firebase!
It’s so easy to integrate into a project and the serverless nature of this product reduces complexity.
Here I was able to use their NoSQL Firestore database and even use react-firebase-hooks to simplify pulling in data into my project.
Google Cloud Platform (GCP):
While I initially had no intention of using GCP, their Vertex AI API solution was the perfect free solution for my project. This got me introduced to the world of cloud setup as well and overall, was a satisfying feature to implement.
Stripe Payments:
Again, I’ve used Stripe before and they make it so simple to simulate a payment within an application.
This feature also provided satisfaction because of the real-world nature of this functionality.
Many Difference NPM Libraries:
I’ve used many different libraries in the past however this is arguably the first project where I’ve comfortably pulled in many different libraries and found a way to integrate them all together.
This had led to many different challenges(Old versions, lack of TypeScript support …) however ultimately, I was able to increase my competence with many different libraries.
Vercel Deployments:
Right from the beginning of the project, I made an effort to setup a development workflow (removing doubt of “it works on my machine”).
Vercel provided a quick and easy way to import my Git repository and deploy my application to the web (updating on every ‘Git Push’).
I have some points of criticism though. The main one being that the pipeline is challenging to customise. Their deployment pipeline still passes the build even if unit/E2E tests fail. This is something I wanted to avoid as it made it harder to track when/if the integration of new features would break the tests.
I had some thoughts about building my own pipeline with Google Cloud Build however this was never implemented.
Conclusions:
All in all, I was able to work with a wide range of technologies, facing some challenges but ultimately, the experience was a worthwhile one.
Final Things:
As always, thank you for taking the time to read this article.
I intend to cover more content about Cyber Security (not just tools) in the near future.
All my links are here.
