This issue bothered me for a while and I did not like any of the solutions I found on the web and then the light turned on in my head!

React now offers us React Hooks, The 7th World Wonder of modern web development. How does this solve our problem?

We can write a custom hook that will trigger every time we render one of our pages. Assuming you already have your React app running go ahead and create a folder for your custom hook and a file called useRedirectToHttps.js

Inside of useRedirectToHttps.js we will create a hook called useRedirectToHttps and invoke a useEffect() on every render. The useEffect’s job is pretty simple, get the current URL, checks if it’s HTTPS and redirects to the page with the…

People buy brands almost more so than they do the products. Have I just told you anything revolutionary? Nope, not at all, you just saw that Tesla is selling a bottle of tequila in a very cool looking bottle. A regular bottle of Patron costs $50 a more premium one $90, this one is $250. That’s respectively, 500% and 280% more!

What do people buy more than brands? Cool packaging, or should I say, uber-cool packaging that invokes a certain feeling. A black cab arriving to pick you up (Uber) — feeling like that CEO aren’t you, a metal credit card (Chase) — feeling like that CEO again aren’t you, a lightning bolt bottle of tequila — feeling super-futuristic aren’t you… This last example gets even better if we think about whom do they buy the tequila from? …

While working an app that helps doctors gather answers to surveys via voice input I ran into a challenge of implementing a countdown timer that will allow patients a minute-long response and then stop recording.

A working example can be found in react docs where they explain how to best handle situations where your dependencies change a lot. As it is the case with the timer, every second your time will change, and you do not absolutely want to rerender every single time, so how does the custom hook look like? Well, let's name it as react docs suggest, useTimer:

import React, {useEffect, useState} from "react";

export function useTimer(start) {
    // set initial state to be 59s
    const [count, setCount] = useState(59);

    useEffect(() => {
        // given that we passed in the variable when the timer      should start we use it here
        if (start) {
            const secondsLeft = setInterval(() => {
                setCount(c => c - 1);
            }, 1000);
            return () => clearInterval(secondsLeft);
        }
        // we keep track when to rerender the hook, aka when the start is changed to true
    }, [start]);

    return count…

You’ve built your app and now all you need to do is let the world see your masterpiece! Well, if you want that green keypad while hosting your app on Heroku you’ll have to pay up 7$/mo for the hobby dyno.

Once you’ve done that, you can go ahead to porkbun.com and purchase a domain (I found them to be the cheapest and easiest to work with — they will also generate a free SSL for you!)

So when you’ve bought the domain you’ll see something like this on your dashboard:

Some common mistakes I’ve made and somewhat cryptic errors that came along the way 😁

Let’s start by initiating a node.js app

npm init

Then we want to install express for the server, and multer for managing the uploads, body-parser to manipulate request.body, cors to manage the requests that come to the server and dotenv so that we can hide our precious keys and other in environment variables

yarn add express multer body-parser cors dotenv

On the client (React/Vue/Plain JS), you will set up FormData() and append multiple files to it as such:

let img1 = yourFile1
let img2 =…

Yet another how-to that, hopefully, will cut some dev time to others and my future self 😊

Assumptions:

1. You know how to set up a node.js express server (if you don’t here is a tutorial)
2. You know how to set up google bucket (google docs)

I’ve previously written about how to send files from your client using FormData to the server and you can find it here. Since the focus of this article is to show how to upload to google via express server we’ll start with adding multer npm package to our project

yarn add multer (alternatively npm i multer…