PL | Design - My Green Space App

Year

2021

Languages

HTML
CSS
Javascript
Electron.js
SQLite

Scope

Electron Application

Project Overview

The purpose of this application was to apply what I've learned in my Electron course at NSCC and expand on how it can be applied. This application achieves this and helps with a real world application for a small side business which I have been working on during the pandemic. The "My Green Space" App assists with building and maintaining a digital inventory of tropical houseplants.

This allowed for me to create an application for a practical real world purpose, and will offer a digital means for keeping track of my inventory real-time, as well as be able to better perdict when plants will be of enough maturity to be of a sellable quality.

Technologies Used

The course involved using Electron to make destop applications. We used Javascript, HTML5, CSS, SQLite and SASS to achieve this. A single file SQLite database was used for storing data for the inventory, this did not require the database to be hosted anywhere and could be run locally. This was pretty interesting as the application can be actually made by someone like myself, and without having to learn different languages in order to package an application prior to use as a true desktop application.

Challenges Faced

Some of the challenges which I faced during this project was binding actions to buttons in the front end of the application. This involved creating functions for each button in the main process, which would be able to communicate with the front end and achieve the desired results. I also created a custom frameless interface. This required me to create custom close, maximize and minimize buttons that triggered the appropriate actions for their respective parent window or child window. I figured having a set window size and disabled the scalability of the windows. I tried to have a rollover effect for the "X" where it would change colour to yellow when hovered over, but there was a problem with how I created the icon. The other icons worked well with the effect.
The other challenge was to take the date purchased and create the logic which would calculate the difference between the entered date and the present date. This allowed for a dynamic age of the item in the database which was pretty useful for the applications purpose.