Portfolio website by Matthew Ifould
Portfolio website by Matthew Ifould
A general-purpose invoice application for storing and tracking invoices, incoming and outgoing. The main purpose of this project was to develop a full-stack application with MongoDB database, Node/Express back-end, and Vue front-end, with full crud operations. The application would be capable of displaying a list of invoices that can be filtered sorted and browsed in a variety of different ways.
I started by producing a data model of the information I was looking to store, I used Mongoose to produce an object model and handle Mongo database interaction. I then used express to create a simple API that was able to fetch a list of invoices and individual invoice details as well as update and delete existing data. This would have to be updated later to include some more useful features. I then started on the front-end by designing a simple user interface and separating out components for reusability of code. After creating the basic structure and styling I implemented some page animations using Vue's transition component. I then added some filtering and sorting functions as well as pagination to provide increased usability. I updated the API to handle these enhancements without breaking the existing endpoints.
I created a form using a number of different data types and UI elements, this would allow the user to add a new invoice as well as edit existing invoices. I used Vee-validate to provide form validation and yup to create a valid schema. I populated the database using mock data from Mockaroo
This project was designed to provide experience creating a feature-rich application using existing skills and expanding into new areas including: ODM, Logging, Validation, Unit & E2E Testing. It was also helpful to solidify my existing skills with TypeScript, Sass, Express, Jest & Vue bringing them together in 1 project from the ground up.
Date created:In order to improve my UI/UX skills I have taken on some challenges from Frontend Mentor. This has helped build on my existing knowledge of HTML and CSS and working with DOM manipulation in JavaScript. It has also been educational to work with different viewport sizes and ratios without a framework.
Useful learning points include:
In order to improve my UI/UX skills I have taken on some challenges from Frontend Mentor. This has helped build on my existing knowledge of HTML and CSS and working with DOM manipulation in JavaScript. It has also been educational to work with different viewport sizes and ratios without a framework.
Useful learning points include:
In order to improve my UI/UX skills I have taken on some challenges from Frontend Mentor. This has helped build on my existing knowledge of HTML and CSS and working with DOM manipulation in JavaScript. It has also been educational to work with different viewport sizes and ratios without a framework.
Useful learning points include:
In order to improve my UI/UX skills I have taken on some challenges from Frontend Mentor. This has helped build on my existing knowledge of HTML and CSS and working with DOM manipulation in JavaScript. It has also been educational to work with different viewport sizes and ratios without a framework.
Useful learning points include:
A multiplayer chess application supporting both real-time (socket-based) gameplay as well as correspondence style chess using a database backend to record moves and display game state. Several games can be run concurrently and these can be loaded and unloaded as needed, games can be spectated by any number of viewers and authorised players can make their moves in real-time or at their own convenience.
Written using Node.js and Socket.io back-end and pure JavaScript, HTML and CSS for the front-end. The chess.js library was used to validate moves, everything else (board, toolbar, game-state, communication etc) was written from scratch. This project was created to develop my skills with Node.js and JavaScript and provide some understanding of web sockets
There are a number of features still to implement and some of the current features require further work and refactoring but I wanted to get the game live for some alpha testing before continuing with this project. The app has been developed to be fully responsive to screen size and will eventually be playable on a smartphone but this is still work in progress.
Date created:A simple JavaScript front end application to compare 2 movies and display the Directors, Actors etc who worked on both.
Written in pure HTML, Javascript and CSS from scratch without the use of libraries or frameworks (other than jQuery which was used for autocomplete alone). This was a self-imposed challenge
Date created:The relative sizes are based on the actual data as are the relative distances and relative orbit speeds although these are not respective to each other to keep the model interesting (An artistic liberty). I also implemented labels for each planet but I personally prefer it without. Another learning exercise in data extraction, processing, and presentation with additional challenges such as 3D spatial coordinates, conversions, and scaling.
I highly recommend Stellarium which is a fully-featured planetarium, which really shows how far this concept can be taken.
Date created:A simple block-breaking game, written using P5 and JavaScript, a 3rd dimension was added to make it look a bit nicer and I intend to add some minor physics as well as improving collision detection but this was mainly created for fun so I will fit this in around other projects.
This is a lightweight browser game that uses WebGL for 3d aspects
Date created:Nearly as common as Hello World the Todo app allows you to add, check and delete agenda items without relying on your memory. This was initially a tutorial for the Vue frontend framework that I developed upon to provide persistent storage, responsive design and an Electron-based desktop application/widget.
This project gave me an introduction to Node, Vue, Electron and JavaScript frameworks in general. I was looking to expand my knowledge of the JavaScript infrastructure and I have discovered that there is much to learn.
Date created:The classic Conway's game of life in Python, this was a test project using 2D drawing, canvas', coordinates, arrays.Given an initial state of "living" cells the grid propagates with each generation based on a set of rules described in the wikipedia article above.The challenge on this project is down to the unlimited scope, theoretically the game is of infinite dimensions and also continues infinitely, I wanted to honour this by not hard coding any set values so that the game can continue without arbitrary constraints. The limiting factors are currently with size of variables used (which could be easily updated) and hardware limitations.
The view of the grid adjusts according to the min/max coordinates of living cells meaning it can zoom in and out as the scale increases and decreases. Debugging tools can be switched on and off showing neighbouring cells and coordinates.
Date created:This was a demo project to test out the google machine learning library especially in regards to photos. I created a simple app to take photos from the gallery or directly from the camera and using a call to the google cloud machine learning library return a list of faces within the photo. These faces were then highlighted using a simple canvas drawing on top of the photo with a red rectangle around each face.
I had in mind a number of use cases for camera processing both in and outside the scope of machine learning; such as barcode / QR readers. This was a template project for such ideas.
Date created:Created in just over a day this was an exercise in rapid development. I challenged myself to create a fully operational albeit basic mobile application that my mum could use to check the local tide times. It shows the next 3 days, high and low tides, highlighting and counting down to the next. It also displays a background graphic showing the current tide level. The data is fetched from an API once per day and stored locally to deal with API call limits.
Date created:This was my first project using Java in quite some time and the idea was to get back into the fundamentals such as data structures, GUIs, state management, logging, etc. It also helped develop some skills in requisite tools such as Git, Junit Gradle, and Maven.
I decided to create a simple Sudoku solver that given a starting state was able to provide contextual hints and solutions. The core data structure is a 2D array with an object wrapper with some convenience methods. The solver uses simple logic as much as possible and when it cannot proceed takes a recursive route to find a solution if present. It also proved helpful to learn some of the "newer" features of Java: Lambdas, Streams, higher-order functions, etc.
I have revisited this project a couple of times to add features that I thought would be useful learning exercises. I added OCR, this allowed a grid to be scanned and parsed into a usable format. It also gave me experience with OpenCV imaging library
This project is far from complete as I set it aside to further my learning in Spring and mobile applications with the intention to revisit.
Date created:This website! Well, not only this website but also the underlying services that run this website including Authentication, Database backend and Upload facilities. Created in Java using the Spring framework and Thymeleaf HTML templates for dynamic content. This was a learning experience in creating RESTful APIs, working with Spring IoC and Di architecture as well as processing content using template engines and frontend frameworks. It is also a showcase for the other applications and utilities I have created.
I wanted the site to employ a content management system based so that I could easily make changes remotely it, therefore, has a fully-fledged admin section allowing me to create new content, update, delete and upload additional static content. All of which is secured with Spring Security authentication
Date created:A database application similar to IMDB but for retro game consoles and games, developed for both IOS and android in Flutter/Dart using a Mongo DB database to store, retrieve and query a sizeable dataset. This was a very ambitious project and is currently still in development
The database also has a front end on this website: Console DB this is a stripped back version of the mobile application, this will also be expanded over time.
Python was also used to parse the data from various sources into JSON format for insertion into the database. Learning goals were: - Database schemas - Database queries - State & State Management
Date created:A website bookmarking service in Java and spring boot for cataloguing links to resources used in the development of this website and the applications exhibited within. The bookmark service initially takes a website URL and a name, on submission it fetches a screenshot of the website from an external API and the bookmark is added to the database. Bookmarks are shown in alphabetical order with pagination. The entry can then be expanded to include a description and keywords useful for search, this can also be completed at entry using a more verbose form but I wanted to allow for quick addition.
There are a number of features I would still like to add to this service, such as labels, filters and other sorting options.
Date created:I wanted to implement some algorithms and learn how to visualise them. It was suggested that Double Pendulum would be a good place to start so I spent some time programming the algorithm using cartesian coordinates. I ended up doing quite a few of these visualizations as they are short, easy to complete tasks that help cement key concepts with a nice visual payout.
Date created:A utility program to batch convert a list of users into custom avatar images. A user list can be passed in using a JSON file and then individually selected before processing using a very rudimentary GUI.
Using a template image the username is appended and the background and foreground colours applied. The image is then output to a specified directory and the images can be previewed in a gallery. Long filenames are truncated and overwrites are optional.
Date created:
