Web designer turned front-end developer.
Working for a not-for-profit in the mental health space.

About me

Summary

I recently completed a full-stack React, Redux and MongoDB course, a React and Redux course the year before, and JS, Node and Express, and PHP and MySQL courses prior to that. I currently work full-time for North Western Melbourne Primary Health Network as a front-end developer and volunteer with TreeProject, a Victorian NGO, on their website. I also run a web-startup and host websites through my design agency EA Digital.

Work Experience

I started working at NWMPHN as a front-end web developer in July 2022. I build and modify custom components for a system that clinicians use to record patient data, conduct mental health assessments and make external referrals. I also work with clinicians to improve the system's UI and UX, conduct meetings and prepare design briefs. Our stack is built on AWS and includes Python, Flask, and Jinja templating, and I work mainly with Javascript, Jinja, Bootstrap and HTML. We work collaboratively via Git and use GitHub extensively.

I've also worked and volunteered at TreeProject since 2020, partly as a web designer but also as a developer. Through EA Digital, I've designed and still host WordPress and Joomla websites for various clients. I also created and maintain a startup called Echo Active in my spare time.

Background

I've got degrees in Science and Law and have worked as a lawyer, in small and large businesses, and have run a successful consulting business. See my LinkedIn for more about my work history and studies.

My Apps

I'm now building skills with the MERN stack (MongoDB, Express, React and Node) and creating React powered web apps that are showcased below. My upcoming apps will feature NextJS and TypeScript.

App Showcase


App iconVoteNow

App widescreen screenshot

VoteNow lets users send single click email surveys to a mailing list and monitor feedback.

App mobile screenshot

Users log in using Google single-sign-on, add credit via Stripe and create a survey that is then sent to an email list. When email recipients then click a link in the email to vote, SendGrid sends a webhook to our Express server and the resulting click data is stored in MongoDB. This enables survey creators to monitor clicks.

This app was built as part of a Node with React: Fullstack Web Development course on a MERN stack.

Key skills

  • Stripe, Google Auth, SendGrid and Mongo Atlas APIs
  • User accounts and credit, and surveys details and clicks are stored in MongoDB
  • Webhooks via SendGrid

Code hosted on Heroku

App iconThis Portfolio Website

App widescreen screenshot

App mobile screenshot

This site was built with a JS framework called Gatsby. Gatsby uses React components and JSX, but unlike typical Create-React-Apps, it features server-side-rendering to pre-render html rather than download JS and then render it in the browser. This ensures very fast load times and allows search engines to index the site.

Key skills

  • GatsbyJS framework and plugins
  • SSR (Server side rendering)
  • SASS (Syntactically awesome style sheets)
  • MDX (Markdown components)
  • Hosting via Netlify

View Code: My Github

App iconMyBooks

App widescreen screenshot

This app lets users create a personal book collection.

App mobile screenshot

It was built after completing a React/Redux course and adapted from a video streaming app. Users can authenticate via Google and edit, update and delete books. A custom React component lets users search the Google Books API and add books from a list of search results.

Book data is stored in a JSON file. Heroku's 24 hour server cycles means that new books added will be lost, please log in and add one.

Key skills

  • React, React Hooks, ES5 and ES6 syntax
  • Redux, Redux-Thunk
  • Google Authentication
  • Google Books API call made via Axios client
  • React Final Form
  • Heroku CLI & hosting

View Code: My Github

App iconKurzTube

App widescreen screenshot

This app connects to the YouTube API and lets users search for and display a list of videos, select a result and play it in their browser.

App mobile screenshot

It was built in the React course mentioned and features a custom hook that extracts video-fetching logic and makes it available to all components. A key adaptation I made was to create mobile and widescreen modes that are set via component state.

Key skills

  • React, React Custom Hooks
  • Google YouTube API calls
  • Netlify hosting

View Code: My Github

App iconPlants 'n Things

App widescreen screenshot

This app is a plant shop, built with vanilla-JS, a custom Node server, Express and HTML templates.

App mobile screenshot

It was adapted from a Udemy JS course. Node modules allow form validation and setting of cookies so users can add items to a cart without signing in. Encryption lets admins securely create an account and add products and images.

Product data, users, shopping carts and images are stored in JSON files. Free hosting is via Heroku and 24 hour server cycles means that new user products or admins created will be lost. Click the lock icon to view the admin console, create a temporary account and add a product.

Key skills

  • Node, Express, HTML templating
  • Cookie-session (Node module)
  • User management
  • Encryption, secure passwords (salting and hashing)
  • Heroku CLI & hosting

View Code: My GitHub

Thanks for visiting!