Projects

Session Hub

An SPA built with React consuming a REST API built with Express. The project aim was to create a social media site where users can create accounts, add friends, and post about their recent surfing, windsurfing, kitesurfing etc. sessions for other users to like and comment on.

The home page of Session Hub showing the users My Hub section and recent posts of their friends
A session page showing a surfing at Bigbury session with a location map on the right hand side
A profile page for the Example User with their profile picture, about section and recent posts
Two screenshots of Session Hub viewed in a mobile viewport. The left is a session of Windsurfing at Rustington Beach and the right a list of the users friends

Challenges overcome included:

  • Issuance, storage and authentication of JWTs using PassportJS
  • Allowing users to drop pins for their session location to display with Leaflet and Open Street Map
  • Writing custom React hooks for fetching, posting and updating data
  • Mocking the API during front-end testing using msw
  • Using Mongoose pipelines to collate data across multiple collections into a single server response
View LiveView Repo

RedoneIt

A site to display information about countries with data fetched from the REST Countries API built as a challenge from Front End Mentor.

RedoneIt Homepage showing recent posts from a selection of different subreddits
Technology subreddit page screenshot showing recent posts and the about sidebar with subreddit rules
Three screenshots of redoneit all viewed in a mobile viewport. From left to right these are: the homepage, the navigation menu, and the learn programming subreddit

Challenges overcome included:

  • User authentication and session management with Firebase
  • Effective data organisation with Firestore
  • Creating maintanable and reusable React components for use across different pages
  • How to increase user interactivity with the help of CSS animations and Framer Motion
View LiveView Repo

Where in the World?

A site to display information about countries with data fetched from the REST Countries API built as a challenge from Front End Mentor. I decided to undertake this project in order to focus upon improving my knowledge of testing and accessibility, as well as dig under the hood of React and dabble with some CSS-in-JS using Styled Components.

REST Homepage in light-mode colour scheme
REST Homepage in dark-mode colour scheme
Country detail pages for Brazil and Portugal in mobile viewport

Challenges overcome included:

  • How to setup React and integrate libraries from scratch without the help of Create React App or Vite etc.
  • Using Styled Components within React, in particular global styles to allow users to toggle between dark and light themes
  • Mocking the third party API with msw during testing to reduce unnecessary calls
  • Testing with asynchronous user events with React Testing Library and Jest
View LiveView Repo

Battle Ships

A BattleShips style game created with Vanilla JS to greater my understanding of OOP, Jest and TDD.

An underway game of battleships
Players positioning their ships in battleships
A game of battleships where player 1 has defeated their oponent

Challenges overcome included:

  • Learning how to write code in a modular manner so not only can it be tested during development, but also maintable in future.
  • How to seperate game logic from the user interface
  • How to use function factories to seperate game components and model them with with OOP
View LiveView Repo

Where's Fry?

The photo-tagging project from the Javascript and the Backend module of The Odin Project. The aim was to create an app using React and Firebase in which users race against the clock to find and correctly identify characters from a Where's Wally style photo to try and top a leaderboard stored on the backend.

A game of Wheres Fry underway with 35 seconds on the clock
A game of Wheres Fry underway with the user selecting Nibler
The top and recent scoreboards display on mobile viewport with a iPhone SE frame
A page displaying the rules of the game Wheres Fry

Challenges overcome included:

  • How to use asynchronous functions within React
  • Detecting where on an image a user has clicked, and verifying if the coordinates match those held in a database
  • Creating a timer with JavaScript and publishing results on recent and all-time highscore leaderboards
View LiveView Repo