My major project of 2024 was building a website where I can track and analyse my reading activity. 

The front-end of the website uses Vue.Js 3 along with Pinia for state management, Vue-Router for routing, Vue ChartJs for the charts in the analytics and a mixture of Shadcn components and Tailwind for styling.

The backend uses Supabase to store user and book information, and the book data initially comes from the ISBNDB API.

The design for the website is basic but user friendly so as to make it easy for users to be able to find and add books to bookshelves or lists, track and analyse their reading activity, and leave notes when required. Users are able to:

Search for a book using the ISBNDB API and view the book details (author, publisher, no. pages and book cover)

Add a book to their 'Want To Read' bookshelf, or add the book to a custom list

Progress through the reading journey from 'Currently Reading' to 'Read' or 'Did Not Finish'

As a user progresses through the book, they are able to add notes and update what page they are currently on until they have finally finished the book. They can then rate the book out of 5 stars.

As the user progresses through their journey with a book they are able to see a timeline of their reading activity.

A view of all of their books by reading status

For all stats by year, there is a comparison indicator for the previous year, and the graphs are able to show data overtime (past 12 months, past 6 months).

Users can also update their account details such as:

The project makes full use of skills I have learned in state management, CRUD, and user-friendly design through the courses I have taken as a hobbyist developer.

Over time this website will evolve and progress to a better application and will include an admin section.

Vue.js 3 • ISBNDB • Typescript • Pinia • Vue-Router • Vue ChartJs • Supabase • Tailwind • Shadcn-Vue • Playwright

Book tracking project - a major project using Vue.js 3, ISBNDB, Pinia, Vue-Router, Vue ChartJs and Supabase to track and analyse reading

Going Reading

Shutter Social is a Vue.js 3 social media project that I created to have a website I could use to test using Playwright. I wanted a website with multiple types of users where some functionality is limited either to the specific user who is signed in (for example, the ability only to edit and delete the post created by that user) as well as admin features like viewing data on the content on the social media site.

It was also a chance for me to try learning a new language. I have been using React for a couple of projects, and I wanted to see Vue's positives and negatives and whether it would be a language I would want to continue using in the future.

Along with using Vue, I am using Pinia for state management, Supabase as my database/API, Vuetify for some components and Tailwind for styling. This was my first time using this complete stack, and working with them all was a great experience. 

The user flow is very much like Instagram. Users have the ability to:

Provide some content associated with the post

See a timeline containing their posts and the posts of the users they follow

Leave hashtags in their posts to see other posts containing that hashtag

Leave @ mentions to mention other users associated with that post

The only functionality missing that you generally see on social media sites is the ability to leave comments. I purposefully left out the comments part because I personally find the comments section of social media sites to be the worst part. 

Vue.js 3 • Pinia • Supabase • Tailwind • Vuetify  • Playwright

A social media site I created using VueJs to practice testing using Playwright

Shutter Social

The Curious Paper Co. website is a full-stack MERN e-commerce website. The front end has a main homepage containing links to some product collections. There is a 'Products' page with product categories. Within each categorisation, several product cards include an image, title, price and status (available/sold out). Each product has its own product page containing images, description, price, etc. Users can then add products to the cart, checkout using PayPal, and track their orders.

There is also an 'Admin' section where administrators can add and edit products, add, delete and edit users, and change the status for orders to shipped. There is a dashboard containing information on sales using Google Charts. 

The project was created using an array of Udemy courses and YouTube videos, which helped increase my knowledge of React. Whilst I still seek further knowledge and experience to learn about topics such as state management, this project was a great introduction to React for beginners.

I sought inspiration from other online stationary websites to style the website in a user-friendly and aesthetically pleasing way. However, the website is not mobile-responsive, but I may look at pursuing this in the future.

The website is hosted on Render.com on a free service, so it can take a while to wake up and run.

MongoDB • Mongoose • Express • React • Node • Google Charts • PayPal • Saas

This is my first MERN stack e-commerce project using PayPal as the payment method.  Google Charts has been added in to provide sales analysis in the Admin view.

The Curious Paper Co.

One of my major projects has been building this very website! It has been built using Next.js, Sanity as the CMS, Typescript, elements of React and Saas for styling. The primary purpose of the website is to write about what I learn as I progress as a Product Manager and Data Analyst. I strive for knowledge, eager to learn as much as possible at work and in my spare time, and I need a place to document everything. But as web development is a hobby of mine, I am using this website to document my progress when I have the time to take on projects. 

The blog cards have two formats; text and image. This is to add variety to how my blog cards are displayed by applying different styles based on how I feel about the post. Pagination has also been enabled, although this is in the front end. 

The blog posts themselves contain text, images and code blocks. The portfolio section includes information on each project I undertake, such as how I built it, what I learned, what I could do better next time, etc. The website is also mobile responsive.

I built this website using Next.js to take advantage of the 'preview mode' that Sanity offers, meaning I can preview my drafts before they are published.

Over time this website will evolve, and I, too, with it. 

Next.js • Sanity CMS • React • Typescript • Saas

My website - my first major project using Next.js, Sanity, React, Saas and Google Analytics.

Graeme Elliott Website

The Cambridge Gig Guide project was my first full-stack web development project. I wanted to build a centralised website that displays all of the gigs in Cambridge (where I used to live and work), instead of having to sign up to countless mailing lists or visiting each venue's website to find out what's going on.

Using online resources such as Colt Steele's Web Development course on Udemy, as well as a couple of other YouTube videos, I managed to create a complex website from scratch. 

It makes use of all of the basic HTML, CSS and JavaScript skills I learned at the start of my self studies back in 2018, as well as incorporating some new features such as image storage on Cloudinary and sending and receiving emails via Nodemailer and SendGrid. 

There are three user cases for the website: General visitors, Promoters/Venue staff and Admin.

General visitors don't need any access to the site beyond what is made publicly available. This includes looking at the index page for news, newly released/announced gigs and and what gigs are coming up over the coming weeks. They will also be able to look at all of the gigs filtered by month, and look at gigs by venue too.

Promoters and venue staff will be able to input their own gigs using a form. They will also be able to edit and delete gigs where appropriate.

Administrators need to have full control of the site. Not only being able to input, edit and delete gigs, but also have control of the registration of new promoters/venue staff.

There is also a contact form so users can get in contact with the administrators. Password reset functionality will also be included so that promoters/venue staff/admin can reset their passwords via a token emailed to them.

MongoDB • Mongoose • Express • Node • Passport JS • EJS • Cloudinary • Nodemailer • SendGrid

Portfolio