Raspberry Pi Dashboard
Tracking dashboard to monitor the status of my Raspberry Pi micro-computers.
As a self-hosting enthusiast, I have many Raspberry Pi micro-computers running various tasks around the house. For instance, I use PiHole as an ad-blocking DNS server, with Nginx as a reverse proxy. Gitlab self-hosted git server with a separate Pi as a Gitlab runner for build tasks.
I also host a range of development aid services such as Planka Kanban boards and Bookstack to provide documentation storage on some of my older devices. With so many separate devices, it became practical to have a single place to monitor them.
To enable the functionality required I developed a node script that runs on each device and returns a json object that reports its temperature, memory capacity and usage, disk storage and availablity, fan status, uptime, board type and more.
This is consumed by the dashboard app you can see on the screenshot and video provided. If one of these devices fails it is reported on the display so I can take action to recover and avoid any data loss or restore services.
Xylophone Master
Childrens video game for Android and iOS built with Expo and React-Native.
Having been a lifelong gamer I have always wanted to try my hand at developing a video game. I decided to start small and develop a mobile game with the target audience being infants and younger children.
It is a simple music game designed to teach children musical notation and how to play a xylophone.
Once the user starts the game they are asked to select a song from a number of well known pre-scripted nursery rhymes. Once they have made their selection, the curtain draws and the conductor helps the user to play the correct notes at the right time via a que card at the top of the screen.
This was my first experience using the react native wrapper, expo. It enabled me to quickly prototype the application and test in on my mobile devices as development progressed. I also used the reanimated animation library to bring to life the SVG based graphics.
This was a really enjoyable project and I hope to expand further on my game development experience to include different genres.
Scribe CMS v2
NODE.JS Full-Stack Study Project: A Content Management System for websites using Prisma, Apollo and GraphQL
As part of the process of updating my knowledge of back-end software I decided the best way to learn the latest stack would be to build a content managemnt system as it uses all of the CRUD operations that would typically be required.
Previously I have used PHP and MySQL for back-end concerns however these technologies have somewhat fallen out of fashion and been replaced by Node.js based solutions. With that in mind I decided to build my database with SQL lite using Prisma for ORM, GraphQL to query the database and Apollo on the front end to access and update the data as well as keeping the state of the application in sync.
As is often the case with these side-projects. What started out as a learning exercise quickly turned into a fully specced out project with many months of work involved. I included an image library service as part of the CMS that enables me to upload and manage a library of images for use within the content of the site. The WYSIWYG editor I utilised in order to edit and create articles is ReactQuill which uses a custom image loader module I designed for integration with my library files and database.
For information on the first site I've developed that has content driven by the ScribeCMS, Perpetual Summer Ltd, please see below.
Perpetual Summer Ltd
My contract development services company website, driven by the ScribeCMS content management system.
This blog-style website is driven by my custom content management system ScribeCMS
Originally designed as a simple means of displaying the content of the ScribeCMS, once the scope of that project evolved from a simple study project to a fully open source CMS project I rolled it out to be the main website of my software development services company, Perpetual Summer Ltd.
As you can see from the attached screenshots, as of the time of writing it contains a series of articles on a range of disparate subjects, these are just filler content however, as the CMS gets developed further I will focus the content posted to include updates from clients and progress on my open source projects such as the aforementioned ScribeCMS as well as React-Catalyst and the Catalyst Elements UI component library.
Catalyst Elements
Complete React UI Component Library for Layout, Utilities, Inputs and More
Catalyst Elements is a collection of composable Open-source layout elements, user interface components and utilities. Built with a simple consistent and common API it is designed to allow the developer to create highly customisable inputs and components.
This library of components was originally part of the React Catalyst development environment, I split it off into its own project so that I could publish it to NPM and install it as a dependency as and when required.
For more information, interactive documentation and tutorials on usage, visit the Catalyst Elements website here.
React Catalyst
Webpack based React Development Environment
As part of a migration from Gulp to Webpack during my time at SIS, I learned how to build a development environment with modern tooling to enable a better developer experience. I developed React Catalyst as a continuation of that work to enable me to quickly start developing web applications using my prefered toolset. It has hot-reloading during development and features a highly optimised production build system.
It is opinionated about the toolset employed as I built it for my own purposes, as such it has out of the box support for a huge range of development tools and libraries including React, Redux, ReactRouter, CSS Modules, Autoprefix, SCSS, Layout, Animation, Typography, Linting, Testing and more. It can also be configured to deploy the optimised production build via FTP for easy itterative design with rapid deployment.
Over time, as I have used this on various projects its has expanded to include a broad range of commonly used reusable components. It features a range of controlled components for forms, buttons, links, liteboxes and thumbnails. Each of these optional reusable components has been built with simple configuration and optimisation in mind and are only bundled as part of the final build if utilised in the project. This greatly decreases development time and provides a wealth of helper components off-the-shelf without additional redundant code making it into the final production build - as is often the case when using external libraries.
This website was also built using the React Catalyst Development Environment. This project is open-source and the codeis publicly available on bitbucket . The documentation site, complete with tutorials can be found here
Cryptotron
Cryptocurrencies Market Data Graph Visualisation App
A "just for fun" Cryptocurrencies data visualisation app that started as a side-project as a means to learn d3, the very popular data visualisation library.
It consumes public Cryptocurrencies API data and converts it into line graphs, candle charts and pie charts to display price data, trading data and market capacity distribution information.
Raspberry Pi Touchscreen Tablet
Internet Of Things - Home Automation Project
Built on NodeJS and running on a Raspberry Pi SoC board connected to a touchscreen display, this project enables the user to get the weather forecast, control spotify music and playlists, view and edit their calendar with reminders and also control and monitor IoT lighting throughout the house.
The UI is built with react.js served with Webpack via a locally running express server and headless chromium instance. I had planned on building on it with more sensors, heating control and a home CCTV system. I had built the homemade cameras using the raspberry pi camera module but have not integrated that feature into the device.
I built this project as I enjoy working with electronics and hardware and to familiarise myself more with some of the 'bare metal' features of NodeJS.
