Categories
Heroku Node PostgreSQL React

How to Deploy a Full Stack (PERN) App to Heroku

After creating the Full Stack To Do app recently, I wanted to deploy it and ended up going with GitHub Pages for the front-end and Heroku for the back-end. It was straightforward enough, but the idea of hosting part of the app in one place and the other part in another felt a bit odd so I set off on a mission to get both parts of a simplified PERN stack app hosted in the same place (Heroku).

To say it was painful would be an understatement, but with some perseverance and soooo many browser tabs of Stack Overflow, I managed to do it. And because of the pain, I thought I best make a record of exactly how I made it happen and sharing it on here may help others, like you!

Continue reading “How to Deploy a Full Stack (PERN) App to Heroku”
Categories
Heroku JavaScript Material UI Node PostgreSQL Project React TypeScript

Project Summary: Full Stack To Do App

This project gave me an absolute tonne of learning opportunities and experience – from refactoring existing code to using new technologies – all packed within less than two days. I really enjoyed it!

Check out the demo here (and the code here).

Continue reading “Project Summary: Full Stack To Do App”
Categories
JavaScript React

How to Get a User’s Location with the Navigator API

Getting a user’s location enables you to do things like show it on a map, provide information about the location, serve up personalised content, and more.

Getting that initial geolocation data is probably easier than you think.

Continue reading “How to Get a User’s Location with the Navigator API”
Categories
Coding Study Notes

Monthly Review of Coding Study – May 2022

Continue reading “Monthly Review of Coding Study – May 2022”
Categories
CSS JavaScript Netlify Project React Scraping Serverless

Project Summary: NHS Dentist Finder

Being able to build digital products is such an enabler.

This project was a great example of experiencing a problem or difficulty and, having enough knowledge to understand how a solution could work, being able to just go ahead and build it and fill in any gaps by learning along the way.

Check out the demo here (and the code here).

Continue reading “Project Summary: NHS Dentist Finder”
Categories
CSS JavaScript Project

Project Summary: Turning a Dribbble Design into Code

As a front-end engineer, you’re often taking a design and turning into code. You’re essentially taking a concept and turning it into reality.

I thought I’d give this some practice!

Check out the demo here (and the code here).

Continue reading “Project Summary: Turning a Dribbble Design into Code”
Categories
React

Understanding the React Context API & useContext Hook

Passing data (i.e. props) between components has always been one of those things with React that’s just a little… annoying.

Once again, though, the React team have provided an alternative approach that makes this a breeze. That solution is Context.

Continue reading “Understanding the React Context API & useContext Hook”
Categories
Project React

Project Summary: Random Country Fact Generator

As part of the React course I’ve been taking on Udemy, it introduced me to the REST Countries API (and how to access APIs with fetch, etc). Since finding out how easy it is to get data from an API like that, I knew I needed to create a project with it for some unguided learning.

I’ve got a few ideas for apps that will use the API, but I thought I’m best starting with the smallest, most straightforward one first.

Check it out here (and the code here).

Continue reading “Project Summary: Random Country Fact Generator”
Categories
Project React

Project Summary: URL Deconstructor

In my day job there’s been a number of times where I’ve been working on an analytics tracking issue and I’m either looking to understand the general structure of a given URL or I’m searching through 1,000+ characters of tokens and UTMs and redirect paths looking for a specific string of text.

I’ll be honest, I’ve sat there and manually split the URL out into all of its component pieces in order to make sense of the query string keys and values. It was painful. Really painful.

So, what do you do when you feel that sort of pain? That pain of knowing there must be an easier way…

Well, you solve the problem with code!

Continue reading “Project Summary: URL Deconstructor”
Categories
React

A Quick Intro to useReducer() (with an Example)

useState is a nice and simple hook for managing state in functional components (as opposed to setState in class components). But as the complexities of your application grow, you’ll find yourself needing something a little more powerful.

Say “hello” to useReducer!

Continue reading “A Quick Intro to useReducer() (with an Example)”