Have a look at some of my programming.
What would you like to see?
Flagger
(React app)
Flagger is surely the most addictive flag-identification-based ReactJS app to be found on the entire internet! Feed the programme information about a flag, using the simple tickbox display, and your flag will be identified!
With an extensive database of flags of the world, Flagger is a programme that allows the user to identify an unknown flag by engaging with the tickboxes, thus feeding information to the programme about charactersitics present on, or absent from, the flag in question. The application instantly updates the display, eliminating flags and whittling down the possibilities until the user finds the flag they are looking for. Clicking on a flag will redirect the user to Wikipedia's page about that country.
- ReactJS allows user input to achieve instant changes in the data displayed without page reloading.
- The interactive flag display is easily used.
Go to Flagger.
View the code for Flagger: the Typescript version.
View the code for Flagger: the Javascript version.
Exercise Log
(React plus database)
The Exercise Log is a relatively simple full-stack React application interacting with a database. There are two versions using different database types: One uses MongoDB (a 'MERN-stack' version), and the other uses MySQL (a 'SERN-stack' version).
The basic concept of the application is to allow a user to record the exercise they have done. Users can create records of their exercise (in their chosen colour) as 'exercise events' which are saved on the database. The application displays existing records from the database. The user can also delete any existing records.
- React gives efficient DOM manipulation and smooth re-rendering when the user makes changes.
- Fetch API for requests from App.js to the server.
- Test files using jest.
MongoDB version: View the code.
MySQL version: View the code.
View component tests or App.js tests.
Mathematical Minefield
(full-stack)
The Mathematical Minefield is a primary school maths game.
Pupils make their way through a minefield of questions, clearing a path with their correct answers. Questions become slowly more challenging as players progress through the levels.
- HTML Canvas for the game board.
- Javascript, CSS and embedded javascript.
Play Mathematical Minefield.
View the code for the Mathematical Minefield.
View the code for the version with Typescript.
React stopwatch
(React app)
This stopwatch programme uses React as a framework for showing times elapsed.
The programme features lap times, and can delete existing lap times without stopping the stopwatch. It uses local storage to preserve the lap times even if the page is reloaded.
Go to the React stopwatch.
View the code for the React stopwatch.
Temperature analysis
(full-stack)
This temperature analysis application consumes recent data from the Open Weather Map API. It then analyses the hourly data to identify 24-hour maximum and minimum temperatures and plots these as two lines on a graph using ChartJS. Using statistics.js, these figures are then processed to calculate correlation and standard deviation.
- Consumes data from an external API.
- Use of node-fetch to obtain the data.
- Creates a graphical representation of data received.
- Performs statistical analysis of data received.
App information, 30th October 2024:
From 30th October 2024, the OpenWeather API 2.5, from which this app obtained its data, is no longer available. Hourly data for the last five days is no longer readily available on the new API 3.0. As a result, the current programme is now obselete.
The Temperature Analysis app will therefore need to be reconceptualised and redesigned to reflect this change. However, the code may still be viewed on github using the links below.
View the code for the temperature analysis application.
View the code for the version with Typescript.
Maths Farm 4
(front-end)
Maths Farm is a mental arithmetic game for school. Gamification involves buying and selling animals with money earned through arithmetic.
- Player options allow a choice of arithmetic operations.
- Player options allow a wide choice of customised difficulty levels.
- Three themes to provide variety: Classic, Australian and Undersea.
- A mobile-friendly version, which can also be a useful simplified version for new users or younger pupils.
- On devices that allow drag-&-drop, the player can move animals around their farm (for a pound a go.)
- Players have a discount sell-back option by dragging an animal to the top of the screen.
- Simple animation allows the animals to roam the farm at will, bringing Maths Farm gameplay up to the expectations of the more ethically discerning player.
An arithmetic demo
(reduced time, mobile version)
A farm management demo
(Spend unearnt money!)
View the code for Maths Farm 4.
Play the full game now!
Prettypay Payment Processing
(node module on NPM)
Prettypay is a node package and web development tool. It is a moderately simple simulated payment processing system used with javascript and EJS pages.
Payment processing is designed to resemble, to an extent, a genuine payment processor. The javascript used in the root directory, into which Prettypay has been installed, loosely mimics methods for actual payment processors. It is intended to be a tool for both playful simulation and development practice. If desired, available methods allow the developer to programme reactions to the success or failure of a simulated payment.
The code for Prettypay itself includes Jest tests for util.js functions. The code for the Prettypay Demo includes testing using Jest and automated browser testing using Puppeteer.
- Detailed README instructions discuss set-up, options, and potential hurdles, with example code.
- Prettypay checks details such as valid amount and card expiry date before proceeding.
- Backend verification that the payment modal has not been tampered with at the front end.
- Backend processing of simulated payments, producing transaction records.
- Backend manipulation of the file system reads and writes files.
- Options include form autofill, currency, and choice of payment form questions.
- Developers can easily programme their own additional criteria for payment rejection.
- Use of node-fetch by the router.
View the code for Prettypay.
See Prettypay on the NPM website.
Visit the Prettypay Demo, a simplistic website demonstrating Prettypay at work.
View the code for the Prettypay Demo.
Firefly Fictional Security Corporation
(full-stack)
This website is a brochure for a fictional security company.
The website offers information on the different services available from the company, as well as contact information, location, online purchase etc.
Simulated payment processing, for any fictional purchases the user wishes to make, is managed by Prettypay, a separate node package project to be found elsewhere on this page, which is installed with NPM.
- Logical and convenient architecture for users to find information or services.
- Backend processing of simulated payments, producing transaction records and receipt information.
- Standardised layout accross pages, using EJS partials.
- Video and slideshow imagery for visual appeal.
- Backend manipulation of the file system to write transaction records.
- The code includes testing using Jest and automated browser testing using Puppeteer.
Go to the company website.
View the code.
View Puppeteer browser tests at buy.test.js
View main.test.js
Mathsmarker
(full-stack)
Mathsmarker allows pupils to check their answers without actually giving them the answers. This allows them to gain immediate feedback and proceed with some autonomy, rather than waiting for the teacher. Mathsmarker may be used in the classroom or at home.
The application works with data it obtains from a Mongo database. The data may be entered directly into the MongoDB, or entered more conveniently using the teacher interface application (see Teacherside below!)
- Javascript DOM manipulation based on the contents of the database.
- Fetch API for requests from the front end to the server.
- A simple and intuitive interface, easily understood by children, allows pupils to type in and check their answers.
- The interface is logically organised by class/group, topic and exercise.
- A brief delay is imposed on a given exercise after checking answers, to discourage a trial-and-error approach.
View the publicly accessible deployment.
Teacherside
(full-stack)
Mathsmarker Teacherside is a secure web application designed to enter data into a Mongo database for use by the original Mathsmarker project (see Mathsmarker above!) Teachers enter the desired question/answer information into the application, which communicates it to the database. The database stores the information entered on the teacherside and makes it immediately available to the original Mathsmarker 'pupilside' project.
- Password authentication with bcrypt encryption using a passport-local strategy, to ensure users are legitimate editors.
- Password set-up requires minimum password length and rejects many predictable passwords.
- A methodical interface organised by class/group, topic and exercise.
- Ability to create, view, edit, and delete classes/groups, topics, and exercises.
- For each individual question, teachers can...
- require a particular answer, or instead allow any of a set of answers, for example allowing 400 mm, 40 cm, or 0.4m,
- customise responses to incorrect answers, for example offering a hint.
- Useful editing options for exercises, including...
- sharing exercises by saving new copies in other groups,
- re-ordering exercises within a topic using drag and drop,
- choice of adding a note to pupils at the beginning of the exercise.