Tag: react

Mar

2024

Criss Cross Apple Sauce

(A nonogram platform)

After seeing how much my partner would visit my previous codepen experiment with Nonograms on codepen, I thought it was time to upgrade. Using Next, vercel, postgres and Auth0 I created a platform for her to be able to create and rank new puzzles, with her fastest time being persisted to a database for each one.

I also played around with Next themes to create, not only a light and dark mode but also custom themes that can easily be added to.

Jan

2024

Personal website

(What you're looking at now)

As a professional front-end developer of almost 10 years, it's odd I've never had my own personal website. I'm usually too lost in a project and would rather be exploring something new. However, the increase in popularity of server-side rendering has given me a great excuse to finally have a reason to tackle my own site.

Next.js and React 18 make for an interesting deviation from my usual client-side forte. The technical differences are fairly apparent, but I think the headspace of thinking in terms of keeping things server-side is more nuanced and hard to get used to. This is especially true when all your usual React comforts are there within easy reach with nothing stopping you. When you hit a problem or a suggestion from Next's surprisingly helpful builder, it's easy to take the quick fix and implement the client-side solution. I think so far I've managed to avoid temptation, and this site should be completely static... famous last words.

Jan

2024

Good Morning AI

(The radio station run by robots)

Good Morning AI is a radio station where the scripts, voices, music, and schedule are completely controlled by AI. It's an idea I've wanted to create for years, but with the huge advancements in AI in the last few years, it finally felt like the right time to make it happen.

It became immediately obvious that working directly in the console to tweak prompts, iterate on outcomes, and stitch together different APIs was tedious at best. To try and make the build process smoother, I created a dashboard powered by Express, React, and Tailwind to quickly build the tools I needed to help me realize my vision.

This project came with a lot of technical hurdles despite the fact that the AI heavy lifting was done for me. I think the most interesting lesson for me was in adapting to a new paradigm of interacting with software. Both in terms of prompt engineering and also the API itself. For instance, being able to present the AI with a TS object and request for its response to fit that definition streamlined the process. Although this would be risky in a production client-facing application, when it came to making quick MVP tools, it allowed me to quickly and easily iterate. If a type needed to change, then the response from the API would automatically update to match it.

Nov

2023

NWTC Tribes

(An employee engagement suite for NWTC)

When the New World Trading Company pitched their idea to me as "A bit like the sorting hat from Harry Potter," I was in. Realizing that this meant connecting to an HR API, building an admin dashboard, and exporting everything daily to a third party made me a bit more hesitant!

The most important part of the project was helping to strip back the requirements to create a foundation that covered what the client really needed, leaving plenty of room for future additions. I chose Firebase as the backend, allowing me to quickly create and push features. For the front-end, I utilized a React, TypeScript, and Styled Components template I had created for exactly this purpose.

The hardest part of the project was working with live data that needed to be updated and manipulated daily. The key to tackling this was creating logs of performed operations and regular backups for the worst-case scenario. Writing about this project without using more Harry Potter puns was the real challenge.

Dec

2021

Shout 'Em Out

(A category guessing game with an AI twist)

"Shout 'Em Out" is a re-envisioning of one of my childhood favorite games. The premise is simple: each card contains a category. The opposing team simply needs to try and guess the top 10 answers to that category... the catch? You're not looking for the right answers, you're looking for the ones LLMs circa GPT-3 think are the right answers.

The game was created to explore LLMs and OpenAI's API. Although far from the models we see now, I was blown away by the demos I was seeing and wanted to experiment with it myself. I created a simple app to propose categories and parse the responses into lists of answers. This tool gave me easy access to regenerate or nudge responses, as well as to correct Americanized spelling or remove duplications.

Once I had my categories and answers, I created a React app to generate the cards using print CSS queries, easily printing off the final version. This was the day I learned that I hate styling print media :). The software allowed me to easily generate over 100 cards and iterate on the design and layout with minimal effort.

The final product was a fun game that I could play with friends and family, but also a great learning experience in the power of AI and the benefits of software in the physical world. It also taught me a valuable lesson in the capabilities and dangers of AI, most importantly the subtle (and sometimes not so subtle) biases that these models have and can represent.

Aug

2021

Minimum

(Senior Frontend Developer)

As employee number one I created the frontend from scratch working with stakeholders to quickly iterate on the product whilst maintaining a solid technical foundation.

  • I was in charge of the architecture and implementation for all front end projects.
  • Onboarded and mentored new developers
  • Created a design system and component library to easily integrate with the design team
  • Created am editor to allow the rest of the team to quickly and easily iterate on our bespoke schema system

Jun

2021

3D Now

(A website and tools to facilitate on-demand 3D printing)

When a friend bought his first 3D printer, it sparked his ambition to turn it into a business. He wanted to share the wonder of rapid prototyping with people who didn't have the space, money, or inclination to buy their own printer. When he asked me if I would be interested in helping him build a website to facilitate this, I jumped at the chance, because I had a laundry list of things I wanted to print myself but no means to do it.

We used React and Firebase to create a production app allowing people to upload and view their 3D models, select options, and order prints. Stripe integration facilitated purchases and hooked in with a bespoke backend to help manage orders and print queues. The website was a success, seeing many return customers, and the app facilitated many orders until the business was sadly shuttered for personal reasons.

This project helped me step back and understand the multifaceted benefits of software. The web app had completely different criteria and use cases than the backend tools, but both had to seamlessly work together to support the process from start to finish.

Analytics, hosting, and testing were key areas to get right in a production system to allow us to iterate quickly and safely. I'm proud to say the system supported all its transactions with no major outages or issues. I attribute this to the robustness of the tools we used and the care we took in testing the system in a specific non-production environment.

This is a product I used myself many times and still have the chopping board holder, plant pots, and frog models to prove it.

Mar

2021

Goodlord

(Senior Frontend Developer)

I worked at Goodlord for 6 months as a senior frontend developer. Although I learned a lot from my experience, I ultimately realized it wasn't the right fit for me. Capable of the work, I didn’t feel either party was getting the most out of the relationship.

My responsibilities included:

  • Updating legacy jQuery code to modern standards.
  • Incident triage and support.
  • Maintaining and improving the build process.
  • Building out the self-verification process, including integrating Onfido to identify users.

This was my first official role as a senior developer, and it is where I realized how much I enjoyed mentoring and helping others. During my employment, I focused on building genuine rapport with junior developers, helping to build their confidence, providing pragmatic advice and support, as well as advocating on their behalf in senior meetings.

May

2019

Inflo AI

(Frontend Developer)

Responsible for upkeep and implementation of new features for the webapp from ideation to implementation.

  • Introduced and implemented React hooks across the product.
  • set up Cypress.JS as part of Gitlab pipeline to run automated E2E tests