DEV Community: Nathaniel Arfin

Building a React/Express Stripe Donation Form

Nathaniel Arfin — Sun, 30 Jul 2023 02:26:37 +0000

Building a React/Express Stripe Checkout Form

Payments are scary. Really, really, really scary. Thankfully, for developers who are looking to get started with payments, and are incredibly afraid (again, I don’t blame you, payments are scary), Stripe has their low-code Checkouts tool. It’s an awesome way to get started.

But what if you’re ready for the next challenge? What if you want to take the leap into payments, and you want to dive right in! Well, you’ve come to the right place. We’re going to learn payments!

In this walkthrough, I will be working through the set up of a React app for the front-end, an Express server for the backend, we’ll containerize our server with express, and we can serve up the React assets directly wherever we need!

Getting started.

Now I don’t have anything in particular to sell. I haven’t been actively seeking donations, and I’m not about to start, but I feel like it’s more natural to make a donation for than a sales one, so that’s the direction I’m going.

Head over to Stripe.com, and either create or sign in to your account. Head over to the Developers section and turn on Test Mode. Navigate to the API keys tab, and copy your Publishable and Secret keys.

Now open up your favourite IDE, create a directory, and throw in an npm init -y. We’re going to start out by creating our express server. Let’s get our dependancies installed. npm i stripe express cors dotenv nodemon will get us everything we need! Now give it a touch index.js.

Now, navigate into your package.json and update the start command. I also prefer ES modules, so I’m going to update my package.json like so:

{
  "name": "donations",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
        "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "nodemon": "^3.0.1",
    "stripe": "^12.16.0",
  }
}

We can now use npm run dev to start the server using nodemon, which enables hot refreshing on changes.

Next, create a .env file, and paste in the Stripe publishable key and secret key, like this:

# .env

STRIPE_PUBLIC_KEY=pk_test_xxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxx

Setting up our Express server

For the most part, this is a very basic express server, not at all dissimlar from the one I outlined in my FERN series. We’ll start by importing our dependancies, and setting up the basics:

// index.js

import Stripe from 'stripe';
import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';

dotenv.config();

const port = process.env.PORT || 3000;
const app = express();
app.use(cors());
app.use(json());

app.use((error, req, res, next) => {
    res.status(500).json({ error: error.message });
});

app.listen(port, () => {
    console.log(\`Server is running on port ${port}\`);
});

Here, we’ve create a very straightforward express server. Right now you can fire it up, and it will start on port 3000, or whatever you’ve specified in your .env file. Right now, it will not serve up any response, but we’ll get to that.

Set up Stripe

Let’s get started with our Stripe instance! Since we have the secret key in our .env file, and our dependancies installed, all we have to do is create the instance.

// index.js

import Stripe from 'stripe';
import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';

dotenv.config();

const port = process.env.PORT || 3003;
const app = express();
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

app.use(cors());
app.use(json());

app.use((error, req, res, next) => {
    res.status(500).json({ error: error.message });
});

app.listen(port, () => {
    console.log(\`Server is running on port ${port}\`);
});

Congrats! You have Stripe set up on your express server! Now let’s create something that will interact with it.

Set up the Front End

My preferred React stack is Vite (it’s french for fast), MUI (with icons), React Query, and React Router. I’m also a heathen who refuses to learn Typescript. In this case, because it’s an incredibly simple plug-in, we won’t be using a router.

To get started, we can throw in npm create vite@latest client --template-react, answer any questions it may have, and then cd client. Now we’ve created a boilerplate Vite/React app. Let’s strip out all of the defaults:

/* App.css */

#root{
  margin: 0;
}

// App.jsx

import './App.css'

function App() {

  return (
    <>
    </>
  )
}

export default App

Great! You can also dispose of anything in index.css and replace it with any global font imports you would like. I’m using Roboto:

/* index.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');;
  font-weight: normal;
  font-style: normal;
}

Next, install the dependancies we need:

    npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react-query @stripe/react-stripe-js @stripe/stripe-js

We’re going to be sending our requests through to our localhost backend, so we need to set up our proxy in ‘vite.config.js’, make sure to set up the correct port:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy:{
      '/api': {
        target: "http://localhost:PORT",
        changeOrigin: true,
      }
    }
  },
  plugins: [react()],
})

Now, we’re going to make use of the Stripe Payment Element for our form. This element leans heavily on the Payment Intents API. When you create a Payment Intent, you’re generating an authenticated session for each client session. And while there are many parameters available when you create a payment intent, we’re only going to focus on those which are required - an amount, a currency, and some **kind of payment* -* I’ll cricle back to this.

Now that we have the basics set up, we can get started in actually building our form! Throw in an npm run dev and your browser should open to an empty screen. Which is perfect.

We’re going to start by creating our contexts - our MUI theme, and a Query Provider for our Queries.

We’ll start with our theme:

// themes/theme.js

const theme = createTheme({
    palette: {
      primary: { main: '#bc232a', },
      secondary: { main: '#c9dde9' },
    },
    typography:{
        fontFamily: [
            'Roboto',
            '-apple-system',
            'sans-serif',
            '"Apple Color Emoji"',
            '"Segoe UI Emoji"',
            '"Segoe UI Symbol"',
          ].join(','),
    }
  });

  export default theme;

Here, we’re defining our basic colour scheme, our typography, and can centrally control the appearance of our MUI components.

And then our Query Provider:

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

export const QueryProvider = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);

This creates a central cache for any queries we make, making it easy to retrieve and update information. Now we’ll implement these!

// App.jsx

import './App.css'
import { ThemeProvider } from '@mui/material/styles';
import theme from './themes/theme';
import { QueryProvider } from './QueryProvider';

function App() {

  return (
    <ThemeProvider theme={theme}>
      <QueryProvider>

      </QueryProvider>
    </ThemeProvider>
  );
}

export default App

And there you have it! We have a theme, we have our Query Provider, now we just need something to put in it!

Creating a Form

I mentioned before, the 3 things we need in order to create a Payment Intent are an amount, a currency and a payment method. Since we’re doing a donation form, I’m going to focus on the amount. Let’s build a basic form!

Create DonationForm.jsx, and we’ll get started with a very basic component:

// DonationForm.jsx

import { Card, CardContent, Typography } from "@mui/material";

export default function DonationForm() {
    return (
    <Card>
        <CardContent>
            <Typography>
                Buy me a Coffee?
            </Typography>
        </CardContent>
    </Card>)
}

Import that in to your App.jsx:

// App.jsx

import './App.css'
import { ThemeProvider } from '@mui/material/styles';
import theme from './themes/theme';
import { QueryProvider } from './QueryProvider';
import DonationForm from './DonationForm';

function App() {

  return (
    <ThemeProvider theme={theme}>
      <QueryProvider>
        <DonationForm/>
      </QueryProvider>
    </ThemeProvider>
  );
}

export default App

And you’ll see a beautiful screen:

Awesome. Now let’s collect an amount.

// DonationForm.jsx

import { Card, CardContent, Typography, Grid, InputAdornment, OutlinedInput } from "@mui/material";

export default function DonationForm() {
    return (
        <Card>
            <CardContent>
                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <Typography>
                            Buy me a Coffee?
                        </Typography>
                    </Grid>
                    <Grid item xs={6}>
                        <OutlinedInput
                            type="text"
                            placeholder="10"
                            startAdornment={<InputAdornment position="start">$</InputAdornment>}
                        />
                    </Grid>
                </Grid>
            </CardContent>
        </Card>)
}

Here, I’ve put in an input field, I’ve set up in Input Adronment to prefix it with a “$”, and I’ve set a placeholder amount of $10. Looking good!

Now, we actually need to handle that amount, and do something about it when it’s changed, and we’ll throw a submit button in ther for good measure.

// DonationForm.jsx

import { Card, CardContent, Typography, Grid, InputAdornment, OutlinedInput, Button } from "@mui/material";
import { useState } from "react";

export default function DonationForm() {
    const [amount, setAmount] = useState(10);

    const handleChange = (e) => {
        setAmount(e.target.value);
    }

    return (
        <Card>
            <CardContent>
                <Grid container spacing={2} justifyContent={"center"}>
                    <Grid item xs={12}>
                        <Typography>
                            Buy me a Coffee?
                        </Typography>
                    </Grid>
                    <Grid item xs={6}>
                        <Grid container spacing={2}>
                            <Grid item xs={12}>
                                <OutlinedInput
                                    type="text"
                                    value={amount}
                                    onChange={handleChange}
                                    startAdornment={<InputAdornment position="start">$</InputAdornment>}
                                    fullWidth
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <Button fullWidth variant="contained" type="submit">
                                    Donate
                                </Button>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>)
}

Awesome! That looks great. Now we need to handle this form. We’re going to use the useMutation hook from Tanstack Query to make our request. First, make ‘functions/createPaymentIntent.js’, which will house the fetch function:

// createPaymentIntent.js

export const createPaymentIntent = async (amount) => {
    const response = await fetch('/api/create-payment-intent', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: amount,
      }),
    });

    if (!response.ok) {
      throw new Error('Failed to fetch payment intent client secret');
    }
    const data = await response.json();
    return data.paymentIntent;
  };

Then we’ll define a custom mutation hook in ‘hooks/useCreatePaymentIntent’:

//useCreatePaymentIntent.js 

import { useMutation } from 'react-query';
import {createPaymentIntent} from '../api/createPaymentIntent';

export const useCreatePaymentIntent = () => {
  const mutation = useMutation(createPaymentIntent);
  return mutation;
};

And then we’ll define how to use it!

// DonationForm.jsx

import { Card, CardContent, Typography, Grid, InputAdornment, OutlinedInput, Button, CircularProgress } from "@mui/material";
import { useState } from "react";
import { useCreatePaymentIntent } from "../hooks/useCreatePaymentIntent";

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();
    const handleChange = (e) => {
        setAmount(e.target.value);
    }
    const handleSubmit = () => (mutate(amount));

    return (
        <Card>
            <CardContent>
                <Grid container spacing={2} justifyContent={"center"}>
                    <Grid item xs={12}>
                        <Typography>
                            Buy me a Coffee?
                        </Typography>
                    </Grid>
                    <Grid item xs={6}>
                        <Grid container spacing={2}>
                            <Grid item xs={12}>
                                <OutlinedInput
                                    type="text"
                                    value={amount}
                                    onChange={handleChange}
                                    startAdornment={<InputAdornment position="start">$</InputAdornment>}
                                    fullWidth
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <Button fullWidth variant="contained" type="submit" onClick={handleSubmit} disabled={isLoading}>
                                    {isLoading ? <CircularProgress/> : 'Donate'}
                                </Button>
                                {error && <Typography variant="alert">Something went wrong</Typography>}
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>)
}

Here, we’ve set up the mutation implementation. We’re calling it on submit and passing the amount into the function, we’re disabling the button and showing circular progress when it’s loading, and we’re displaying an error message when something goes wrong.

Now it’s time to hop back to our Express server.

Setting up our routes.

Let’s get started creating our first route. As we defined in our mutation, we’re targeting /api/create-payment-intent. Here, we’re going to handle the donation amount, and use it to generate a Payment Intent with Stripe.

Let’s define our route! First, create a ‘routes/stripe.js’ file:

// stripe.js

import express from 'express';

export default function createStripeRoutes(stripe) {
    const router = express.Router();

    router.post('/api/create-payment-intent', async (req, res) => {

    })
    return router;
}

Here, we’re defining our route, and we’re going to pass in the stripe client. We’ll define it’s use in index.js:

// index.js

import Stripe from 'stripe';
import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import createStripeRoutes from './routes/stripe.js';

dotenv.config();

const port = process.env.PORT || 3003;
const app = express();
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
const stripeRoutes = createStripeRoutes(stripe);

app.use(cors());
app.use(json());
app.use(stripeRoutes);

app.use((error, req, res, next) => {
    res.status(500).json({ error: error.message });
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

Here, we’re importing our new createStripeRoutes factory, passing in our dependancy, and then defining it’s use. Now, we have to define our payment intent logic!

Update our route as follows:

// stripe.js

import express from 'express';

export default function createStripeRoutes(stripe) {
    const router = express.Router();

    router.post('/api/create-payment-intent', async (req, res) => {
        const { amount } = req.body;
        try {
            const paymentIntent = await stripe.paymentIntents.create({
                amount: amount * 100,
                currency: 'cad',
                automatic_payment_methods: { enabled: true },
            });
            res.send({
                paymentIntent
            });
        } catch (error) {
            console.log(error);
            res.status(500).json({ error: error.message });
        }
    })
    return router;
}

I’ve mentioned now a couple of times, to generate a payment intent, we need an amount - we’re passing this in through our mutation, above you’ll notice it’s multipled by 100, that’s because it comes in in cents (hundreths of a dollar); a currency - I’m Canadian, I’m going to use CAD, and a kind of payment.

What I mean by that is you can either specify payment_method_types which includes forms of payment like “card”, “affirm”, “cashapp”, or basically any other form of payment method. The alternative is to use automatic_payment_methods:{enable:true} . This method detects the payment method at capture, so that you don’t have to specify. You can also define what payment methods you accept on the front end.

Let’s pop back there.

Tidying up & Integrating with Stripe

Now, if you press that “Donate” button, and check your Network Tab, you should see that “create-payment-intent” function, and a nice big paymentIntent response. Now it’s time to do something with it. Before we get too much further, let’s tidy up our ‘DonationForm.jsx’.

Once we have our payment intent, we no longer need any of the current card content. Let’s create ‘DonationInput.jsx’:

import { CardContent, Grid, Typography, OutlinedInput, InputAdornment, Button, CircularProgress } from "@mui/material";

const DonationInput = ({ amount, handleChange, handleSubmit, isLoading, error }) => (
    <CardContent>
        <Grid container spacing={2} justifyContent={"center"}>
            <Grid item xs={12}>
                <Typography>
                    Buy me a Coffee?
                </Typography>
            </Grid>
            <Grid item xs={6}>
                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <OutlinedInput
                            type="text"
                            value={amount}
                            onChange={handleChange}
                            startAdornment={<InputAdornment position="start">$</InputAdornment>}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={12}>
                        <Button fullWidth variant="contained" type="submit" onClick={handleSubmit} disabled={isLoading}>
                            {isLoading ? <CircularProgress /> : 'Donate'}
                        </Button>
                        {error && <Typography variant="alert">Something went wrong</Typography>}
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    </CardContent>);
export default DonationInput;

Head back to our ‘DonationForm.jsx’ and import our new component and pass our variables!

// DonationForm.jsx

import { Card } from "@mui/material";
import { useState } from "react";
import { useCreatePaymentIntent } from "../hooks/useCreatePaymentIntent";
import DonationInput from "./DonationInput";

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();
    const handleChange = (e) => {
        setAmount(e.target.value);
    }
    const handleSubmit = () => (mutate(amount));

    return (
        <Card>
            <DonationInput amount={amount} handleChange={handleChange} handleSubmit={handleSubmit} isLoading={isLoading} data={data} error={error}/>
        </Card>)
};

Now, let’s update this to store the paymentIntent in a state. Because we’re pulling the data in through a hook, we’ll use another to listen for the update:

// DonationForm.jsx

import { Card } from "@mui/material";
import { useEffect, useState } from "react";
import { useCreatePaymentIntent } from "../hooks/useCreatePaymentIntent";
import DonationInput from "./DonationInput";

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const [paymentIntent, setPaymentIntent] = useState(null);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();
    const handleChange = (e) => {
        setAmount(e.target.value);
    }
    const handleSubmit = () => (mutate(amount));

    useEffect(() => {
        if (data) setPaymentIntent(data);
    }, [data]);

    return (
        <Card>
            <DonationInput amount={amount} handleChange={handleChange} handleSubmit={handleSubmit} isLoading={isLoading} data={data} error={error}/>
        </Card>)
}

Here, we’re listening for updates to data. If data exists, it will update the paymentIntent accordingly.

Now, let’s do something with that paymentIntent. Remember, I said if we have a paymentIntent, we no longer need the DonationInput. But we don’t want it do just have it instantly disappear. We’re going to use MUI’s Fade transition to help us unmount the component and have it transition away.

// DonationForm.jsx

import { Card, Fade, Container } from "@mui/material";
import { useEffect, useState } from "react";
import { useCreatePaymentIntent } from "../hooks/useCreatePaymentIntent";
import DonationInput from "./DonationInput";

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const [paymentIntent, setPaymentIntent] = useState(null);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();
    const handleChange = (e) => {
        setAmount(e.target.value);
    }
    const handleSubmit = () => (mutate(amount));

    useEffect(() => {
        if (data) setPaymentIntent(data);
    }, [data]);

    return (
        <Card>
            <Fade in={!paymentIntent} unmountOnExit>
                <Container>
                    <DonationInput amount={amount} handleChange={handleChange} handleSubmit={handleSubmit} isLoading={isLoading} data={data} error={error} />
                </Container>
            </Fade>
        </Card>)
}

Great! Now when you click Donate, the input fades away, making room for what’s to come next.

Building the Stripe Form

Let’s create a new component called “StripeForm.jsx”. Before we get any further, you’ll need to create a “client/.env” file. Vite has a very cool feature which enables imported environment variables to be statically replaced at build, so you can set your .env as follows:

VITE_STRIPE_PUBLIC_KEY=pk_test_xxxxx

Now, we’re going to use that Public key to create a session for our checkout:

//StripeForm.jsx

import { CardContent } from "@mui/material";
import { Elements, PaymentElement, } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);

const StripeForm = ({ paymentIntent }) => {
    return (
        <CardContent>
            <Elements stripe={stripePromise} options={{ clientSecret: paymentIntent.client_secret }}>
                <PaymentElement options={{ mode: 'payment' }} />
            </Elements>
        </CardContent>
    )
}
export default StripeForm

Here, we’re taking the Elements component from Stripe, passing into it the client session we’ve created with the Public key, we’re also passing in the unique secret from the paymentIntent. Next, we’re creating our PaymentElement, and specifying that it’s a payment.

With that set up, your app should be looking something like this:

Amazing! We now have a spot for people to enter their details and make their donations.

Now let’s style it a bit, and add some Buttons. I’m going to put the amount on the button:

// StripeForm.jsx 

import { Button, CardActionArea, CardActions, CardContent, Typography } from "@mui/material";
import { Elements, PaymentElement, } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);

const StripeForm = ({ paymentIntent }) => {
    return (
        <CardContent>
            <Typography variant="h6" pb={3} color='primary'>Thanks for your support!</Typography>
            <Elements stripe={stripePromise} options={{ clientSecret: paymentIntent.client_secret }}>
                <PaymentElement options={{ mode: 'payment' }} />
            </Elements>
                <CardActions sx={{mt:3, display:'flex', justifyContent:'space-between'}}>
                    <Button variant="outlined">Cancel</Button>
                    <Button variant="contained">Donate ${paymentIntent.amount / 100}</Button>
                </CardActions>
        </CardContent>
    )
}
export default StripeForm

And now you’ll have something that looks like this:

Let’s create some logic for those buttons! First, let’s handle the cancel logic.

Easy enough, we just need to clear the paymentIntent:

// DonationForm.jsx

//...Other Code

const handleClear = () => {
        setPaymentIntent(null);
 }

//...Other Code

<Fade in={paymentIntent} unmountOnExit>
    <Container>
      <StripeForm paymentIntent={paymentIntent} handleCancel={handleClear} />
  </Container>
</Fade>

//...More code

Simple enough. Now, on to our payment logic! We’re going to use a custom mutation, just like we did with the payment intent. We’re going to pass in the required variables to confirm a payment, the elements, our stripe client, and the secret from our payment intent.

First, create a new file called ‘functions/capturePayment.js’

const capturePayment = async (elements, stripe, clientSecret) => {
    if (!stripe) {
        throw new Error("Stripe hasn't yet loaded.");
    }
    const { error: submitError } = await elements.submit();
    if (submitError) {
        throw submitError;
    }

    const { error } = await stripe.confirmPayment({
        elements,
        clientSecret,
        redirect: "if_required",
    });

    if (error) {
        throw error;
    }
    else return {status: "success"};
};
export default capturePayment;

And then a new hook ‘hooks/useCapturePayment.js’ to use our function in a mutation:

import { useMutation } from 'react-query';
import capturePayment from '../functions/capturePayment';

export const useSubmitPayment = (elements, stripe, amount) => {
  const mutation = useMutation(() => capturePayment(elements, stripe, amount));
  return mutation;
};

Now, we’ll add the logic into our Stripe form component! It’s going to end up looking very similar to our Donation form.

import { Button, CardActions, CardContent, CircularProgress, Typography } from "@mui/material";
import { PaymentElement, } from "@stripe/react-stripe-js";
import { useSubmitPayment } from "../hooks/useCapturePayment";
import { useElements, useStripe } from "@stripe/react-stripe-js";
import { useState, useEffect } from "react";

const StripeForm = ({ paymentIntent, handleClear, }) => {
    const [confirmData, updateConfirmData] = useState(null);

    const stripe = useStripe();
    const elements = useElements();

    const { mutate, isLoading, data, error } = useSubmitPayment(elements, stripe, paymentIntent.client_secret);

    const handleSubmit = async (e) => {
        elements.submit();
        e.preventDefault();
        mutate();
    };

    useEffect(() => {
        if (data) updateConfirmData(data);
    }, [data]);

    return (
    <CardContent>
        <Typography variant="h6" pb={3} color='primary'>Thanks for your support!</Typography>
        <PaymentElement/>
        <CardActions sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
            <Button variant="outlined" onClick={handleClear}>Cancel</Button>
            <Button variant="contained" onClick={handleSubmit} disabled={isLoading}>{isLoading ? <CircularProgress/> :`Donate ${paymentIntent.amount / 100}`}</Button>
        </CardActions>
    </CardContent>
)
}
export default StripeForm

Here, we’ve imported the useStripe and useElements hooks, which we then pass into our custom hook. We’re disabling the button while it’s loading, and we’re using useEffect to listen for data.

We now have a working test form! It can accept payments as is. You can test it with the Test Cards that Stripe has available.

Now, we’re going to want to set up some confirmation logic. Let’s lift up the data to our ‘DonationForm’.

First, we’ll add “confirmPayment” to our StripeForm, and update our useEffect:

const StripeForm = ({ paymentIntent, handleClear, confirmPayment}) => {
//...

useEffect(() => {
        if (data) confirmPayment(data);
    }, [data]);

//...
}

Then, we’ll navigate up to the parent “DonationForm”, and add our handler and state:

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const [paymentIntent, setPaymentIntent] = useState(null);
    const [confirmedPayment, setConfirmedPayment] = useState(null);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();

    const handleSubmit = () => (mutate(amount));

    const handleClear = () => {
        setPaymentIntent(null);
    }
    const handleChange = (e) => {
        setAmount(e.target.value);
    }

    const confirmPayment = (payment) => {
        setConfirmedPayment(payment);
                handleClear();
    }

    useEffect(() => {
        if (data) setPaymentIntent(data);
    }, [data]);

//...
}

We’re also going to have to adjust our StripeForm to ensure our hook doesn’t throw an error if the payment intent is cleared. Since we need the client_secret and amount, that’s all we’ll pass in!

const StripeForm = ({ client_secret, amount, handleClear, handleConfirmPayment}) => {

    const stripe = useStripe();
    const elements = useElements();

    const { mutate, isLoading, data, error } = useSubmitPayment(elements, stripe, client_secret);

    const handleSubmit = async (e) => {
        elements.submit();
        e.preventDefault();
        mutate();
    };

    useEffect(() => {
        if (data) handleConfirmPayment(data);
    }, [data]);
        return (
        <CardContent>
        <Typography variant="h6" pb={3} color='primary'>Thanks for your support!</Typography>
        <PaymentElement/>
        <CardActions sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
            <Button variant="outlined" onClick={handleClear}>Cancel</Button>
            <Button variant="contained" onClick={handleSubmit} disabled={isLoading}>{isLoading ? <CircularProgress/> :`Donate $${amount / 100}`}</Button>
        </CardActions>
        </CardContent>
        )
}
export default StripeForm

And then update it in the DonationForm:

// DonationForm.jsx

<Fade in={!!paymentIntent} unmountOnExit>
    <Container>
        <Elements stripe={stripePromise} options={{clientSecret:paymentIntent?.client_secret}}>
            <StripeForm client_secret={paymentIntent?.client_secret} amount={paymentIntent?.amount} handleClear={handleClear} handleConfirmPayment={handleConfirmPayment}/>
        </Elements>
    </Container>
</Fade>

Now, let’s build out a thank you message, display it, then clear our confirmed payment after 5 seconds:

// DonationForm.jsx

import { Card, Fade, Container, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { useCreatePaymentIntent } from "../hooks/useCreatePaymentIntent";
import { Elements, } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import DonationInput from "./DonationInput";
import StripeForm from "./StripeForm";

const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);

export default function DonationForm() {
    const [amount, setAmount] = useState(10);
    const [paymentIntent, setPaymentIntent] = useState(null);
    const [confirmedPayment, setConfirmedPayment] = useState(null);
    const { mutate, isLoading, data, error } = useCreatePaymentIntent();

    const handleSubmit = () => (mutate(amount));

    const handleClear = () => {
        setPaymentIntent(null);
    }
    const handleChange = (e) => {
        setAmount(e.target.value);
    }

    const handleConfirmPayment = async (payment) => {
        setConfirmedPayment(payment);
        handleClear();
        await setTimeout(() => {
            setConfirmedPayment(null);
        }, 5000);
    }

    useEffect(() => {
        if (data) setPaymentIntent(data);
    }, [data]);

    return (
        <Card>
            <Fade in={!paymentIntent && !confirmedPayment} unmountOnExit>
                <Container>
                    <DonationInput amount={amount} handleChange={handleChange} handleSubmit={handleSubmit} isLoading={isLoading} data={data} error={error} />
                </Container>
            </Fade>
            <Fade in={!!paymentIntent && !confirmedPayment} unmountOnExit>
                <Container>
                    <Elements stripe={stripePromise} options={{ clientSecret: paymentIntent?.client_secret }}>
                        <StripeForm client_secret={paymentIntent?.client_secret} amount={paymentIntent?.amount} handleClear={handleClear} handleConfirmPayment={handleConfirmPayment} />
                    </Elements>
                </Container>
            </Fade>
            <Fade in={!!confirmedPayment} unmountOnExit>
                <Typography p={4} variant="h6" textAlign={'center'}>Your generosity goes a long way!</Typography>
            </Fade>
        </Card>
    )
}

We’ve set it up so that the thank you message displays for 5 seconds, then it resets and goes back to the original page!

Wow that is a tiny GIF! But look at our payment form go! Now, let’s get on to our next step.

Hosting the thing.

We have some choices here. We could treat this as it’s own web app, and let it do it’s thing. If we wanted to put it on a website, we could throw it in an iframe and display it that way. But that’s pretty limiting, as Wallets like Apple Pay and Google Pay aren’t available in iframes, and theyre not reactive, meaning when the form changes size, the frame size wont change accordingly.

Instead, we’re going to serve it as a microfrontend. Since this form has nothing to do with any of the rest of my website, I don’t need to share any state with it ever, I can just slap it into a div and let it do it’s thing!

To do this, we’re going to need to first host our server. We’re going to build a container with Docker, and host it on Google Cloud. If you need an intro on setting up Google Cloud for hosting a container, check out the finale for my FERN series.

We’re going to follow the same basic steps to make our container. In the root of the app, make a new ‘Dockerfile’.

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG PORT=3000
EXPOSE $PORT
ENV PORT=$PORT
CMD npm start

Here, we define the working directory as /app, and copy the package.jsonand package-lock.json files from the root into the /app directory. Next, we run npm install to ensure the necessary dependancies are installed, we copy our files in, accept a port and start up the app.

Next, build the container with docker build -t gcr.io/yourprojectname/yourappname . ( or docker buildx build --platform linux/amd64 -t [gcr.io/yourprojectname/yourappname] if you’re on an M1 Mac), and then push it to Google with docker push gcr.io/yourprojectname/yourappname.

Head to cloud run, and create a service for it:

Select your container, and provide your service with a name. Next, select a region, and allow all traffic:

Below, you’re able to set your PORT, Arguments, runtime variables, and configure secrets. Here, you can input your Stripe Secret Key. Since we’re only testing, I’m ok passing it in as an environment variable.

If you plan to deploy your app to production, I highly recommend using the Secrets Manager API to protect your sensitive keys.

Once we’re happy with your settings, deploy your container, and you have yourself an express server!

Grab your new server’s URL, and lets head back into our React app!

Prepping the Front End

First, we’re going to want to head into our ‘main.jsx’ file, and update the target root. Because we’re putting this into an existing React website, this thing will need it’s own target.

//main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('stripeRoot')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Next, we need to update our ‘createPaymentIntent.js’ file with our updated URL.

// createPaymentIntent.js

const createPaymentIntent = async (amount) => {
    const response = await fetch('https://yourserviceurl.run.app/api/create-payment-intent', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: amount,
      }),
    });

    if (!response.ok) {
      throw new Error('Failed to fetch payment intent client secret');
    }
    const data = await response.json();
    return data.paymentIntent;
  };
  export {createPaymentIntent};

Once that’s done, it’s ready to be built! Throw npm run build into terminal from our client directory, which will build our the react app into a ‘dist’ folder.

Now, we’ll head over to Google Cloud Storage, and create a new bucket. Ensure that you have Public Access preventions turned OFF.

Next, we’ll upload the contents of our ‘dist/assests’ folder that we created with our build.

Edit the access on both of these files to enable a public user:

Go back in to your bucket after saving, and you should see both files as “Public to internet”. Copy the Public URL to both your .js and .css files.

Next, head to the website where you want to install your donation form! I set up a page just for it on my website:

//Donate.jsx
import { Typography, Grid, Box } from "@mui/material";
const Donate = () => {
    return (
        <Grid container p={4}>
            <Grid item xs={12}>
                <Typography variant="h1">Donate!</Typography>
            </Grid>
            <Grid item xs={6} p={4} alignItems={'center'} display={'flex'} flexDirection={'column'} position={'relative'}>
                <Box height={'400px'}></Box>
                <Box width={'300px'} height={'100%'}>
                    <Typography textAlign={'center'} variant="h3" position={'relative'} zIndex={'1'}>
                        Hey, thanks for supporting me. I really appreciate it!
                    </Typography>
                </Box>
                <Box
                    sx={{
                        backgroundImage: 'url(/NJA-50.png)',
                        opacity: '.7',
                        height: '300px',
                        width: '300px',
                        backgroundSize: 'contain',
                        position: 'absolute',
                        zIndex: 0
                    }}
                />
            </Grid>
            <Grid item xs={6} p={4}>
            </Grid>
        </Grid>
    )
};
export default Donate;

Here, we put in our “stripeRoot” div, which we specified as our target for our Donation form. Next, we have to attach our our script to the document. In React apps, you can’t run a "<script>" in the app code, so we’ll use an effect.


// Donate.jsx
import { useEffect } from "react";
import { Typography, Grid, Box } from "@mui/material";
const Donate = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://storage.googleapis.com/donations-app/index-607d50b6.js';
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, []);
    return (
        <Grid container p={4}>
            <Grid item xs={12}>
                <Typography variant="h1">Donate!</Typography>
            </Grid>
            <Grid item xs={6} p={4} alignItems={'center'} display={'flex'} flexDirection={'column'} position={'relative'}>
                <Box height={'400px'}></Box>
                <Box width={'300px'} height={'100%'}>
                    <Typography textAlign={'center'} variant="h3" position={'relative'} zIndex={'1'}>
                        Hey, thanks for supporting me. I really appreciate it!
                    </Typography>
                </Box>
                <Box
                    sx={{
                        backgroundImage: 'url(/NJA-50.png)',
                        opacity: '.7',
                        height: '300px',
                        width: '300px',
                        backgroundSize: 'contain',
                        position: 'absolute',
                        zIndex: 0
                    }}
                />
            </Grid>
            <Grid item xs={6} p={4}>
                <div id="stripeRoot"></div>
            </Grid>
        </Grid>
    )
};
export default Donate;

And just like that, oue donation form is live on our website!

When you’re ready to build for production, you can crate a new revision of the server with your Live Secret Key, a new React app build with your Live Client key, re-upload the new build files, and you’re good to go.

Want to see a live version? https://nathanielarfin.com/donate

Setting up an auto-email micro function for Firebase RTDB

Nathaniel Arfin — Thu, 25 May 2023 20:39:27 +0000

Introduction

I really like Firebase.

It helps me get projects launched quickly and easily with awesome App tooling, handing things like auth, database, and even storage.

Recently, I launched my personal website on my preferred FERN stack. I built out my form to submit messages to the /messages path of my database. This is great, it gives me a clean and organized way to store my messages, but the Firebase Console is pretty well unusable on mobile, and I want to make sure I’m getting back to requests quickly.

We’re going to take advantage of Firebase Cloud Functions to automatically email ourselves messages that get sent to the database. First, let’s figure out what this is:

Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.

With Firebase, you can trigger functions from Alerts, Blocking Auth events, Auth events, Analytics, Firestore, Remote Config, Storage, Pub/Sub, Labs, and Realtime Database events!

Now, I seriously recommend reading those docs, because it really walks you through the process. If, instead, you want to follow along here, we can get started by setting up our environment and logging into our gcloud account.

This walkthrough assumes you have a firebase project with RTDB set up.

Getting Started

Hop into your favourite IDE, start a new project, and throw in an npm install -g firebase-tools firebase-admin. Now that we have the dependancies loaded, you can log in to your application. Hit it with firebase login and firebase init functions.

Your file structure should now look like:

myproject
|
+- firebase.json  # Describes properties for your project
|
+- functions/     # Directory containing all your functions code
      |
      +- .eslintrc.json  # Optional file containing rules for JavaScript linting.
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- index.js      # Main source file for your Cloud Functions code</strong>
      |
      +- node_modules/ # Directory where your dependencies (declared in
                        # package.json) are installed

If you pop in to index.js, you’ll see something that looks like this:

const functions = require("firebase-functions");

// // Create and deploy your first functions
// // https://firebase.google.com/docs/functions/get-started
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//   functions.logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });

So here we can see the basics of how Cloud Functions works. It accepts a request object and response function, and responds to the caller with the contents of the object passed into the response function.

Building our listener

Now, we aren’t using HTTP triggers, we’re using our RTDB. First, remove the commented section from index.js, and we’ll add the imports we’ll need, and set up the admin:

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");

admin.initializeApp();

Next, we specify the path we want to listen to:

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");

admin.initializeApp();

const catchSubmission = onValueCreated("/messages/{uid}", (event) => {

});

So here, we have specified that when a new value is created at messages/{uid}, it is passed into our function as the “event”.

Now, depending on how you shape your form submission, you’re going to handle this differently. I keep mine simple, with from , message, and replyto fields. We can grab these values by destructuring like this:

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");

admin.initializeApp();

const catchSubmission = onValueCreated("/messages/{uid}", (event) => {
    const {from, message, replyTo} = event.data.val();
});

Awesome! We’re now caught our message! Now we just have to shape it, and send it off.

Sending our email

For email, we’re going to use the very popular nodemailer package. Throw an npm install nodemailer and import it at the top of our function, and we’ll create our transporter instance:

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");
const nodemailer = require('nodemailer');

admin.initializeApp();

const user = process.env.EMAIL;
const pass = process.env.PASSWORD

const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {user,pass},
});

const catchSubmission = onValueCreated("/messages/{uid}", (event) => {
    const {from, message, replyTo} = event.data.val();
});

There, we have specified our SMTP transporter. I am using Gmail, so I will have to use an App-specific password. I’m going to pass in the email address and password from the environment for flexibility.

Now, nodemailer is very versatile, but I really only need something simple. I’m going to define a simple email and send it off using the transporter’s sendMail!

Note: Gmail does not accept aliases in the “From” field.

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");
const nodemailer = require('nodemailer');

admin.initializeApp();

const user = process.env.EMAIL;
const pass = process.env.PASSWORD

const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {user,pass},
});

const catchSubmission = onValueCreated("/messages/{uid}", async (event) => {
    const {from, message, replyTo} = event.data.val();
    const email = transporter.sendMail({
        from,
        subject: \`A new message from ${from} through your website!\`,
        replyTo: \`${replyTo}\`,
        to: "your@email.com",
        text: message,
    });
});

Great! now we’ve set up a function that listens to our messages route. We can wrap it up by responding back to the event with any changes we would like to make. In this case, let’s send the Message ID:

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");
const nodemailer = require('nodemailer');

admin.initializeApp();

const user = process.env.EMAIL;
const pass = process.env.PASSWORD

const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {user,pass},
});

const catchSubmission = onValueCreated("/messages/{uid}", async (event) => {
    const {from, message, replyTo} = event.data.val();
    const email = transporter.sendMail({
        from: user,
        subject: \`A new message from ${from} through your website!\`,
        replyTo: \`${replyTo}\`,
        to: "your@email.com",
        text: message,
    });
    return event.data.ref.update({emailId: email.messageId})
});

With that set up, we can export this as a module, and get ready to deploy!

const admin = require ('firebase-admin');
const {onValueCreated} = require("firebase-functions/v2/database");
const nodemailer = require('nodemailer');

admin.initializeApp();

const user = process.env.EMAIL;
const pass = process.env.PASSWORD

const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {user,pass},
});

const catchSubmission = onValueCreated("/messages/{uid}", async (event) => {
    const {from, message, replyTo} = event.data.val();
    const email = transporter.sendMail({
        from: user,
        subject: \`A new message from ${from} through your website!\`,
        replyTo: \`${replyTo}\`,
        to: "your@email.com",
        text: message,
    });
    return event.data.ref.update({emailId: email.messageId})
});

exports.emailer = catchSubmission;

Deployment

Deploying a Firebase function is incredibly easy. In our case, because we used the process.env methodology, we can define our variables in .env. I don’t recommend storing passwords in .env, make use of a secrets manager.

Once you’re ready, throw firebase deploy --only functions into your console, and you should be all set!

Wrapping Up

In this quick article, we went over how to set up a cloud function that listens for a write at a specific location, we created an SMTP transporter for sending emails, and we deployed our micro-function!

Now, we’re able to programmatically email ourselves form submissions to our webforms using Firestore Realtime Database and nodemailer.

Fully FERNished - 🎨Material UI, 🐳Dockerization, and 🌤️ Deployment.

Nathaniel Arfin — Tue, 02 May 2023 18:09:48 +0000

Designers Beware. I am in no way a designer. I do not claim to be. Choices I make in this post reflect that.

Put away the IDE, open the blinds, get some sun, some coffee, some energy. Today, we’re talking design. More specifically, we’re going to talk about how to work with Material UI in your FERN stack project.

We’ll pick up from where we left off, last time, we made our app fully CRUDdy, implementing edit and delete routes. Today, we’re going to work in the area where I am least comfortable. I am happy to admit that I’m not a designer. I do understand the basics, and I am excited to take you through getting your web app set up with Material UI’s incredibly powerful theming tools.

Like I said from the top, we’re putting away our IDEs to start. Head over to Figma and start up a new canvas. For this, I’m going to work on a Wireframe.

The two big decisions you have to make when getting started are your typography and your colour palette. When getting started, and for maximum compatibility, I like to use Google Fonts to select my typefaces. I usually start with typography, as it gives me the opportunity to select my colours to match my font-faces. Again, I don’t claim to be a designer, that might be terrible advice.

Getting started with our theme

Typography ABC

Anyways, Material UI provides 13 variants by default. They are:

h1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
button
caption
overline

Which, represented visually in the Roboto font, looks like this:

Now, you don’t have to define all of these, I usually do at least: H1-H6, body1, and body2. Now before we get started, it’s also important to remember this note from Material UI:

MUI uses rem units for the font size. The browser <html> element default font size is 16px but browsers have an option to change this value, so rem units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.

Typography - Material UI

I usually like to pick a Display or Serif font for my headers. Something with a lot of different styles so that we can vary our weights. Today I’m going with Roboto Slab for my fancy font, and I’ll use Roboto as my body font. Now, in Figma, I’m going to test this out. Something to remember here is that we’re basing this on rem units, and the browser default is 16px. We’re going to use this as our body1. From there, we will adjust font sizes relative to 16px (relative em).

For my *******body2******* I want a slightly smaller font, something like 90% of the body 1. That can be noted in CSS as .9rem. In Figma, you can multiply sizes, so you can type into the font-size box “16*.9”, and it will provide you with the desired results. If you hate doing math (why are you in this field), you can use Code Beautify’s REM to PX converter tool.

Type some lorem, or get ChatGPT to give you some copy, and give yourself some body text!

Wow, incredible stuff. You can see I’ve thrown some Bolding in there to help us get a feel for how that will look. Now let’s get started with headers! With our headers, we want to be able to add a variety of emphasis types throughout our site. It’s important to make use of your Font Weights to add differentiation.

I’m going to start with my H6 at 1.25rem, or 20pt, and scale upward from there (H5 at 1.5rem, H4 at 1.75rem, etc). With that, our Figma will look like this:

That’s a good start, but with font weight we can add some variety and have some typography that will stand out a bit.

By adjusting our font weights, we’ve create a varying mix of appealing headers, which we can use throughout our project.

🌈 Colour 🟦🟪🟩

Next, let’s talk about color, or as I like to call it, colour. With Material UI, we can theme the following:

primary - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components. - defaults to #1976d2

secondary - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional. - defaults to #9c27b0

error - used to represent interface elements that the user should be made aware of. - defaults to #d32f2f

warning - used to represent potentially dangerous actions or important messages. - defaults to #ed6c02

info - used to present information to the user that is neutral and not necessarily important. - defaults to #0288d1

success - used to indicate the successful completion of an action that user triggered. - #2e7d32

Within each of those colours, we can specify a Primary, a Dark, a Light, and a Contrast Text. We’re also able to theme our Background colour, with 2 options, one for the primary background colour, and one for “Surfaces” called Paper or Card. To take MUI’s definition:

The background of an application resembles the flat, opaque texture of a sheet of paper, and an application's behavior mimics paper's ability to be re-sized, shuffled, and bound together in multiple sheets.

When it comes to defining a colour palette, it’s great to find colours that are meaningful and speak to you in some way. Or, if you’re struggling to find inspiration, use a generator! I love coolers.co. It’s a great, free way to quickly cycle through complimentary colours, locking in the ones you like. They have some cool pro features like contrast checking and trending palettes. It’s also great for finding the Light and Dark shades of your palette.

Because it’s 2023, I know the vast majority of people are using Dark Mode by default. MUI does offer some strong Dark Mode/Light Mode theming capabilities, but for now, let’s stick with our basic colour scheme. I’m personally going to define: A background colour, a Paper colour, a Primary colour, and a Secondary colour.

Using Cooler, I came up with the following:

Background: default: #1D1A31, paper: #272343

Primary: main: #A12B49, light: #D04E6E, dark: #511524, contrastText: #EBEBEB

Secondary: main: #59C3C3, light: #87D4D4, dark: 1B4B4B, contrastText: #1D1A31

Using their contrast checker, we can tell this is going to be a decently versatile colour scheme:

Left: WCAG Contrast Minimum Compliant colour combinations; Right: All possible combinations

Now, let’s apply this to our Figma sheet. Apply your background colour to the document, and create a rectangle of 800px by 800px, centre it and change it to your Paper colour. Centre your text inside your paper, and change it to the contrastText colour. Then, create swatches for each of your primary and secondary colours, and all of their shades, with labelling text. When you’re done, it should look something like this:

Play around with your colours and find a palette that works for you! You can also use this to see how your text will look on a page, and what your interactive icons might look like. For example, we know that your Button is going to be in your Primary colour. I can see how this might look by placing a 30px tall Rectangle, with 5px corners, and a drop-shadow. You’re of course able to customize your buttons further, but this will give you a general impression of how they’ll look “out of the box”.

Once you’re comfortable with your palette and typography, let’s launch our IDE and get theming!

Implementing our theme 🎨🖌️

Open your project, and start your backend with npm run start , open a new terminal, and throw in an cd client && npm run dev. You can open up your app in a browser window, and you should be greeted with our very basic page:

Now, let’s get started by installing our fonts. If you’re using Google Fonts, you can navigate to the font’s page, and select the variants you want to include in your project, and then getting the import tag for your selected fonts. Mine looks like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Take a look at the MUI Installation Instructions if you’re unsure.

Throw those tags into the head of your index.html, which should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FERN Stack</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Congrats, those fonts are now installed! Let’s put them to use. First, we have to create our theme file. This is where we will define and update all of our theming options moving forward. Create a new file called client/src/theme.js, and let’s build our theme!

import {createTheme} from '@mui/material/styles';
const theme = createTheme ({
  palette: {
    primary: {
      main: '#A12B49',
      dark: '#511524',
      light: '#D04E6E',
      contrastText: '#EBEBEB',
    },
    secondary: {
      main: '#59C3C3',
      dark: '#1B4B4B',
      light: '#87D4D4',
      contrastText: '#272343',
    },
    background: {
      default: '1D1A31',
      paper: '272343',
    },
    text: {
      primary: 'EBEBEB',
      secondary: '1D1A31',
    },
  },
  typography: {
    fontFamily: "'Roboto', sans-serif",
    h1: {fontSize: '2.rem', fontFamily: "'Roboto Slab', serif",},
    h2: {fontSize: '2.25rem', fontFamily: "'Roboto Slab', serif",},
    h3: {fontSize: '2rem', fontFamily: "'Roboto Slab', serif",},
    h4: {fontSize: '1.75rem', fontFamily: "'Roboto Slab', serif",},
    h5: {fontSize: '1.5rem', fontFamily: "'Roboto Slab', serif",},
    h6: {fontSize: '1.25rem', fontFamily: "'Roboto Slab', serif",},
    body1: {fontSize:'1rem', fontFamily: "'Roboto Slab', serif",},
    body2: {fontSize: '.9rem', fontFamily: "'Roboto Slab', serif",},
  },
});
export default theme;

In the above, I’ve defined all of the same colours and theming that we went through earlier in Figma to our MUI theme. This is by no means a comprehensive theme, and there are a lot of options available. I recommend reading MUI’s theming documentation.

Now we have our theme defined. It’s time to implement it. Just as we did previously with our AuthProvider, PageLayout, and PrivatePage, we’re going to create a context to define our theme throughout our project. Because we don’t have many variables to define, we can do so right in our App.jsx file.

// App.jsx
{/* Other imports */}
import { ThemeProvider } from '@mui/material';
import theme from './theme';

const App = () => {
    {/*Hooks, Handlers */}
    return (
    <Router>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ThemeProvider theme={theme}>
            <PageLayout routes={routes}>
              <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                  {routes.map (
                    (route, index) =>
                      route.isPrivate
                        ? <Route
                            key={index}
                            path={route.path}
                            element={
                              <PrivatePage component={route.component} />
                            }
                          />
                        : <Route
                            key={index}
                            path={route.path}
                            element={<route.component />}
                          />
                  )}
                </Routes>
              </Suspense>
            </PageLayout>
          </ThemeProvider>
        </AuthProvider>
      </QueryClientProvider>
    </Router>
  );
};
export default App;

Now, we can access our theme throughout our project! And if you navigate home, you’ll see that your colours have been impleme-

What the heck? That’s our Primary colour, alright, but nothing has been implemented anywhere else. Earlier, when we create our PageLayout.jsx, we got started with implementing MUI, but stop short of actually providing the app with a global theme.

Let’s do that now. Head over to our PageLayout file, which currently looks like this:

//PageLayout.jsx
import React from 'react';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import Navbar from '../components/NavBar';

const Footer = () => (
  <Grid item xs={12} sx={{py: 3, mt: 'auto', backgroundColor: '#f8f8f8'}}>
    <Container maxWidth="sm">
      <Typography variant="body2" color="text.secondary" align="center">
        © {new Date ().getFullYear ()} My first FERN App!
      </Typography>
    </Container>
  </Grid>
);

const PageLayout = ({children, routes}) => (
  <Grid container direction="column" minHeight="100vh">
    <Grid item xs={12}>
      <Navbar routes={routes} />
    </Grid>
    <Grid item xs={12} py={4}>
      <Container component="main">
        {children}
      </Container>
    </Grid>
    <Footer />
  </Grid>
);

export default PageLayout;

And update it to implement our new theme! It’s incredibly straightforward to use MUI theming in any component wrapped in the Provider.

//PageLayout.jsx
import React from 'react';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import Navbar from '../components/NavBar';

const Footer = () => (
  <Grid item xs={12} sx={{py: 3, mt: 'auto', backgroundColor:'background.paper'}}>
    <Container maxWidth="sm">
      <Typography variant="body2" color="text.primary" align="center">
        © {new Date ().getFullYear ()} My first FERN App!
      </Typography>
    </Container>
  </Grid>
);

const PageLayout = ({children, routes}) => {
  return (
    <Grid container direction="column" minHeight="100vh" sx={{backgroundColor:\`background.default\`}}>
      <Grid item xs={12}>
        <Navbar routes={routes} />
      </Grid>
      <Grid item xs={12} py={4}>
        <Container component="main">
          {children}
        </Container>
      </Grid>
      <Footer />
    </Grid>
  );
};

export default PageLayout;

As you can see, we can define our colours with “text.primary”, or “background.paper”, and it will reflect on all of our MUI components:

And we can easily add a pop of colour with some quick adjustments! Let’s make our footer use our Secondary colour:

const Footer = () => (
  <Grid item xs={12} sx={{py: 3, mt: 'auto', backgroundColor:'secondary.main'}}>
    <Container maxWidth="sm">
      <Typography variant="body2" color="secondary.contrastText" align="center">
        © {new Date ().getFullYear ()} My first FERN App!
      </Typography>
    </Container>
  </Grid>
);

You can see there, I’ve defined the background colour with secondary.main, and the text with secondary.contrastText.

Now we have a very bright, colourful screen, matching the palette we defined earlier:

But wait! I hear you calling out, *************the title text doesn’t match!*************

Very observant, audience member. That’s because when we defined our very basic routes in the early stages, we hadn’t yet implemented MUI. Let’s update our Home and About pages.

Before:

//About/Home.jsx

const About/Home = () => {
    return(<h1>About/Home</h1>)
};
export default About/Home;

After:

//About/Home.jsx

import { Typography } from "@mui/material";

const About/Home = () => {
    return(<Typography variant="h1">About/Home</Typography>)
}
export default About/Home;

Ok, so now our font is in place, but our text colour isn’t implemented correctly. We have a couple of ways that we can approach this. We can either apply a color rule in our theme to allVariants, apply it to each of our Headers, and body text objects, or, and this is the path I’m going to go, apply it to the parent component, in this case our Container component in page layout.

const PageLayout = ({children, routes}) => {
  return (
    <Grid container direction="column" minHeight="100vh" sx={{backgroundColor:\`background.default\`}}>
      <Grid item xs={12}>
        <Navbar routes={routes} />
      </Grid>
      <Grid item xs={12} py={4}>
        <Container component="main" sx={{color:'text.primary'}}>
          {children}
        </Container>
      </Grid>
      <Footer />
    </Grid>
  );
};

And just like that, we’ve applied our theme. Let’s throw some text onto our home page, build a sign up button, and then we’ll check out the Theme on our login and dashboard pages! Here’s our updated Home page:

//Home.jsx

import {Button, Grid, Typography} from '@mui/material';
import { useNavigate } from 'react-router-dom';

const Home = () => {
    const navigate = useNavigate()
    const handleSignUpClick = () => {
        navigate('/login');
    }
  return (
    <Grid container maxWidth={'sm'}>
        <Grid item component={Typography} variant="h1" xs={12}>FERNShoppr</Grid>
        <Grid item component={Typography} variant="h5" xs={12} pb={2}>Your Ultimate Grocery Shopping Companion</Grid>
        <Grid item component={Typography} xs={12} variant="body1">Welcome to FERNShoppr, the most user-friendly and efficient app designed to simplify your grocery shopping experience. Say goodbye to the days of forgotten shopping lists and last-minute store runs. With our app, you'll be able to create, organize, and manage your grocery lists with ease.</Grid>
        <Grid item component={Button} onClick={handleSignUpClick} variant='contained' my={4}>Sign up!</Grid>
    </Grid>
    );
};
export default Home;

And our button takes us to our Login page, which will look a little something like this!

I’m not loving how our text field looks, but we’ll revisit that shortly. Log in, and we’ll be greeted with our list, as we left it:

Ok. So we obviously have some issues to address with how we’re applying our theme. Let’s start with our buttons. The primary action with our buttons is to check them off. So let’s apply our theme. Head into GroceryListItem, and update our IconButton component:

//GroceryListItem.jsx

{/* Imports */}

const GroceryListItem = ({
  item,
  handleitemcheck,
  handleRemoveClick,
  onEdit,
}) => {
  {/* States, Handlers, etc. */}

return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                handleRemoveClick={handleRemoveClick}
                onEdit={handleItemEdit}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck} handleRemoveClick={handleRemoveClick} onEdit={handleItemEdit}/>
        <Grid container justifyContent={'center'} py={2}>
          <Grid 
              item 
              xs={6} 
              sm={2} 
              variant={'contained'} 
            >
              <Button
                disabled={!checkedItems.length} 
                variant={'contained'}
                onClick={() => handleRemoveClick(checkedItems)}
              >
              Complete trip
              </Button>
            </Grid>
        </Grid>
      </Grid>
    );
};
export default GroceryListItem;

Here you can see, we have separated the IconButton from the Grid item, this is to ensure the correct sizing of the button. Then, we apply our background colour. We also got rid of the colours on the buttons, as they don’t work all that well with the new theme colours.

//GroceryListItem.jsx
{/*imports and handlers*/}
  return (
    <Grid container alignItems={'center'}>
      <Grid item xs={2}>
        <Grid container>
          {isEditable &&
            <Grid
              item
              xs={12}
              sm={6}
            >
              <IconButton 
              sx={{backgroundColor:'secondary.dark'}}
              onClick={handleEdit} >
              <ClearIcon />
              </IconButton>
            </Grid>}
          <Grid item xs={12} sm={6}>
            <IconButton
              onClick={!isEditable ? handleEdit : handlePublishChanges}
              sx={{backgroundColor: 'secondary.main'}}
            >
              {!isEditable
                ? <EditIcon />
                : <PublishedWithChangesIcon />}
            </IconButton>
          </Grid>
        </Grid>
      </Grid>
      <ListItemForm
        item={item}
        inputValues={inputValues}
        handleChange={handleChange}
        isEditable={isEditable}
      />
      <Grid item xs={2}>
        <IconButton
          onClick={handleClick}
          sx={{backgroundColor: 'primary.main'}}
        >
          {isEditable
            ? <ClearIcon />
            : item.checked ? <AutoRenewIcon /> : <CheckIcon />}
        </IconButton>
      </Grid>
    </Grid>
  );
};
export default GroceryListItem;

Ok, that’s some significant progress. We’re using our secondary colours and depth to signify the importance of our actions. But I’m not sure we’ve resolved the biggest issues with our design here. Let’s take another look at MUI’s Paper component. It’s a great way to differentiate surfaces from one another. We want to make it clear that the header up top isn’t really part of the workspace, and Paper is a great way to accomplish that. Let’s wrap the entire dashboard in a Paper, and give it some padding:

// Dashboard.jsx
import React, {useContext} from 'react';
import {Box, Paper, Typography} from '@mui/material';
import GroceryItemInputForm from '../components/GroceryItemInputForm';
import GroceryList from '../components/GroceryList';
import { useQueryClient } from 'react-query';
import { AuthContext } from '../contexts/AuthProvider';

const Dashboard = () => {
  const {currentUser} = useContext(AuthContext);
  const queryClient = useQueryClient()
  const token = currentUser.accessToken;
  return !currentUser
    ? ''
    : <Box display="flex" flexDirection="column" alignItems="center">
        <Typography variant="h3" mb={3}>
          Welcome to the Dashboard!
        </Typography>
        <Typography variant="h5" mb={2}>
          {currentUser ? \`Logged in as ${currentUser.email}\` : ''}
        </Typography>
        <Paper sx={{padding:6}}>
        <GroceryItemInputForm token={token} queryClient={queryClient}/>
        <GroceryList token={token} />
        </Paper>
      </Box>;
};

export default Dashboard;

Ok, awesome, we have some solid differentiation! Now, before we get to our form issue, we’re going to have to refactor the Dashboard to use the Grid system. From the docs: “The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.” We’ve already used it a bit in this project, and I’ve touched on breakpoints previously. Now, we’ll implement it on the dashboard.

import React, {useContext} from 'react';
import {Box, Grid, Paper, Typography} from '@mui/material';
import GroceryItemInputForm from '../components/GroceryItemInputForm';
import GroceryList from '../components/GroceryList';
import {useQueryClient} from 'react-query';
import {AuthContext} from '../contexts/AuthProvider';

const Dashboard = () => {
  const {currentUser} = useContext (AuthContext);
  const queryClient = useQueryClient ();
  const token = currentUser.accessToken;
  return !currentUser
    ? ''
    : <Grid container justifyContent={'center'}>
        <Grid item xs={12} textAlign={'center'}>
          <Typography variant="h3">
            Welcome to the Dashboard!
          </Typography>
          <Typography variant="h5" mb={2}>
            {currentUser ? \`Logged in as ${currentUser.email}\` : ''}
          </Typography>
        </Grid>
        <Grid sx={{width: '100%'}}>
          <Grid item xs={12} sm={8} sx={{ margin: '0 auto', display: 'flex' }}>
            <Paper sx={{ padding: 6, boxSizing: 'border-box', width: '100%' }}>
              <GroceryItemInputForm token={token} queryClient={queryClient} />
              <GroceryList token={token} />
            </Paper>
          </Grid>
        </Grid>
      </Grid>;
};

export default Dashboard;

Here’ with the xs of 12, we are defining that each of these items should take up their entire row, no matter the screen size. We’re also fixing the width of the paper element, so that it doesn’t change with the contents of the inner components.

And now looks like this:

Looks the way we expect it to, on Desktop or mobile. And we can move things around our grid using our breakpoints. Ok. Let’s get the core issue resolved. We need to fix our colours. Lets start with our Form. We’re going to make use of MUI’s theme style override functionality. Essentially, it works like this:

const theme = createTheme({
// Other theme rules
  components: {
    // Name of the component
    MuiInputLabel: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          color: '#1B4B4B',
        },
      },
    },
  },
});

We can use similar overrides on our other components as well:

MuiListItemText: {
      styleOverrides: {
        secondary: {
          color: '#EBEBEB',
        },
      },
    },
MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          borderColor: '#1B4B4B',
        },
      },
    },

Note that in this case, we are specifically naming the slot item. In the case of the ListItemText, we don’t need to override the primary, and we only need to change the colour of the outline of our inputs.

Finally, let’s play with the spacing of our list items, and get our buttons a bit more aligned.

//GroceryListItem.jsx

return (
    <Grid container alignItems={'center'}>
      <Grid item xs={1} mx={1}>
        <Grid container>
          {isEditable &&
            <Grid item xs={12} py={1}>
              <IconButton
                sx={{backgroundColor: 'secondary.dark'}}
                onClick={handleEdit}
              >
                <ClearIcon />
              </IconButton>
            </Grid>}
          <Grid item xs={12} py={1}>
            <IconButton
              onClick={!isEditable ? handleEdit : handlePublishChanges}
              sx={{backgroundColor: 'secondary.main'}}
            >
              {!isEditable ? <EditIcon /> : <PublishedWithChangesIcon />}
            </IconButton>
          </Grid>
        </Grid>
      </Grid>
      <ListItemForm
        item={item}
        inputValues={inputValues}
        handleChange={handleChange}
        isEditable={isEditable}
      />
      <Grid item xs={1} mx={1}>
        <IconButton
          onClick={handleClick}
          sx={{backgroundColor: 'primary.main'}}
        >
          {isEditable
            ? <ClearIcon />
            : item.checked ? <AutoRenewIcon /> : <CheckIcon />}
        </IconButton>
      </Grid>
    </Grid>
  );

//ListItemForm.jsx
return (
    <Grid item xs={9} sm={9} component={ListItem} key={item.id}>
      {!isEditable
        ? <ListItemText
            primary={item.name}
            secondary={checked ? '' : \`${item.quantity} ${item.measurement}\`}
            sx={{color: isCheckedColor}}
          />
        : <Grid container spacing={1}>
            <Grid item xs={6}>
              <TextField
                id="name"
                value={inputValues.name}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={2}>
              <TextField
                id="quantity"
                value={inputValues.quantity}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={2}>
              <TextField
                select
                id="measurement"
                value={inputValues.measurement}
                onChange={handleChange}
              >
                {commonMeasurements.map (unit => (
                  <MenuItem key={unit} value={unit}>
                    {unit}{item.quantity > 1 ? 's' : ''}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
          </Grid>}
    </Grid>
  );

Now, it should look something like this!

Now we’ve learned how to create and implement a theme using MUI. We’ve learned how to implement our theme, import fonts, and override specific aspects of components.

Now, I also absolutely hate this theme, and I’m going to quickly change it before we move on to the next step.

import {createTheme} from '@mui/material/styles';
const theme = createTheme ({
  palette: {
    primary: {
      main: '#008BF5',
      dark: '#00457A',
      light: '#85CAFF',
      contrastText: '#EBEBEB',
    },
    secondary: {
      main: '#FAB2EA',
      dark: '#AD0B8A',
      light: '#FEECFA',
      contrastText: '#1D1A31',
    },
    background: {
      default: '#1D1A31',
      paper: '#403D57',
    },
    text: {
      primary: '#EBEBEB',
      secondary: '#FAB2EA',
      disabled: 'rgba(235,235,235,.7)',
    },
  },
  typography: {
    allVariants: {fontFamily: "'Roboto', sans-serif"},
    h1: {fontSize: '2.rem', fontFamily: "'Roboto Slab', serif"},
    h2: {fontSize: '2.25rem', fontFamily: "'Roboto Slab', serif"},
    h3: {fontSize: '2rem', fontFamily: "'Roboto Slab', serif"},
    h4: {fontSize: '1.75rem', fontFamily: "'Roboto Slab', serif"},
    h5: {fontSize: '1.5rem', fontFamily: "'Roboto Slab', serif"},
    h6: {fontSize: '1.25rem', fontFamily: "'Roboto Slab', serif"},
    body1: {fontSize: '1rem', fontFamily: "'Roboto', sans-serif"},
    body2: {fontSize: '.9rem', fontFamily: "'Roboto', sans-serif"},
  },
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: '#1D1A31',
          fontSize:'.8rem',
        },
      },
    },
    MuiListItemText: {
      styleOverrides: {
        secondary: {
          color: '#EBEBEB',
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          borderColor: '#1D1A31',
        },
        input:{
            fontSize:'.8rem',
            alignContent:'center',
        }
      },
    },
  },
});
export default theme;

As you can see, it’s incredibly easy and fast to update and change your theme. I’m much happier with it now.

Much better!

While this is still a very raw app, we’ve covered all the basics. With the lessons I’ve covered in this stack, you can create a fully functional app. There’s only one thing left to make this a truly full stack course.

Contain & Deploy

There are many, many ways to deploy web applications. Personally, I use a combination of Docker for containerization, and Google Cloud Platform (specifically Cloud Run and Container Registry) for hosting and deployment.

To get started, install Google Cloud CLI and Docker, open a new Terminal window from your project root, and type in gcloud init. This will take you through logging into your account and creating a new project.

Building and Setting up

Next, open a terminal window and navigate to /client. Then, run npm run build. This will create a static build file of your app, which we can serve through our express server!

Now that we’ve built our Static Site, we can hook it up to the express server. Here’s where we left things with our index.js

// index.js

import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';

import verifyToken from './middlewares/verifyToken.js';
import userRoutes from './userRoutes.js';
dotenv.config ();
const app = express ();
const port = process.env.PORT || 3000;

app.use (cors ());
app.use (json ());

app.use (verifyToken, userRoutes);

app.use ((error, req, res, next) => {
  res.status (500).json ({error: error.message});
});

app.listen (port, () => console.log (\`Express app listening on ${port}\`));

We need to make a few changes to make this happen. We’ve built the app, but we need to tell the server where to access it. We’re going to use the path and url middlewares to help.

import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import path from 'path';
import { fileURLToPath } from 'url';

import userRoutes from './userRoutes.js';
dotenv.config ();
const app = express ();
const port = process.env.PORT || 3000;
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

app.use (cors ());
app.use (json ());
app.use(express.static(path.join(__dirname, './client/dist')));

app.use((req, res, next) => {
  if (req.url.startsWith('/api')) {
  req.url = req.url.substring(4);
    }
    next();
})

app.use (userRoutes);

app.get('/*', async function (req, res) {
  const homePath = path.join(__dirname,"./client/dist/index.html");
  res.sendFile(homePath);
});

app.use ((error, req, res, next) => {
  res.status (500).json ({error: error.message});
});

app.listen (port, () => console.log (\`Express app listening on ${port}\`));

Here, we’re using the path and fileURLtoPath to define the route to the app. Note that it comes after our userRoutes, that’s to ensure that our API calls aren’t lost and rerouted to the app. You’ll also notice we’re using a middleware to sanitize our /api/* calls. This enables us to continue using the app in either dev or production.

Additionally, we have moved the verifyToken middleware into the userRoutes. This ensures that the home path doesn’t get intercepted by the middleware.

The new userRoutes.js looks like this:

import express from 'express';
const router = express.Router ();
import {db} from './firebase.js';
import {ref, set, get, update, remove} from 'firebase/database';
import verifyToken from './middlewares/verifyToken.js';

router.get ('/data', verifyToken, async (req, res, next) => {
  const {userId} = req.body;
  try {
    get (ref (db, 'users/' + userId )).then (snapshot => {
      if (snapshot.exists ()) {
        res.status (200).json (snapshot.val ());
      } else {
        console.log ('No data available');
        res.status(200).json({});
      }
    });
  } catch (error) {
    next (new Error (error.message));
  }
});

router.post ('/data', verifyToken, async (req, res, next) => {

  const {userId, userData} = req.body;

  try {
    await set (ref (db, 'users/' + userId + '/' + userData.id), userData)
      .then (() => {
        res.status (200).json ({...userData});
      })
      .catch (e => {
        throw e;
      });
  } catch (error) {
    next (new Error (error.message));
  }
});

router.put('/data', verifyToken, async (req, res, next) => {
  const { userId, updatedData } = req.body;

  try {
    await update(ref(db, \`users/${userId}/${updatedData.id}\`), updatedData)
      .then(() => {
        res.status(200).json({...updatedData});
      })
      .catch(e => {
        throw e;
      });
  } catch (error) {
    next(new Error(error.message));
  }
});

router.delete('/data', verifyToken, async (req, res, next) => {
  const { userId, items } = req.body;
  console.log(items)
  try {
    for (const item of items) {
      const itemRef = ref(db, \`users/${userId}/${item.id}\`);
      await remove(itemRef)
    }
    res.status(200).json({ message: 'Items deleted successfully' });
  } catch (error) {
    next(new Error(error.message));
  }
});

export default router;

Once you’ve made those changes, you should be able to navigate to https://localhost:3000 (or whatever port you’re testing on), and see your app running in “production”.

Perfect! Let’s get this thing on the web.

🐳 Dockerization 🐳

Now we’re using Docker to create our container. What does that mean? A container is defined by Docker as:

A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

It essentially creates a virtual runtime environment that is incredibly lightweight, and executes only our code in a cloud computing environment. In order to give our container the instructions it needs to build and run, we need to create something called a Dockerfile.

Dockerfiles are a text instruction file that provides a list of commands and arguments a user could call on the command line to assemble an image. Let’s build ours!

Create Dockerfile in your root directory, and enter:

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN cd client && npm install && npm run build
ARG PORT=3000
EXPOSE $PORT
ENV PORT=$PORT
CMD npm start

Alright, so what did we do here? First we’re defining our image environment, we’re using a Node.js environment on top of the Alpine Linux distribution.

Next, we define the working directory as /app, and copy the package.json and package-lock.json files from the root into the /app directory. Next, we run npm install to ensure the necessary dependancies are installed.

Then, we copy the contents of our root directory into the working directory, change into our /client, install the necessary dependancies, and create a new build.

We then accept either a port argument, or define it to the default of 3000, we expose that port and define the environment variable.

Finally, with an npm run start, the app will start up.

Before you build your container, make sure you update your package.json with the correct start command. Mine looks like this:

{
  "name": "fern-stack-walkthrough",
  "version": "3.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "firebase": "^9.19.1",
    "firebase-admin": "^11.6.0",
    "path": "^0.12.7",
    "url": "^0.11.0"
  }
}

With that done, we’re ready to build our container!

From your project root, type in docker build -t [gcr.io/yourprojectname/yourappname](http://gcr.io/yourprojectname/yourappname) .

Note: if you’re on an M-Series Mac, you will have to use docker buildx build --platform linux/amd64 -t [gcr.io/yourprojectname/yourappname](http://gcr.io/yourprojectname/yourappname) . or the container will experience startup issues.

Depending on a number of factors, this will take up to a few minutes. Once complete, you can test run your Docker container in Docker desktop, or push to Google Container Registry!

Type in docker push [gcr.io/yourprojectname/yourappname](http://gcr.io/yourprojectname/yourappname) and after it pushes, your container is now ready for deployment! Head to Google Cloud Run and click “Create a Service”

Deployment

Select your container, and provide your service with a name. Next, select a region. If you plan on providing your service with a custom domain, and don’t want to rely on complicated custom mapping, make sure you select a region where domains are supported.

Make sure you allow all traffic, and unauthenticated traffic if you plan on making this publicly available.

Below, you’re able to set your PORT, Arguments, runtime variables, and configure secrets.

If you plan to deploy your app to production, I highly recommend using the Secrets Manager API to protect your sensitive keys.

Once you’re happy with the settings, hit Create, and your service will deploy! You’ll get a URL, and your test app is up and running! Mine’s live at https://fernwalkthrough3-rudpxdpghq-uc.a.run.app

If you have any issues or want to make updates, you can follow the same steps as before, make the changes, containerize, push, and then simply hit edit and deploy your new version!

Wrapping Up

This series was really designed to help you get up and running with a solid framework, and understanding of the FERN stack, Material UI, React Query, React Router, and how to get your App online.

I really hope I was able to help you learn something new.

The full repo is available here: https://github.com/wra-sol/fernstack3

Let’s get in touch. Reach out at nathanielarfin.com or in the comments!

How does React Query's useQuery work?

Nathaniel Arfin — Wed, 26 Apr 2023 15:23:03 +0000

I'm a big fan of React Query. Most often, I combine it with an express backend to power my APIs. I love React Query because it handles cacheing, and makes background updates and side-effects really easy.

If you want to see how I implement it in a more fulsome project, check out my FERN Walkthrough.

Something I love to do when I'm learning a new technology is take a deep dive into the "how". A peek behind the curtain into useQuery is incredibly enlightening, and helps to inform the ways you can use in your projects.

What is useQuery?

From the docs: 'A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server.'

Or, in regular people English, it's an assigned constant to a react hook, that you provide a consistent name, and a function that returns a Promise.

That's still not exactly clear. Let's take a look at what we're working with. What is useQuery?

At it's very core, useQuery is a custom hook.

Breaking down the Custom Hook

More specifically, this custom hook:

function useQuery(queryKey, queryFn, options = {}) {
  const { enabled = true, retry = 3, refetchInterval } = options; 
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [status, setStatus] = useState('idle');
  const [retryCount, setRetryCount] = useState(0);

  useEffect(() => {
    let intervalId;

    const fetchData = async () => {
      setStatus('loading');

      try {
        const result = await queryFn();
        setData(result);
        setError(null);
        setStatus('success');
      } catch (err) {
        setError(err);
        setStatus('error');

        if (retryCount < retry) {
          setRetryCount((prevCount) => prevCount + 1);
        }
      }
    };

    if (enabled) {
      fetchData();
      if (refetchInterval) {
        intervalId = setInterval(fetchData, refetchInterval);
      }
    }

    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, [queryKey, queryFn, enabled, retry, refetchInterval, retryCount]);

  return { data, error, status };
}

So let's break this down. The useQuery hook takes 3 arguments:

'queryKey' - this is used to cache data, and can be used to trigger refreshes as required.
'queryFn' - A function which returns data and throws on error.
'options' object such as a number of retries, a refetchInterval, and the ability to programatically disable the hook.

On run, the useQuery hook does a couple things to handle the fetching process. First, it sets up the state to track data, error, status, and retry count. Next, it uses the useEffect hook to perform the passed in 'queryFn', fetch data, and update the state accordingly. While it does this, the hook handles errors, retries, and refetch intervals, making sure the component has the most up-to-date data available. Additionally, the hook can be programmatically enabled or disabled through the options object, giving you more control over its behavior.

Wrapping up

By making us of the useQuery custom hook in your projects, you can easily fetch and manage data from your API endpoints while leveraging built-in caching and background updates. It met your code more readable and performant, and leads to better user experiences. Now that we have better understanding of how the useQuery hook works, how do you plan to implement it in your next project?

FERN 2 - WebDev Boogaloo

Nathaniel Arfin — Tue, 25 Apr 2023 20:19:00 +0000

Welcome Back!

In the previous article, we got started in the FERN stack. We developed our Express Server and API, which we integrated with Firebase Real Time Database. We created our React front-end, setting it up with some very basic visuals with Material UI, and enabled users to sign up with Auth provided from Firebase.

In this post, we’re going to dive a bit more deeply into some of the data manipulation methods, including Edit and Delete, making use of the Tanstack Reacy Query library; we’re going to get into a bit more of the theming available with Material UI, and we’ll explore some other cool features contained within the React Router library.

If you followed along with the previous tutorial (or cloned the repository), open up your IDE and give in an npm run start , then open up another terminal and run in cd client && npm run dev. You should be greeted with your lovely startup messages, and when you open up your browser on the specified port (default 5173), you should be greeted with this page:

Head over to /dashboard! If you entered in any grocery items last time, they’ll still be proudly on display. If your session has expired, you’ll have to log back in. Once you do, you should be looking at something like this:

We have our checklist and we can add items. Now let’s look at manipulating them further. We’ll start with the most obvious. We want to check items off of our list!

Now, if I’m out grocery shopping, I probably don’t want the items to be deleted once I check them off. We’re going to instead look at how we structure our data, and how that impacts the way we display it.

Let’s take another look at what we’re seeing here.

We have our Dashboard:

// Dashboard.jsx
import React, {useContext} from 'react';
import {Box, Typography} from '@mui/material';
import GroceryItemInputForm from '../components/GroceryItemInputForm';
import GroceryList from '../components/GroceryList';
import {getAuth} from 'firebase/auth';
import { useQueryClient } from 'react-query';

const Dashboard = () => {
  const {currentUser} = getAuth ();
  const queryClient = useQueryClient()
  const token = currentUser.accessToken;
  return !currentUser
    ? ''
    : <Box display="flex" flexDirection="column" alignItems="center">
        <Typography variant="h3" mb={3}>
          Welcome to the Dashboard!
        </Typography>
        <Typography variant="h5" mb={2}>
          {currentUser ? \`Logged in as ${currentUser.email}\` : ''}
        </Typography>
        <GroceryItemInputForm token={token} queryClient={queryClient}/>
        <GroceryList token={token} />
      </Box>;
};

export default Dashboard;

Which contains our GroceryItemInputForm, we’re pretty happy with that for now, and then we have our GroceryList:

// GroceryList.jsx
import React from 'react';
import {useFetchGroceryItems} from '../hooks/useFetchGroceryItems';
import {
  CircularProgress,
  ListItem,
  ListItemText,
  Typography,
  Grid,
  List,
} from '@mui/material';

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);
  if (isLoading || !groceryItems) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <CircularProgress />
        </Grid>
      </Grid>
    );
  }
  if (error) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <Typography variant="h6" color="error">
            Error: {error.message}
          </Typography>
        </Grid>
      </Grid>
    );
  }
  if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} container>
          {Object.values (groceryItems).map (item => (
            <Grid item xs={12} component={ListItem} key={item.id}>
              <ListItemText
                primary={item.name}
                secondary={\`${item.quantity} ${item.measurement}\`}
              />
            </Grid>
          ))}
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Checking items off

Our components are still relatively straightforward. There is absolutely some room for improvement, but we’re happy with it for right now. Our main focus right now is to add a check button, and build out the handling. Let’s start with the button. Here, we can start to take a look at some of the power of Material UI. We’ll begin by updating our imports to include the following:

// GroceryList.jsx
import React from 'react';
import {useFetchGroceryItems} from '../hooks/useFetchGroceryItems';
import {
  CircularProgress,
  ListItem,
  ListItemText,
  Typography,
  Grid,
  List,
  IconButton
} from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';

And then we’re going to take advantage of the grid structure, and we’ll at our button to the end of our page:

{/*Other Code...*/}
<Grid item xs={9} sm={10} component={ListItem} key={item.id}>
    <ListItemText
        primary={item.name}
        secondary={\`${item.quantity} ${item.measurement}\`} />
</Grid>
<Grid item xs={3} sm={2} component={IconButton} onClick={handleItemCheck}>
    <CheckIcon/>
</Grid>

Now, if you’re using VSCode, and you just put that code in, you’re probably seeing a whole bunch of red squiggles right now. To fix this, we can wrap the above in a JSX Fragment, which can be written as <Fragment>{//...more JSX}</Fragment>, or by simply writing <>{//...more JSX}</> . The important takeaway from this is that React only allows you to return one Element per component. Right now, we’re trying to return two. Usually, if you’re trying to return two components, you’re better off creating a new child component.

Right now, there is a component that is very easy for us to extract:

//GroceryList.jsx
{/*Other Code...*/}
<Grid container>
    <Grid item component={List} container>
      {Object.values (groceryItems).map (item => (
        <>
          <Grid item xs={9} sm={10} component={ListItem} key={item.id}>
            <ListItemText
              primary={item.name}
            secondary={\`${item.quantity} ${item.measurement}\`} 
                    />
        </Grid>
        <Grid item xs={3} sm={2} component={IconButton} onClick={handleItemCheck}>
          <CheckIcon/>
        </Grid>
      </>
     ))}
  </Grid>
</Grid>

We’re going to take everything inside the JSX fragment, and extract that into a new component called “ListItem”. Create components/GroceryListItem.jsx, and enter the component from above, passing in the necessary props:

//GroceryListItem.jsx

import {Grid, ListItemText, IconButton, ListItem} from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';

const GroceryListItem = ({item, handleitemcheck}) => {
  return (
    <Grid container>
      <Grid item xs={9} sm={10} component={ListItem} key={item.id}>
        <ListItemText
          primary={item.name}
          secondary={\`${item.quantity} ${item.measurement}\`}
        />
      </Grid>
      <Grid item xs={3} sm={2} component={IconButton} onClick={handleitemcheck}>
        <CheckIcon color='success'/>
      </Grid>
    </Grid>
  );
};
export default GroceryListItem;

And we can now clean up GroceryList.jsx, importing our Items and mapping the items into them:

// GroceryList.jsx
import React from 'react';
import {useFetchGroceryItems} from '../hooks/useFetchGroceryItems';
import {
  CircularProgress,
  Typography,
  Grid,
  List,
} from '@mui/material';
import GroceryListItem from './GroceryListItem';

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);
  const handleItemCheck = () => {
    console.log ('Hi');
    return;
  };
  if (isLoading || !groceryItems) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <CircularProgress />
        </Grid>
      </Grid>
    );
  }
  if (error) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <Typography variant="h6" color="error">
            Error: {error.message}
          </Typography>
        </Grid>
      </Grid>
    );
  }
  if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12}>
          {Object.values (groceryItems).map (item => (
            <GroceryListItem
              item={item}
              handleitemcheck={handleItemCheck}
              key={item.id}
            />
          ))}
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Now wait. We just built a new component. We’re mapping info into it, it’s not that different from before, but we also did a couple of other cool things here. In our GroceryListItem, you might have noticed this:

<Grid item xs={9} sm={10} component={ListItem} key={item.id}>
{/*...*/}
<Grid item xs={3} sm={2} component={IconButton} onClick={handleitemcheck}>

Specifically, we’re using the sm property. This is the first time we’ve used a very powerful Material UI feature called Breakpoints. Making use of the Material UI Grid and Breakpoints, we can quickly and easily define resizing rules depending on different screen sizes. In this case, we are making use of the xs and sm breakpoints. The default breakpoints are as follows:

xs: 0px, sm: 600px, md: 900px, lg: 1200px, xl: 1536px

Components are defined by the minimum defined breakpoint up to the next defined breakpoint. Most commonly, you will design with Mobile/Non-Mobile in mind, and xs/sm will suit the majority of your needs. In this example, the ListItem component will occupy 9 grid columns on screens on screens up to 600px, after which point it will occupy 10, whereas the IconButton will occupy 3 columns on screens up to 600px, and beyond it will occupy 2.

If you followed along with the above, your app should be looking something like this:

Let’s apply our breakpoints a bit more, and make this just a little bit prettier:

// GroceryList.jsx

{/* ...Imports */}

const GroceryList = ({token}) => {
{/* ...Other code */}
  if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin:'0 auto'}}>
          {Object.values (groceryItems).map (item => (
            <GroceryListItem
              item={item}
              handleitemcheck={handleItemCheck}
              key={item.id}
            />
          ))}
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Here, we’re maxing it out at 8 of 12 columns (2/3rds), and centring the component using margin: '0 auto'. With that, we should have a nice and simple list:

Make the buttons work

Ok, awesome! Now let’s add some handling logic! As I said previously, we don’t want these “gone” once we’ve checked them off, we just need them out of the way. That way, we can quickly scan previous items, see if we accidentally clicked something and recover it, etc.

We can do this a couple of ways. We could add a call to immediately add a {checked: true} prop to the item in Realtime Database. It’s real time after all. But we do like to avoid API traffic if we can. A local state will likely do the trick here.

Here’s what we’re going to do:

Create a list of items that have been selected
Display them in a distinct manner, separate from the remaining items

In GroceryList.jsx, add the state:

const GroceryList = ({token}) => {
  const [checkedItems, setCheckedItems] = useState([]);
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);
  const handleItemCheck = (id) => {
       setCheckedItems(items => [...items, id]);
  };

Now in order to display these distinctly, without repeating a lot a lot of code, we can actually reuse our existing components, and then modify them based on our needs.

//GroceryList.jsx
{/* Other code*/}
return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !checkedItems.includes (item.id))
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
              />
            ))}
        </Grid>
        {checkedItems.length > 0 &&
          <Grid variant="h6" component={Typography} item xs={12} sm={8} sx={{margin:'0 auto'}}>
            Checked Items
          </Grid>}
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => checkedItems.includes (item.id))
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                checked
              />
            ))}
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Here, we’re mapping the items into two separate arrays of the GroceryListItem component. In the first, we verify that the item’s ID doesn’t match any IDs that are in the checkedItems array, then rendering the list of items. Then, we conditionally render our “Checked Items” title (checkedItems.length > 0) and the groceryItems for items that are listed in ‘Checked items’, and render those items. Note that here, we are passing the checked boolean prop, which we’ll use to differentiate checked items from unchecked ones.

//GroceryListItem.jsx
import {Grid, ListItemText, IconButton, ListItem} from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';

const GroceryListItem = ({item, handleitemcheck, checked}) => {
  const isCheckedColor = checked ? 'rgba(28,46,18,.6)' : 'unset';
  return (
    <Grid container>
      <Grid item xs={9} sm={10} component={ListItem} key={item.id}>
        <ListItemText
          primary={item.name}
          secondary={checked ?  '' : \`${item.quantity} ${item.measurement}\`}
          sx={{color:isCheckedColor}}
        />
      </Grid>
      <Grid item xs={3} sm={2} component={IconButton}  onClick={() => handleitemcheck(item.id)}>
        <CheckIcon color='success'/>
      </Grid>
    </Grid>
  );
};
export default GroceryListItem;

Here, we’re looking at the checked prop, and using that to conditionally change the colour of the checked items. You’ll notice that we also have hidden the secondary on items that have been checked off. If you’ve followed along until now, you should be able to click on one of the checks, and your screen will look something like this:

Ok but actually make the buttons work

Awesome! Now we have our main list, our checked off items are separated as we click on them. But we’re using state, which means every time we refresh the page, our checked items go back to the list. That’s not going to work. We really want to minimize API impact,

We’re going to take advantage of React Query again. First, in ‘api’, make a new file called modifyChecked.js, which will host our update function:

//modifyChecked.js
export const modifyChecked = async (groceryItem, token) => {
  const response = await fetch('/api/data', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({updatedData:{...groceryItem}}),
  });

  if (!response.ok) {
    throw new Error(`Error adding grocery item: ${response.statusText}`);
  }

  const data = await response.json();
  return data;
};

Now that we have our fetch function, we’re going to need to have the corresponding route in the backend. In the server, update ‘userRoutes.js’ to include a PUT route, used for updating records:


//userRoutes.js
import {ref, set, get, update} from 'firebase/database';

//...Other routes

router.put('/data', async (req, res, next) => {
  const { userId, updatedData } = req.body;
  try {
    await update(ref(db, \`users/${userId}/${updatedData.id}\`), updatedData)
      .then(() => {
        res.status(200).json({...updatedData});
      })
      .catch(e => {
        throw e;
      });
  } catch (error) {
    next(new Error(error.message));
  }
});
export default router;

There, we have defined the destination for PUT requests to ‘/data’. It pulls the userId (injected from the verifyToken middleware) and the item we want to update, from the request body. We then specify in the request that we are using the Firebase ‘update’ function, and then returning the object.

Now, much like we did previously when adding items to the list, we can define our side-effects and take advantage of opportunistic updating!

//...useModifyChecked.js

import {useMutation} from 'react-query';
import {modifyChecked} from '../api/modifyChecked';

export const useModifyChecked = (token, queryClient) => {
  const mutation = useMutation({
    mutationFn: (groceryItem) => modifyChecked({...groceryItem}, token),
    onMutate: async (groceryItem, isChecked) => {
      await queryClient.cancelQueries({queryKey : ['groceryItems']});
      const prevItems = queryClient.getQueryData(['groceryItems']);
      queryClient.setQueryData(['groceryItems'], (old) => {old, old[groceryItem.id] = {...groceryItem, checked: groceryItem.isChecked}});
      return {prevItems}
    },
    onError: (error, groceryItem, context) => {
      console.log ('An error occurred while checking off the grocery item: ', groceryItem, 'Error: ', error);
      queryClient.setQueryData(['groceryItems'], context.prevItems)
      return context.prevItems
    },
    onSuccess: (data  ) => {
      console.log ('Grocery checked off successfully:', data);
      },
      onSettled: () => {
        queryClient.invalidateQueries({queryKey: ['groceryItems']})
      }  
  })
  return mutation;
}

Here, we have updated the list item, making and updated the main ‘groceryList’ by invalidating and old queries to it. We’re also ensuring that if something goes wrong, we roll back to the pervious version of the list. We’ve also maintained flexibility to use it for either addition or subtraction from the list! Now let’s hook this up to the front end!

// GroceryList.jsx
import React, {useMemo} from 'react';
import {useFetchGroceryItems} from '../hooks/useFetchGroceryItems';
import {CircularProgress, Typography, Grid, List} from '@mui/material';
import GroceryListItem from './GroceryListItem';
import {useModifyChecked} from '../hooks/useModifyChecked';
import { useQueryClient } from 'react-query';

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);

  const queryClient = useQueryClient();
  const modifyChecked = useModifyChecked(token, queryClient);

  const handleItemCheck = item => {
    console.log(checkedItems?.includes (item))
    if (checkedItems?.includes (item)) {
      modifyChecked.mutate ({...item, checked: false});
    } else {
      modifyChecked.mutate ({...item, checked: true});
    }
  };

  const checkedItems = useMemo(() => {
    if (!groceryItems) {
      return [];
    }
    return Object.values(groceryItems).filter((item) => item.checked === true);
  }, [groceryItems]);

  if (isLoading || !groceryItems) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <CircularProgress />
        </Grid>
      </Grid>
    );
  }
  if (error) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <Typography variant="h6" color="error">
            Error: {error.message}
          </Typography>
        </Grid>
      </Grid>
    );
  }
  if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
              />
            ))}
        </Grid>
        {checkedItems.length > 0 &&
          <Grid
            variant="h6"
            component={Typography}
            item
            xs={12}
            sm={8}
            sx={{margin: '0 auto'}}
          >
            Checked Items
          </Grid>}
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {checkedItems.map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                checked
              />
            ))}
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Ok, that’s a big update. What have we done here? First, we have updated our imports to include out new custom hook, as well as the newly necessary useQueryClient. We’re passing the necessary token and queryClient into the custom hooks, and then we define our “handleItemClick” to use the hooks as required.

You’ll also notice that we’re taking advantage of the React useMemo hook to define our checkedItems list. This allows us to limit expensive re-renders.

You may be noticing some sub-optimal behaviours at this point, most notable, the entire page appear to refresh every time we change our list. The reason for this is how we are invalidating our queries in our Optimistic Updating.

Up to this point, all of our optimistic updates have been preformed at the list level. Meaning that when we update, we’ve been invalidating the entire list. This results in unwanted re-fetching and poor user experience. Let’s look at how we can fix it!

We’ll start in our useModifyChecked custom hook. Specifically, we’re going to be looking at the side effects.

const mutation = useMutation({
    mutationFn: (groceryItem) => modifyChecked({...groceryItem}, token),
    onMutate: async (groceryItem, isChecked) => {
      await queryClient.cancelQueries({queryKey : ['groceryItems']});
      const prevItems = queryClient.getQueryData(['groceryItems']);
      queryClient.setQueryData(['groceryItems'], (old) => {old, old[groceryItem.id] = {...groceryItem, checked: groceryItem.isChecked}});
      return {prevItems}
    },
    onError: (error, groceryItem, context) => {
      console.log ('An error occurred while checking off the grocery item: ', groceryItem, 'Error: ', error);
      queryClient.setQueryData(['groceryItems'], context.prevItems)
      return context.prevItems
    },
    onSuccess: (data  ) => {
      console.log ('Grocery checked off successfully:', data);
      },
      onSettled: () => {
        queryClient.invalidateQueries({queryKey: ['groceryItems']})
      }  
  })

Right now, when we call the useModifyChecked hook, we are immediately telling the queryClient to cancel any outbound queries to the ‘groceryItems’ list, and pushing our updated list. But we’re only updating 1 item. We can be that specific in our hook!

const mutation = useMutation({
    mutationFn: (groceryItem) => modifyChecked({...groceryItem}, token),
    onMutate: async (groceryItem) => {
      await queryClient.cancelQueries({queryKey : ['groceryItems', groceryItem.id]});
      const prevItem = queryClient.getQueryData(['groceryItems', groceryItem.id]);
      queryClient.setQueryData(['groceryItems', groceryItem.id], groceryItem);
      return {prevItem, groceryItem}
    },
    onError: (error, groceryItem, context) => {
      console.log ('An error occurred while checking off the grocery item: ', groceryItem, 'Error: ', error);
      queryClient.setQueryData(['groceryItems', groceryItem.id], context.prevItem)
      return context.prevItem
    },
    onSuccess: (data) => {
      console.log ('Grocery checked off successfully:', data);
      },
      onSettled: () => {
        queryClient.invalidateQueries({queryKey: ['groceryItems']})
      }  
  })
  return mutation;

Now, when we add an item to the checked off list, the whole page doesn’t re-render, and our code is much nicer to look at! With these changes, your updates will be much cleaner, and will not cause jarring visual changes.

Finally, let’s change the icon we use when items are checked off.

//GroceryListItem.jsx
import {Grid, ListItemText, IconButton, ListItem} from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import AutoRenewIcon from '@mui/icons-material/Autorenew';

const GroceryListItem = ({item, handleitemcheck, checked}) => {
  const isCheckedColor = checked ? 'rgba(28,46,18,.6)' : 'unset';
  return (
    <Grid container>
      <Grid item xs={9} sm={10} component={ListItem} key={item.id}>
        <ListItemText
          primary={item.name}
          secondary={checked ?  '' : \`${item.quantity} ${item.measurement}\`}
          sx={{color:isCheckedColor}}
        />
      </Grid>
      <Grid item xs={3} sm={2} component={IconButton}  onClick={() => handleitemcheck(item)}>
        {item.checked ? <AutoRenewIcon color='warning'/>:<CheckIcon color='success'/>}
      </Grid>
    </Grid>
  );
};
export default GroceryListItem;

Great! Now we’ll have a yellow icon that provides a bit more context to our users! If you’ve followed along, you should be looking something like this!

Deleting items

Awesome! Now, something we’ll want to do is actually remove these items! Let’s add a way for our users to confirm that they’re done their shopping trip, and remove the items that we’ve checked off! We’ll start by creating our front end function and hook, just as we’ve done in the past, let’s create a removeGroceryItems.js file in the ‘api’ folder:

export const removeGroceryItems = async (items, token) => {
    const response = await fetch('/api/data', {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': \`Bearer ${token}\`,
      },
      body: JSON.stringify({items}),
    });

    if (!response.ok) {
      throw new Error(\`Error deleting grocery items: ${response.statusText}\`);
    }

    const data = await response.json();
    return data;
  };

We’ve defined the function, now we can create our custom hook to use it!

import { useMutation } from 'react-query';
import { removeGroceryItems } from '../api/removeGroceryItems';

export const useRemoveItems = (token, queryClient) => {
  const mutation = useMutation((items) => removeGroceryItems(items, token), {
    onMutate: async (items) => {
      const prevItems = queryClient.getQueryData('groceryItems');
      items.forEach((item) => {
        queryClient.setQueryData(['groceryItems', item.id], (old) => ({
          ...old,
          isDeleting: true,
        }));
      });
      return { prevItems };
    },
    onError: (error, items, context) => {
      console.error(
        'An error occurred while removing grocery items:',
        items,
        'Error:',
        error
      );
      context.prevItems.forEach((item) => {
        queryClient.setQueryData(['groceryItems', item.id], item);
      });
    },
    onSettled: (data, error, items) => {
      items.forEach((item) => {
        queryClient.removeQueries(['groceryItems', item.id]);
      });
      queryClient.invalidateQueries('groceryItems');
    },
  });

  return mutation;
};

Awesome! So here, you can see that we’ve created a custom useRemoveItems hook which also returns an ‘isDeleting’ prop, which we can use to provide feedback to the users as the deletion takes place. Let’s add a “Complete Trip” button, conditional upon there being groceries checked off, which makes use of this hook. Before we get to far into that. Let’s work on cleaning up some of our GroceryList.jsx file.

Create a new CheckedItems.jsx file in the components folder, and we’ll extract the checked items in it’s own component.

// CheckedItems.jsx

import {Grid, Typography, List} from '@mui/material';
import GroceryListItem from './GroceryListItem';

const CheckedItems = ({items, handleItemCheck}) => {
  const header = items.length > 0
    ? <Grid
        variant="h6"
        component={Typography}
        item
        xs={12}
        sm={8}
        sx={{margin: '0 auto'}}
      >
        Checked Items
      </Grid>
    : '';
  return (
    <Grid container>
      {header}
      <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
        {items.map (item => (
          <GroceryListItem
            item={item}
            handleitemcheck={handleItemCheck}
            key={item.id}
            checked
          />
        ))}
      </Grid>
    </Grid>
  );
};
export default CheckedItems;

And now we can import it into our GroceryList, and use it as it’s own component!

import CheckedItems from './CheckedItems';
{/* Other imports */}

const GroceryList = ({token}) => {
    {/* Handlers, hooks, Error, and Loading*/}
if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck}/>

      </Grid>
    );
};

export default GroceryList;

Great! Now that it’s cleaner, we can import our useRemoveItems hook, and create our button!

import { useRemoveItems } from '../hooks/useRemoveItems';
{/* Other imports */}

const GroceryList = ({token}) => {

const removeItems = useRemoveItems(token, queryClient);

const handleRemoveClick = () => {
    removeItems.mutate(checkedItems)
  }

{/* Handlers, hooks, Error, and Loading*/}

if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck}/>
                <Grid container justifyContent={'center'} py={2}>
          <Grid item component={Button} disabled={!checkedItems.length} xs={2} variant='outlined' p={2} onClick={handleRemoveClick}>Complete Trip</Grid>
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Here, we have taken our hook, passed it the necessary token and client, and added the logic to our button! Now, if you give it a click…404!

We didn’t set up our back-end logic yet. Head over to userRoutes.js, and create your ‘DELETE’ route!

router.delete('/data', async (req, res, next) => {
  const { userId, items } = req.body;
  console.log(items)
  try {
    for (const item of items) {
      const itemRef = ref(db, \`users/${userId}/${item.id}\`);
      await remove(itemRef)
    }
    res.status(200).json({ message: 'Items deleted successfully' });
  } catch (error) {
    next(new Error(error.message));
  }
});

Here, we’re accepting the items array that we passed in our ‘removeGroceryItems’ function, and removing each one in sequence. Once that’s in place, you should be all set up!

We have now created an App which is capable of Creating, Reading, *Updating, and **D*eleting from our Realtime database, with authentication!

Editing and Removing items

Now that we have our CRUD logic fully set up, it’s incredibly easy to set up new ways to manipulate our items. Let’s take a look at how we can quickly edit the quantity of items.

Let’s take another look at our useModifyChecked function. When we wrote it, we really only were thinking about updating if an item was checked off or not.

//...useModifyChecked.js

import {useMutation} from 'react-query';
import {modifyChecked} from '../api/modifyChecked';

export const useModifyChecked = (token, queryClient) => {
  const mutation = useMutation({
    mutationFn: (groceryItem) => modifyChecked({...groceryItem}, token),
    onMutate: async (groceryItem) => {
      await queryClient.cancelQueries({queryKey : ['groceryItems', groceryItem.id]});
      const prevItem = queryClient.getQueryData(['groceryItems', groceryItem.id]);
      queryClient.setQueryData(['groceryItems', groceryItem.id], groceryItem);
      return {prevItem, groceryItem}
    },
    onError: (error, groceryItem, context) => {
      console.log ('An error occurred while checking off the grocery item: ', groceryItem, 'Error: ', error);
      queryClient.setQueryData(['groceryItems', groceryItem.id], context.prevItem)
      return context.prevItem
    },
    onSuccess: (data) => {
      console.log ('Grocery checked off successfully:', data);
      },
      onSettled: () => {
        queryClient.invalidateQueries({queryKey: ['groceryItems']})
      }  
  })
  return mutation;
}

When we wrote the the modifyChecked function, however, we were incredibly ambiguous, as we only pass it the object and the token:

//modifyChecked.js
export const modifyChecked = async (groceryItem, token) => {
  const response = await fetch('/api/data', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': \`Bearer ${token}\`,
    },
    body: JSON.stringify({updatedData:{...groceryItem}}),
  });

  if (!response.ok) {
    throw new Error(\`Error adding grocery item: ${response.statusText}\`);
  }

  const data = await response.json();
  return data;
};

This is great! We can re-use a lot of our code. Let’s start by renaming ‘modifyChecked’ to ‘modifyItem’

And we’ll rename ‘useModifyChecked’ to ‘useModifyItem’, and make some slight changes to our code:

//...useModifyItem.js

import { useMutation } from 'react-query';
import { modifyChecked } from '../api/modifyChecked';

export const useModifyItem = (token, queryClient) => {
  const mutation = useMutation({
    mutationFn: ({ id, updateData }) => modifyChecked({ id, ...updateData }, token),
    onMutate: async ({ id, updateData }) => {
      await queryClient.cancelQueries({ queryKey: ['groceryItems', id] });
      const prevItem = queryClient.getQueryData(['groceryItems', id]);
      const newItem = { ...prevItem, ...updateData };
      queryClient.setQueryData(['groceryItems', groceryItemId], newItem);
      return { prevItem, newItem };
    },
    onError: (error, { id }, context) => {console.log('An error occurred while updating the grocery item: ',id,'Error: ',error);
      queryClient.setQueryData(['groceryItems', groceryItemId], context.prevItem);
      return context.prevItem;
    },
    onSuccess: (data) => {console.log('Grocery item updated successfully:', data);},
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['groceryItems'] });
    },
  });
  return mutation;
};

And then we can update our items like so: mutation.mutate({ groceryItemId: 123, updateData: { checked: true } });

Let’s take a look at our updated GroceryList.jsx

// GroceryList.jsx
{/* Other imports*/}
import { useModifyItem } from '../hooks/useModifyItem';
import { useRemoveItems } from '../hooks/useRemoveItems';

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);

  const queryClient = useQueryClient();
  const modifyItem = useModifyItem(token, queryClient);
  const removeItems = useRemoveItems(token, queryClient);

    const checkedItems = useMemo(() => {
    if (!groceryItems) {
      return [];
    }
    return Object.values(groceryItems).filter((item) => item.checked === true);
  }, [groceryItems]);

    const handleItemCheck = item => {
    if (checkedItems?.includes (item)) {
      modifyItem.mutate ({...item, updateData:{checked: false}});
    } else {
      modifyItem.mutate ({...item, updateData:{checked: true}});
    }
     };

  const handleRemoveClick = () => {
    removeItems.mutate(checkedItems)
    }

{/* Loading, Errors */}

if (groceryItems)
return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                handleRemoveClick={handleRemoveClick}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck} handleRemoveClick={handleRemoveClick}/>
        <Grid container justifyContent={'center'} py={2}>
          <Grid item component={Button} disabled={!checkedItems.length} xs={6} sm={2} variant='outlined' p={2} onClick={() => handleRemoveClick(checkedItems)}>Complete trip</Grid>
        </Grid>
      </Grid>
    );
};

export default GroceryList;

Great! As you can see here, we can pass whatever kind of data we want! Let’s add some logic in each item to be able to edit them.

//GroceryListItem.jsx

import {useState} from 'react';
import {
  Grid,
  ListItemText,
  IconButton,
  ListItem,
  TextField,
  MenuItem,
} from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import AutoRenewIcon from '@mui/icons-material/Autorenew';
import EditIcon from '@mui/icons-material/Edit';
import ClearIcon from '@mui/icons-material/Clear';
import PublishedWithChangesIcon from '@mui/icons-material/PublishedWithChanges';
import commonMeasurements from '../utils/commonMeasures.js';

const GroceryListItem = ({
  item,
  handleitemcheck,
  checked,
  handleRemoveClick,
}) => {
  const [isEditable, setIsEditable] = useState (false);
  const isCheckedColor = checked ? 'rgba(28,46,18,.6)' : 'unset';
  const handleEdit = () => {
    setIsEditable (!isEditable);
  };
  const handleClick = () => {
    if (isEditable) {
      handleRemoveClick ([item]);
      return;
    }
    handleitemcheck (item);
  };
  return (
    <Grid container>
      <Grid item xs={1} component={IconButton} onClick={handleEdit}>
        {!isEditable ? <EditIcon /> : <PublishedWithChangesIcon color='success'/>}
      </Grid>
      <Grid item xs={8} sm={9} component={ListItem} key={item.id}>
        {!isEditable
          ? <ListItemText
              primary={item.name}
              secondary={checked ? '' : \`${item.quantity} ${item.measurement}\`}
              sx={{color: isCheckedColor}}
            />
          : <Grid container spacing={1}>
              <Grid item component={TextField} value={item.name} />
              <Grid item component={TextField} value={item.quantity} />
              <Grid item component={TextField} select value={item.measurement}>
                {commonMeasurements.map (unit => (
                  <MenuItem key={unit} value={unit}>
                    {unit}{item.quantity > 1 ? 's' : ''}
                  </MenuItem>
                ))}
              </Grid>
            </Grid>}
      </Grid>
      <Grid item xs={3} sm={2} component={IconButton} onClick={handleClick}>
        {isEditable
          ? <ClearIcon color="error" />
          : item.checked
              ? <AutoRenewIcon color="warning" />
              : <CheckIcon color="success" />}
      </Grid>
    </Grid>
  );
};
export default GroceryListItem;

Wow that’s a big change. But I trust you’re far along enough to know what we’re doing here. We’re passing in our props and the new new deletion handler. We’re also creating an isEditable state, and creating an associated handler to set the state.

Then, we put in an Edit button, that displays conditionally upon state as either a “publish” button or the edit icon.

We’ve also changed the way we handle the Check icon. We’ve added another conditional render, if it’s in edit mode, we now render a Deletion icon, and we also now use the handleClick handler. If isEditable === true, it will use the handleRemoveClick passed in from GroceryList.

I also want to quickly shout out that I have moved commonMeasurements from GroceryItemInputForm.jsx into it’s own file called /utils/commonMeasures.js

Now, we’re going to have to make some changes to GroceryList to update how we handle our removal logic.

//GroceryList.jsx

{/* imports */}

const GroceryList = ({token}) => {
    {/* Hooks */}

const handleItemCheck = item => {
    if (checkedItems?.includes (item)) {
      modifyItem.mutate ({...item, updateData:{checked: false}});
    } else {
      modifyItem.mutate ({...item, updateData:{checked: true}});
    }
  };

  const handleRemoveClick = (items) => {
    removeItems.mutate(items)
  }
{/* other code, Loading, Errors */}
return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                handleRemoveClick={handleRemoveClick}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck} handleRemoveClick={handleRemoveClick}/>
        <Grid container justifyContent={'center'} py={2}>
          <Grid item component={Button} disabled={!checkedItems.length} xs={6} sm={2} variant='outlined' p={2} onClick={() => handleRemoveClick(checkedItems)}>Complete trip</Grid>
        </Grid>
      </Grid>
    );

You can see we’ve updated our handleRemoveClick to be a bit more ambiguous, and we’re passing the items directly in, rather than calling the checkedItems state array. This allows some flexibility.

With those changes made, your dashboard should look a bit like this!

Lets add a bit more logic to the GroceryListItem, which will enable users the ability to cancel their modifications, as well as the actual handling of the editing logic.

const GroceryListItem = ({
  item,
  handleitemcheck,
  checked,
  handleRemoveClick,
}) => {
  const [isEditable, setIsEditable] = useState (false);
  const [inputValues, setInputValues] = useState ({
    name: item.name,
    quantity: item.quantity,
    measurement: item.measurement,
  });

  const handleChange = e => {
    setInputValues (prevValues => ({
      ...prevValues,
      [e.target.id || 'measurement']: e.target.value,
    }));
  };

    const handlePublishChanges = () => {
    onEdit (item, {
      name: inputValues.name || item.name,
      quantity: inputValues.quantity || item.quantity,
      measurement: inputValues.measurement || item.measurement,
    });
    setIsEditable (false);
  };

return (
    <Grid container alignItems={'center'}>
      <Grid item xs={2}>
        <Grid container>{isEditable &&
            <Grid item xs={12} sm={6} component={IconButton} onClick={handleEdit}>
              <ClearIcon />
            </Grid>}
          <Grid item xs={12} sm={6} component={IconButton} onClick={!isEditable ? handleEdit : handlePublishChanges}>
            {!isEditable
              ? <EditIcon />
              : <PublishedWithChangesIcon color="success" />}
          </Grid>
        </Grid>
{//...}

Alright so so far, we have created a handler to publish the changes we make, it passes the item, and our updatedData as an object into the handleItemEdit function from our GroceryList.jsx, which we are passing into the GroceryListItem as ‘onEdit’.

That function looks like this:

const handleItemEdit = (item, updateData) => {
    modifyItem.mutate({...item, updateData:{...updateData}})
  }

Ok…We need to extract some code from our GroceryListItem component. Let’s take the Grid item after our buttons, which contains the form and item text, and create a new component called ListItemForm.jsx

//ListItemForm.jsx

import {Grid, TextField, ListItem, ListItemText, MenuItem} from '@mui/material';
import {commonMeasurements} from '../utils/commonMeasures';

const ListItemForm = ({
  item,
  inputValues,
  handleChange,
  isEditable,
  checked,
}) => {
  const isCheckedColor = checked ? 'rgba(28,46,18,.6)' : 'unset';

  return (
    <Grid item xs={8} sm={8} component={ListItem} key={item.id}>
      {!isEditable
        ? <ListItemText
            primary={item.name}
            secondary={checked ? '' : \`${item.quantity} ${item.measurement}\`}
            sx={{color: isCheckedColor}}
          />
        : <Grid container spacing={1}>
            <Grid
              item
              component={TextField}
              id="name"
              value={inputValues.name}
              onChange={handleChange}
            />
            <Grid
              item
              component={TextField}
              id="quantity"
              value={inputValues.quantity}
              onChange={handleChange}
              flex={'1 1 100px'}
            />
            <Grid
              item
              component={TextField}
              select
              id="measurement"
              value={inputValues.measurement}
              onChange={handleChange}
            >
              {commonMeasurements.map (unit => (
                <MenuItem key={unit} value={unit}>
                  {unit}{item.quantity > 1 ? 's' : ''}
                </MenuItem>
              ))}
            </Grid>
          </Grid>}
    </Grid>
  );
};
export default ListItemForm;

Ok, that cleans up the GroceryListItem component significantly, the entire return body is now:

//GroceryListItem.jsx

return (
    <Grid container alignItems={'center'}>
      <Grid item xs={2}>
        <Grid container>{isEditable &&
            <Grid item xs={12} sm={6} component={IconButton} onClick={handleEdit}>
              <ClearIcon />
            </Grid>}
          <Grid item xs={12} sm={6} component={IconButton} onClick={!isEditable ? handleEdit : handlePublishChanges}>
            {!isEditable
              ? <EditIcon />
              : <PublishedWithChangesIcon color="success" />}
          </Grid>
        </Grid>
      </Grid>
      <ListItemForm item={item} inputValues={inputValues} handleChange={handleChange} isEditable={isEditable}/>
      <Grid item xs={2} component={IconButton} onClick={handleClick}>
        {isEditable
          ? <ClearIcon color="error" />
          : item.checked
              ? <AutoRenewIcon color="warning" />
              : <CheckIcon color="success" />}
      </Grid>
    </Grid>
  );

And make sure you pass the handlers into the CheckedItems from the GroceryList, too:

// GroceryList.jsx

if (groceryItems)
    return (
      <Grid container>
        <Grid item component={List} xs={12} sm={8} sx={{margin: '0 auto'}}>
          {Object.values (groceryItems)
            .filter (item => !item.checked)
            .map (item => (
              <GroceryListItem
                item={item}
                handleitemcheck={handleItemCheck}
                key={item.id}
                handleRemoveClick={handleRemoveClick}
                onEdit={handleItemEdit}
              />
            ))}
        </Grid>
        <CheckedItems items={checkedItems} handleItemCheck={handleItemCheck} handleRemoveClick={handleRemoveClick} onEdit={handleItemEdit}/>
        <Grid container justifyContent={'center'} py={2}>
          <Grid item component={Button} disabled={!checkedItems.length} xs={6} sm={2} variant='outlined' p={2} onClick={() => handleRemoveClick(checkedItems)}>Complete trip</Grid>
        </Grid>
      </Grid>
    );

If you followed along, you should now have a fully editable grocery list app that looks like this!

Wrapping up and next steps!

In this walkthrough we went a bit deeper into the FERN Stack with help from React Query and Material UI. We created our Check Items functionality, exploring the basics of how to edit a record, as well as our Complete Trip functionality, which brought us into how to remove items.

Then we dove a bit deeper into that functionality, and discovered how we can use ambiguous functions to serve our needs again and again.

We’re still not done. I’m going to keep exploring the stack in more depth, and I hope you’ll follow me along as we get this closer to a production-ready web app!

Github repo can be found here!

What’s on your Whiteboard?

Nathaniel Arfin — Fri, 21 Apr 2023 18:46:14 +0000

I like to use my whiteboard as a space to keep lasting tools, and to quickly diagram.

What’s on your whiteboard?

FERNtastic Web Development: A Starter's Walkthrough of the FERN Stack

Nathaniel Arfin — Tue, 18 Apr 2023 19:05:32 +0000

Today I’m going to walk you through my set up getting started with the FERN stack - that stands for Firebase, Express, React, Node.js. It’s a variant on the incredibly popular MERN stack. But you’ll see that by swapping out MongoDB for Firebase RTDB, we’re doing a bit more than swapping out our database provider.

For the React app, we’re going to use Vite, React Router, React Query, and Material UI. These are my preferences, by no means are they necessary! The FERN stack is flexible. We’re going serve a static React app in this walkthrough, but this stack sets you up for SSR success just as well!

For those of you who are unaware, Firebase grew from a Chat API-as-a-Service company called Envolve. The Founders quickly realized that developers were taking advantage of the powerful real-time architecture they had built to power games, platforms, and other real-time services. This spun out into Firebase, they were acquired by Google in 2014, and now offers a whole suite of products to help developers ship quality products quickly.

Firebase has a whole range of features, but in this walk-through, we’re specifically going to be focusing on Firebase Realtime Database and Firebase Authentication.

This walkthrough assumes a baseline knowledge of Node.js and React.

Getting Started

Hop into your favourite IDE and let’s get set up! Start by making and moving into your project directory, and get the project set up.

mkdir fern-stack-walkthrough && cd fern-stack-walkthrough

npm init -y

Now we’ll install express and a few dependencies we’re going to need to get started, and then make our index file.

npm install express cors dotenv path url nodemon firebase firebase-admin

touch index.js

I personally like to use ESModules (or ECMAScript Modules). You can still with Common JS if you prefer, but I’m going to change my package.json to include “’type’:’modules’”, and I’m also going to want live refreshes, so we’ll put in our start script. It should look something like this:



//package.json
{
  "name": "fern-stack-walkthrough",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
        "start": "nodemon .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "path": "^0.12.7",
    "url": "^0.11.0"
  }
}

Now that our environment is all set up, we can get coding. Head over to index.js, and import the dependancies. Take note of how we import dotenv.



//index.js
import express, {json} from 'express';
import * as dotenv from 'dotenv'
import cors from 'cors';

Now, use those dependancies to start setting up your server



//index.js
//...imports 

dotenv.config();
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
app.use(json());

app.get('/', (req, res) => res.send(\`Hello World!\\`));

app.listen(port, () => console.log(\`Express app listening on ${port}\\`))

Alright, let’s break down what we’ve done here:

First, we initialize dotenv. This allows us to process variables passed in from the .env file. We don’t have anything in there yet, but we will soon!
Defining what we’re calling our server (in this case ‘app’)
Defining the PORT that we’re running on. First we check to see if it’s defined in the environment, or we default to 3000.
Telling our app use the Cross Origin Resource Sharing middleware on all routes. In production, you’ll want to be more restrictive with your usage, but in development we’re going to allow all requests.
Using the express.json middleware on all routes. This allows us to retrieve the req.body object from any HTTP request with the Content-Type: application/json header.
Defined our ‘/’ route to return “Hello World!”
Start the app on port 3000 and listen for HTTP requests!

Fire it up with a quick npm run start and you should see something a little like this:



> fern-stack-walkthrough@1.0.0 start
> nodemon .

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node .`
Express app listening on 3000

Congratulations! Your server is up and running. You can now navigate to http://localhost:3000/ and you should see something that looks like this:

Front-end setup

Now that we have our server up and running, let’s start building our front-end! Open a new terminal window in your IDE, and let’s get started with our client!

npm create vite@latest client -- --template react

cd client

Now, before we fire it up, let’s install our dependancies:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react-router-dom react-query firebase

Now that the dependancies are all installed, head over to the vite.config.js, and we will proxy our API requests to the backend. It should look a little something like this:



// vite.config.js
import react from '@vitejs/plugin-react';

export default {
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

This is our config file for our vite server. Here, we’re telling vite to proxy any requests made to ‘/api*’ should be sent through to our express app at Port 3000 (make sure you define the correct port).

Now by default, the Vite template has a lot in it. We can safely get rid of the App.css file, anything in the public folder, anything in the assets folder, as well as the majority of the index.css and App.jsx files. At this point, your entire directory should look like:



- index.js
- package.json
- package-lock.json
- node-modules/...
- client/
  - index.html
  - vite.config.js 
  - public/
  - node-modules/...
  - src/
    - assets/
    - App.jsx
    - index.css
    - main.jsx



// client/src/App.jsx
import { useState } from 'react'

function App() {

  return (
    <div className="App">
      <h1>FERN</h1>
    </div>
  )
}

export default App



// client/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)



/* client/src/index.css */
body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
}

And with that, your website should now look like…this:

Pages and Routing

We’ll work on that soon. For now, we have the App running, and we can start getting our pages together. For now, we’re going to build some very basic pages. We’ll revisit them once we’ve set up a but more code. Create a new folder /src/pages and create the following very basic pages.



//Home.jsx

const Home = () => {
    return(<h1>Home</h1>)
}
export default Home;



//About.jsx

const About = () => {
    return(<h1>About</h1>)
};
export default About;



//Login.jsx

const Login = () => {
    return(<h1>Login</h1>)
};
export default Login;

Now that we have our pages, we have to render them! Head back to your App.jsx, and we’ll set it up to import our pages, and display them to the user!



//App.jsx

import React, { useState, useEffect, Suspense } from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

const App = () => {
  const [routes, setRoutes] = useState([]);

  useEffect(() => {
    function loadPages() {
      const context = import.meta.globEager('./pages/*.jsx');
      const routeList = [];
      for (const path in context) {
        const module = context[path];
        const pageName = path.replace('./pages/', '').replace('.jsx', '');
        const routePath = pageName === 'Home' ? '/' : \`/${pageName.toLowerCase()}\\`;
        const route = {
          path: routePath,
          component: module.default,
        };
        routeList.push(route);
      }
      setRoutes(routeList);
    }
    loadPages();
  }, []);
  return (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                element={<route.component />}
              />
            ))}
          </Routes>
        </Suspense>
    </Router>
  );
};
export default App;

Ok WOAH. That’s a lot of changes. Let’s go through how we went from our simple, 9-line App.jsx file to *that*.

Right away, you’ll notice we’re importing quite a bit more from the React library, including the Suspense component, which allows us to display a fallback component until the children have loaded.

In this case, we’re waiting for the Routes to load. Once they are loaded, we map them into the React Router component, which uses the browser location, and renders the associated component.



<Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        {routes.map((route, index) => (
          <Route
            key={index}
          path={route.path}
            element={<route.component />}
          />
        ))}
        </Routes>
     </Suspense>
 </Router>

But where did we load those components? That’s what the useEffect() is for! In there, we take advantage of the Vite import.meta.globEager() to import any component that we create in our ./pages/ directory. That means if you create an /src/pages/Contact component, you’ll also automatically have a page at https://localhost:*PORT*/contact.

From there, we iterate over each path that we’ve found in our ./pages/ directory, and we assign the Pages with names by removing the ‘.jsx’ extension, and changing it to lowercase.

We also replace ‘Home’ with ‘/’, so that it navigates to our Homepage component at the root.

We then use the setRoutes() function to update the state with our newly created pages, and render them in the previously shows code.



useEffect(() => {
    function loadPages() {
      const context = import.meta.globEager('./pages/*.jsx'); //Imports all components in the ./pages/ directory
      const routeList = [];
      for (const path in context) {
        const module = context[path];
        const pageName = path.replace('./pages/', '').replace('.jsx', '');
        const routePath = pageName === 'Home' ? '/' : `\${pageName.toLowerCase()}\\`;
        const route = {
          path: routePath,
          component: module.default,
                    pageName,
        };
        routeList.push(route);
      }
      setRoutes(routeList);
    }
    loadPages();
  }, []);

It’s important to remember that useEffect is a React Hook that lets you synchronize a component with an external system, and should be used for that purpose. In this case, the external system is the import.meta.globEager() which is a special Vite method that occurs asynchronously.

You can now visit Home (’/’), About (’/about’), and Login (’/Login), and you’ll be greeted with the very basic titles. Now that we have our pages set up, let’s start making things a bit more pretty.

Getting started with Material UI

While we really haven’t gotten into the meat of what we’re doing in terms of integration with Firebase and Auth quite yet, I’m the type of person who simply can’t work in LoFi. I don’t need it to be high design, but let’s start establishing our pages!

We’re going to start by creating a Layout context. This will enable us to keep our “always on” components, as well as our theme, well defined and easily accessible. Start by creating a new src/contexts/ folder, and create a new PageLayout.jsx file.



//PageLayout.jsx
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';

const PageLayout = ({ children }) => (
    <Grid container direction="column" minHeight="100vh">
        <Grid item xs={12} py={4}>
      <Container component="main">
        {children}
      </Container>
        </Grid>
    </Grid>
);
export default PageLayout

What we’ve made here is a context component. It accepts the children which are nested inside of it, and applies it’s context universally. We simply have to head over to our App.jsx, and wrap our pages in it.

Now, every one of our pages will have consistent spacing and basic layout. But let’s make this a bit more powerful. We’re going to use our context to add a universal Navigation Bar, and a Footer, providing users with a consistent browsing experience.



//App.jsx
import PageLayout from './contexts/PageLayout';
//...Other code
return (
    <Router>
      <PageLayout>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                element={<route.component />}
              />
            ))}
          </Routes>
        </Suspense>
        </PageLayout>
    </Router>
  );



//PageLayout.jsx

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';

const Navbar = () => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" component="div">
        My App
      </Typography>
    </Toolbar>
  </AppBar>
);

const Footer = () => (
  <Grid item xs={12} sx={{ py: 3, mt: 'auto', backgroundColor: '#f8f8f8' }}>
    <Container maxWidth="sm">
      <Typography variant="body2" color="text.secondary" align="center">
        © {new Date().getFullYear()} My first FERN App!
      </Typography>
    </Container>
  </Grid>
);

const PageLayout = ({ children }) => (
  <Grid container direction="column" minHeight="100vh">
    <Grid item xs={12}>
      <Navbar />
    </Grid>
    <Grid item xs={12} py={4}>
      <Container component="main">
        {children}
      </Container>
    </Grid>
    <Footer />
  </Grid>
);

export default PageLayout;

So in here, we’ve imported the necessary components from MUI, we’ve created a Footer which fetches the current year and returns it as our copyright date, we’ve built a Nav Bar (we’ll get to the “Nav” part soon), and we’ve added those components into our PageLayout.

If everything was implemented correctly, it should look like this:

So that’s at least an improvement over the white blank page we were seeing earlier. But now that we have the Nav Bar in place, it should at least have some functionality. In App.jsx, update the PageLayout component, and pass in the our routes state, and update the PageLayout.jsx to pass the routes into the NavBar



//App.jsx
<Router>
    <PageLayout routes={routes}>
        {/*...Routes*/}
    </PageLayout>
</Router>

Now, we can access the routes in the NavBar object, and set it up to help us actually navigate!

Now, once we’re done, our NavBar component is going to be quite large.



//PageLayout.jsx
const PageLayout = ({children, routes}) => (
    <Grid container direction="column" minHeight="100vh">
        <Grid item xs={12}>
        <Navbar routes={routes} />
    </Grid>
    <Grid item xs={12} py={4}>
      <Container component="main">
        {children}
      </Container>
    </Grid>
    <Footer />
  </Grid>
);

Before we start building it out any further, let’s move it into it’s own functional component. Create the /src/components directory, and then the NavBar.jsx file inside. Update your PageLayout.jsx to look like this:



//PageLayout.jsx
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import Navbar from '../components/NavBar';

const Footer = () => (
  <Grid item xs={12} sx={{py: 3, mt: 'auto', backgroundColor: '#f8f8f8'}}>
    <Container maxWidth="sm">
      <Typography variant="body2" color="text.secondary" align="center">
        © {new Date ().getFullYear ()} My first FERN App!
      </Typography>
    </Container>
  </Grid>
);

const PageLayout = ({children, routes}) => (
  <Grid container direction="column" minHeight="100vh">
    <Grid item xs={12}>
      <Navbar routes={routes} />
    </Grid>
    <Grid item xs={12} py={4}>
      <Container component="main">
        {children}
      </Container>
    </Grid>
    <Footer />
  </Grid>
);

export default PageLayout;

And we’ll build our our NavBar component. Currently, it should look something like this:



// /components/NavBar.jsx
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

const Navbar = () => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" component="div">
        My App
      </Typography>
    </Toolbar>
  </AppBar>
);

We’re going to update this component by: accepting the routes prop. Creating a Menu, and iterating over each of the routes to create a menu item.



const Navbar = ({routes}) => {
    return (
        <AppBar position="static">
            <Toolbar >
                <Typography variant="h6" component="div">
                    My App              
                </Typography>
        <IconButton edge="end" sx={{ml:'auto'}}>
            <MenuIcon />
        </IconButton>
                <Menu>
                    {routes.map ((route, index) => {
                        return (
                <MenuItem
                  key={index}
                  component={Link}
                  to={route.path}
                  onClick={handleMenuClose}
                >
                  {route.pageName}
                </MenuItem>
                            );
            })}
                </Menu>
      </Toolbar>
        </AppBar>)
};

In here, we have created our Menu, iterated over each of the menu items, and used the pageName of each route as the item. Now, we need to add some logic to this to make it actually work!



const Navbar = ({routes}) => {
    const [navMenuAnchorEl, setNavMenuAnchorEl] = useState (null);

    const handleMenuClick = e => {
        setNavMenuAnchorEl (e.currentTarget);
  };
  const handleMenuClose = () => {
        setNavMenuAnchorEl (null);
    };
// ...
<Menu
    anchorEl={navMenuAnchorEl}
    open={!!navMenuAnchorEl}
  MenuListProps={{
      onMouseLeave: handleMenuClose,
  }}>
}

Here, we have defined our handleMenuClick to assign our Menu’s Anchor Element to the clicked button icon as our navMenuAnchorEl. We have created the logic to open the menu when navMenuAnchorEl isn’t nullish, and when our mouse exits the Menu hover, it will close the menu by resetting the anchorEl state.

Ok awesome! But we probably don’t want our homepage in there. Let’s use the “My App” on the left to navigate home, and remove the Home item from our popover menu:



return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component={Link} to="/" sx={{textDecoration:'none', color:'white'}}>
          My App
        </Typography>
        <IconButton edge="end" onClick={handleMenuClick} sx={{ml: 'auto'}}>
          <MenuIcon />
        </IconButton>
        <Menu
          anchorEl={navMenuAnchorEl}
          open={!!navMenuAnchorEl}
          MenuListProps={{
            onMouseLeave: handleMenuClose,
          }}
        >
          {routes.map ((route, index) => {
            if (route.path === '/') return;
            return (
              <MenuItem
                key={index}
                component={Link}
                to={route.path}
                onClick={handleMenuClose}
              >
                {route.pageName}
              </MenuItem>
            );
          })}
        </Menu>
      </Toolbar>
    </AppBar>
  );

We’ve added the Link component to our Typography in order to keep it the expected colour. In our Menu component, we are skipping any routes that navigate back to ‘/’, you could also use if (route.pageName === 'Home') if you prefer. Same effect.

Great. Now we have some basics in place. Let’s start building our Auth logic!

Firebase Auth Integration

Firebase Auth is a massively powerful, drop-in solution with OAuth2.0 support, support for Sign in with Google, Twitter, SSO, SAML, and basic username and password.

That’s what we’re going to be using here. To get started, head over to console.firebase.google.com and create a new Project.

Click on the Web icon, give your app a name, and then on the next page, you should see the instructions to add the Firebase SDK. We’re going to take these values and create our Firebase instance for our app. In /src/ create a new firebaseConfig.js. It will look something like this:



// .../src/firebaseConfig.js

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR-API-KEY",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "YOURID",
  appId: "YOURAPPID",
  databaseURL: "https://DATABASENAME.firebaseio.com",
};

const app = initializeApp (firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);

export {app, auth, db};

So here, we have set up our Firebase App (app), our Auth, and our db, all in one file. To create your RTDB, in Firebase, navigate to Build ⇒ Realtime Database. You’ll then be presented with the Database URL, which you can populate into your firebaseConfig.js. Take this time to also set up Authentication. For this Walkthrough, you will need to activate Email/Password sign in.

Now we’re going to wrap our App in the Auth. Create a new file in /src/contexts called AuthProvider.jsx. Much like our PageLayout.jsx, this is a Context which will provide our User’s auth status to the entire application.



// ./src/contexts/AuthProvider.jsx
import React, { createContext, useState, useEffect } from "react";
import { auth } from "../firebaseConfig";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
    });
    return () => unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

So here, we are creating a context which all of the child elements can read from and manipulate. We’re using the useEffect hook to listen for any changes in the authentication state, and keeping the context up to date with the currentUser. When the component is unmounted or the effect dependencies change, we remove the observer by calling the unsubscribe function. And, just like with our PageLayout.jsx, we’re going to wrap the App in this context.



//App.jsx
//...other imports

import {AuthProvider} from './contexts/AuthProvider';

//...other code

return (
        <Router>
      <AuthProvider>
        <PageLayout routes={routes}>
          <Suspense fallback={<div>Loading...</div>}>
            <Routes>
              {routes.map ((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  element={<route.component />}
                />
              ))}
            </Routes>
          </Suspense>
        </PageLayout>
      </AuthProvider>
    </Router>
  );

Now that we have our AuthProvider in place, let’s create our Sign in and Sign Up page! Let’s start by creating our Login In and Sign Up forms.



// LoginForm.jsx
import React, { useState } from "react";
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { useNavigate } from "react-router-dom";
import { TextField, Button, Typography } from "@mui/material";

const LoginForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
  const auth = getAuth();

  const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      navigate("/dashboard");
    } catch (error) {
      console.error("Error signing in", error);
    }
  };
  return (
    <form onSubmit={handleSignIn}>
      <Typography variant="h5">Sign In</Typography>
      <TextField
        type="email"
        label="Email"
        variant="outlined"
        value={email}
        onChange={e => setEmail (e.target.value)}
        fullWidth
        margin="normal"
      />
      <TextField
        type="password"
        label="Password"
        variant="outlined"
        value={password}
        onChange={e => setPassword (e.target.value)}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary" fullWidth>
        Sign In
      </Button>
    </form>
  );
};

export default LoginForm;



// /components/SignUpForm.jsx
import React, { useState, useContext } from "react";
import { auth } from "../firebaseConfig";
import { AuthContext } from "../contexts/AuthProvider";
import { useNavigate } from "react-router-dom";
import { TextField, Button, Typography } from "@mui/material";

const SignUpForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { currentUser } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
        await auth.createUserWithEmailAndPassword(email, password);
        navigate("/");
      } catch (error) {
        console.error("Error signing up", error);
      }
    };

  return (
    <form onSubmit={handleSignUp}>
      <Typography variant="h5">Sign Up</Typography>
      <TextField
        type="email"
        label="Email"
        variant="outlined"
        value={email}
        onChange={e => setEmail (e.target.value)}
        fullWidth
        margin="normal"
      />
      <TextField
        type="password"
        label="Password"
        variant="outlined"
        value={password}
        onChange={e => setPassword (e.target.value)}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary" fullWidth>
        Sign Up
      </Button>
    </form>
  );
};

export default SignUpForm;

Both of these components are relatively straightforward. We’re importing the firestore/auth library, and getting our up-to-date Auth object, which we can then use to Log in or Sign up. Now, we need to render these at our Login Page!



// Login.jsx
import React, { useState } from "react";
import { Box, Button, Paper } from "@mui/material";
import LoginForm from "../components/LoginForm";
import SignUpForm from "../components/SignUpForm";

const Login = () => {
  const [showLoginForm, setShowLoginForm] = useState(true);

  const handleToggleForm = () => {
    setShowLoginForm(!showLoginForm);
  };
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
    >
      <Paper elevation={3} sx={{ p: 4 }}>
        {showLoginForm ? <LoginForm /> : <SignUpForm />}
        <Box mt={2}>
          <Button onClick={handleToggleForm}>
            {showLoginForm
              ? "Don't have an account? Sign up"
              : "Already have an account? Sign in"}
          </Button>
        </Box>
      </Paper>
    </Box>
  );
};

export default Login;

Here, we’ve imported the Login and Signup form, and we’re using a basic state to determine which form is being rendered. We have our handler function, which, when clicked, simple changes the state from it’s current state to the opposite. Then, depending on the state, we either render the Sign Up or Login Form. It should look like this!

Now, before you go and test this out, we have to make sure there’s a way that we’re testing it’s success. Right now, both the Sign up and Log In forms redirect you to the Home page after a successful sign in. That’s not really helpful! We’re going to create another context. This one will help to verify that the user is signed in, and if they aren’t we’ll shoot them off to the login page!

Let’s create another file in /src/context, this one called PrivatePage.jsx.



// PrivatePage.jsx
import { useContext } from "react";
import { Navigate } from "react-router-dom";
import { AuthContext } from "./AuthProvider";

const PrivatePage = ({ component: Component, ...rest }) => {
  const { currentUser } = useContext(AuthContext);

  return currentUser ? <Component {...rest} /> : <Navigate to="/login" replace />;
};

export default PrivatePage;

So here, we’ve imported the AuthContext, we’re accepting the component and any passed props (…rest), verifying that the currentUser exists (which means they’re signed in), otherwise redirecting them to the ‘/login’ page.

We’re also going to want to create a Private page, which is only accessible to a logged in user. Let’s create ./pages/Dashboard.jsx



// Dashboard.jsx
import React, { useContext } from "react";
import { Box, Typography } from "@mui/material";
import { AuthContext } from "../contexts/AuthProvider";

const Dashboard = () => {
  const { currentUser } = useContext(AuthContext);
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
    >
      <Typography variant="h3" mb={3}>
        Welcome to the Dashboard!
  /* // PROBLEM HERE */
  </Typography>
      <Typography variant="h5" mb={2}>
        {currentUser ? `Logged in as ${currentUser.email}` : ""}
      </Typography>
    </Box>
  );
};

export default Dashboard;

This component will display the logged in User’s email address with a very basic welcome message. Since we want this to be a Private Page, only accessible to signed in users, we’re going to have to specify it in our App.jsx file.



//App.jsx
import PrivatePage from './contexts/PrivatePage';
//...
useEffect (() => {
    function loadPages () {
      const context = import.meta.globEager ('./pages/*.jsx');
      const routeList = [];
      for (const path in context) {
        const module = context[path];
        const pageName = path.replace ('./pages/', '').replace ('.jsx', '');
        const routePath = pageName === 'Home'
          ? '/'
          : `/${pageName.toLowerCase ()}`;
        const isPrivate = pageName === 'Dashboard'; // Set isPrivate to true for Dashboard or other private pages
        const route = {
          path: routePath,
          component: module.default,
          pageName,
          isPrivate,
        };
        routeList.push (route);
      }
      setRoutes (routeList);
    }
    loadPages ();
  }, []);

//...

<Routes>
    {routes.map (
      (route, index) =>
        route.isPrivate ? 
                <Route
            key={index}
            path={route.path}
          element={<PrivatePage component={route.component} />}
         /> : 
                 <Route
             key={index}
           path={route.path}
           element={<route.component />}
          />
       )}
</Routes>

//...

Now, if we try to navigate to /dashboard without a user logged in, it will redirect us back to the homepage. We have a great way of knowing if we’re successfully logged in!

Let’s update our Login and Sign Up forms to redirect us there after successful login or sign up.



//LoginForm.jsx
const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await currentUser.signInWithEmailAndPassword(email, password);
      navigate("/dashboard"); //Updated with new location
    } catch (error) {
      console.error("Error signing in", error);
    }
  };



//SignUpForm.jsx
const handleSignUp = async (e) => {
    e.preventDefault();
    try {
        await currentUser.createUserWithEmailAndPassword(email, password);
        navigate("/dashboard"); //Updated with new location
        } catch (error) {
            console.error("Error signing up", error);
      }
    };

Once you have those completed, go sign up, and try it out! If you’re logged in and everything is set up correctly, you should see something like this!

Now, right away, you’ll notice we forgot to include a way to sign out. Let’s create that function right now. Update the AuthProvider.jsx to include:



import { useNavigate } from "react-router-dom";

export const AuthProvider = ({ children }) => {
    const navigate = useNavigate(); 
    //...
    const signOut = () => {
    auth.signOut();
        navigate("/login");
  }
  return (
    <AuthContext.Provider value={{ currentUser, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

Now, we can call signOut from any of our elements or pages within the provider. A natural place to add this is in the NavBar Menu.

Update the NavBar to import the Auth Context, and add the Sign Out menu item:



// NavBar.jsx
import {useState, useContext} from 'react';
//...
import { AuthContext } from '../contexts/AuthProvider';

const Navbar = ({routes}) => {
    const {signOut} = useContext(AuthContext);

    //...Handlers

return (
    <AppBar position="static">
      <Toolbar>
        <Typography
          variant="h6"
          component={Link}
          to="/"
          sx={{textDecoration: 'none', color: 'white'}}
        >
          My App
        </Typography>
        <IconButton edge="end" onClick={handleMenuClick} sx={{ml: 'auto'}}>
          <MenuIcon />
        </IconButton>
        <Menu
          anchorEl={navMenuAnchorEl}
          open={!!navMenuAnchorEl}
          MenuListProps={{
            onMouseLeave: handleMenuClose,
          }}
        >
          {routes.map ((route, index) => {
            if (route.path === '/') return;
            return (
              <MenuItem
                key={index}
                component={Link}
                to={route.path}
                onClick={handleMenuClose}
              >
                {route.pageName}
              </MenuItem>
            );
          })}
          <MenuItem onClick={signOut} />
        </Menu>
      </Toolbar>
    </AppBar>
  );

Something you might have noticed now, our Menu is getting a little bit cluttered. We’re displaying Login even when a user is signed in, and we have a Sign Out even if a user isn’t signed in. Let’s clean up this Menu a bit. We really want to be able to Navigate to the About page, the Login Page if not logged in and the Sign Out should be available if logged in. We’ll include the Dashboard link in there as well. It’s a nice, consistent way to navigate around.



//NavBar.jsx
import {useState, useContext} from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Menu,
  MenuItem,
  IconButton,
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import {Link} from 'react-router-dom';
import {AuthContext} from '../contexts/AuthProvider';

const Navbar = () => {
  const {signOut, currentUser} = useContext (AuthContext);
  const [navMenuAnchorEl, setNavMenuAnchorEl] = useState (null);
  const handleMenuClick = e => {
    setNavMenuAnchorEl (e.currentTarget);
  };
  const handleMenuClose = () => {
    setNavMenuAnchorEl (null);
  };
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography
          variant="h6"
          component={Link}
          to="/"
          sx={{textDecoration: 'none', color: 'white'}}
        >
          My App
        </Typography>
        <IconButton edge="end" onClick={handleMenuClick} sx={{ml: 'auto'}}>
          <MenuIcon />
        </IconButton>
        <Menu
          anchorEl={navMenuAnchorEl}
          open={!!navMenuAnchorEl}
          MenuListProps={{
            onMouseLeave: handleMenuClose,
          }}
        >
          <MenuItem component={Link} to={'/about'}>About</MenuItem>
          <MenuItem component={Link} to={'/dashboard'}>Dashboard</MenuItem>
          {currentUser
            ? <MenuItem onClick={signOut}>Sign out</MenuItem>
            : <MenuItem component={Link} to={'/login'}>Log In</MenuItem>}
        </Menu>
      </Toolbar>
    </AppBar>
  );
};
export default Navbar;

Now, we’ve neatly defined the Menu Items, and our NavBar is tidy, consistent, and contextual. We have a Dashboard for our customers, and we have our Auth all set up.

Now. Let’s get some data entry and manipulation in here!

Setting up the Database

We’ve spent a good amount of time working in React, now. It seems like a great time to navigate back up a level, and head into our server.

Last we left it, it looked like this:



//index.js

import express, {json} from 'express';
import * as dotenv from 'dotenv'
import cors from 'cors';

dotenv.config();
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
app.use(json());

app.get('/', (req, res) => res.send(`Hello World!`));

app.listen(port, () => console.log(`Express app listening on ${port}`))

We’re going to now set this up act as our API for our front end. We’re going to create endpoints to send and retrieve data, as well as validate our user request is authentic.

Just as we did in the React front end, we’re going to set up our Firebase instance.

In the root of your app, create firebase.js,



//firebase.js

import {initializeApp} from 'firebase/app';
import {getDatabase} from 'firebase/database';
import {getAuth} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR-API-KEY",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "YOURID",
  appId: "YOURAPPID",
    databaseURL: "https://DATABASENAME.firebaseio.com",
};

const firebase = initializeApp (firebaseConfig);
const auth = getAuth(firebase);
const db = getDatabase(firebase);

export {firebase, auth, db};

You’ll notice that we named this instance ‘firebase’ instead of ‘app’. That’s to avoid collisions with our express app in index.js, where we will import our app, ensuring it’s initialized as soon as the app starts.

We’re going also going to define two routes one GET, one POST, both to ‘/data’. We’ll start by defining the routes. In your root directory, create ‘userRoutes.js’.



import express from 'express';
const router = express.Router ();
import {db} from './firebase.js';
import {ref, set, get, child} from 'firebase/database';

router.get ('/data', async (req, res, next) => {
  const {userId} = req.body;
  try {
    get (ref (db, 'users', + userId)).then (snapshot => {
      if (snapshot.exists ()) {
        console.log (snapshot.val ());
        res.status (200).json (snapshot.val ());
      } else {
        console.log ('No data available');
        res.sendStatus (204);
      }
    });
  } catch (error) {
    next (new Error (error.message));
  }
});

router.post ('/data', async (req, res, next) => {
  const {userId, userData} = req.body;
  try {
    await set (ref (db, 'users/' + userId + '/' + userData.id), userData)
      .then (() => {
        res.status (200).json ({...userData});
      })
      .catch (e => {
        throw e;
      });
  } catch (error) {
    next (new Error (error.message));
  }
});

export default router;

Here, we are defining our /data routes. In our GET route, we are checking the body for the userId, and then returning a snapshot of the data in the database under that user ID.

For the POST route, we are extracting userId and userData in similar fashion, then setting the data. We also return the userData object for validation on the client side.

You will see here we are also passing the errors to next(). We’re going to set up central error handling in our index.js. This helps us keep our code clean, performant, and readable.



//index.js
import express, {json} from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import {firebase} from './firebase.js';
import userRoutes from './userRoutes.js';
dotenv.config ();
const app = express ();
const port = process.env.PORT || 3000;

app.use (cors ());
app.use (json ());

app.use (userRoutes);
app.use ('*', (req, res, next) => {
  console.log (req.baseUrl, req.method);
  next ();
});

app.use ((error, req, res, next) => {
  res.status (500).json ({error: error.message});
});

app.listen (port, () => console.log (\`Express app listening on ${port}\`));

Now, if you head to Postman, you should be able to post to localhost:3000/data with a data structured like this:

And you’ll be able to set some test data to read.

Send a GET and it will retrieve each post

‘But wait!’ I hear you calling out ‘I don’t want to use a userId every call. And this isn’t very secure!’

You’re right, voice of public opinion! You can’t set a body on a post route, and query params are lame!



{
    "userId":"testUser1",
     "userData": {
        "foo": "bar",
        "id": 1234,
        "key": "item"
    }
}



{
    "testUser1": {
        "1234": {
            "foo": "bar",
            "id": 1234,
            "key": "item"
        }
    }
}

Verify Token Middleware

We need a way to consistently validate that the user is who they say they are, and to access their userId in an easy, uniform fashion. First, we’re going to need to get our Firebase Admin credentials. In the Firebase console, navigate to Project settings, Service accounts, and click Generate Key. Create a new serviceAccount.json at your project root (make sure to add this to your .gitignore) and copy the contents of the download into that file.

Now that we have our service account credentials, we can initialize our Admin app, and create our middleware. Make a new directory called /middlewares/ and create a file called verifyToken.js.

The verifyToken.js is fairly straightforward:



import admin from 'firebase-admin';
import serviceAccount from '../serviceAccount.json' assert { type: "json" };

admin.initializeApp ({
    credential: admin.credential.cert (serviceAccount),
  });
const verifyToken = async (req, res, next) => {
  const token = req.headers.authorization.split('Bearer ')[1];
  if (!token) {
    return res.status(401).send('Unauthorized');
  }
  try {
    const decodedToken = await admin.auth()
    .verifyIdToken(token)
    req.body.user = decodedToken;
    req.body.userId = decodedToken.uid;

    next();
  } catch (error) {
    console.error(error);
    res.status(403).send('Forbidden');
  }
};

export default verifyToken;

We import the service account, initialize our Admin app, then use it to decode the Bearer token that we will pass in with our front end API call. This also extracts the decodedToken, and sets the req.user with the decodedToken object. We can then access the whole token object at req.body.user, and the userId at req.body.userId.

Now we have somewhere that will store data, a way to read that data, and a way verify that the user requesting the data is who they say they are.

Let’s head back to the Front End, and build out our requests!

Connecting the Front-end and Back-end

Alright, we have our Back end ready to go, now we need to input and display our data entries. i’ve been thinking about building a better grocery app for a while now, so I’ll start here. Because we were so ambiguous in how we defined our back-end, it’s incredibly flexible on the front end. The only mandatory field we must pass is an ID.
With that in mind, let’s get to work.

Earlier, we very briefly mentioned React Query. Let’s talk a bit more about why it’s so great. The big ones for me: 1. It handles caching and background updates - some of the biggest headaches in development, solved. 2. It works with *****any***** promise. As a result, it’s an exceptional state manager. You don’t need to write repetitive and annoying reducers, you just tell React Query where to get the data, and it gets it.

You might not see why those are so powerful right away, but as your projects grow, you’ll want a good way to share stateful data between components. React Query helps with that a lot.

First, we’re going to update our App.jsx to include our Query Client Provider.



// App.jsx

//... other imports

import { QueryClient, QueryClientProvider } from 'react-query';

const App = () => {
    {/*Other code here*/}

    const queryClient = new QueryClient();

    return (
    <Router>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <PageLayout routes={routes}>
            <Suspense fallback={<div>Loading...</div>}>
              <Routes>
                {routes.map(
                  (route, index) =>
                    route.isPrivate
                      ? <Route
                          key={index}
                          path={route.path}
                          element={<PrivatePage component={route.component} />}
                        />
                      : <Route
                          key={index}
                          path={route.path}
                          element={<route.component />}
                        />
                )}
              </Routes>
            </Suspense>
          </PageLayout>
        </AuthProvider>
      </QueryClientProvider>
    </Router>
  );
}

Now, we’re setting up our queryClient with no options, but you can customize this to suit your needs. You can define cacheTimes, staleTimes, and even throw universal errors from your QueryProvider or on a per “useQuery” or per “useMutation” instance. Now that we have that set up, let’s start building our Queries and Mutations.

Since we’re building a grocery list App, we’re going to need to add our items. Let’s start by defining our fetch function. Create a new folder '/src/api/', and make a file called addGroceryItem.js



export const addGroceryItem = async (groceryItem, token) => {
    const response = await fetch("/data", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ${token}',
      },
      body: JSON.stringify({userData: groceryItem}),
    });

    if (!response.ok) {
      throw new Error('Error adding grocery item: ${response.statusText}');
    }

    const data = await response.json();
    return data;
  };

Here, we have defined a a function which accepts a passed in groceryItem and token, which we are then sending to our back-end for retention.

Now, we want to use this with our React Query Provider, so we’re going to build a custom Hook to handle this mutation. Let’s create ‘/src/hooks’, and create useAddGroceryItem.js



//useAddGroceryItem.js
import { useMutation } from 'react-query';
import { addGroceryItem } from '../api/addGroceryItem';

export const useAddGroceryItem = (token) => {
  const mutation = useMutation((groceryItem) => addGroceryItem(groceryItem, token), {
    onError: (error) => {
      console.log('An error occurred while adding the grocery item:', error);
    },
    onSuccess: (data) => {
      console.log('Grocery item added successfully:', data);
    },
  });
  return mutation;
};

Now that we have everything set up to post a grocery item, let’s build our logic to fetch our grocery items! Much like the above, we’ll create fetchGroceryItems.js



// api/fetchGroceryItems.js
export const fetchGroceryItems = async (token) => {
  const response = await fetch(\`/data\`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': \`Bearer ${token}\`,
    },
  });

  if (!response.ok) {
    throw new Error(\`Error fetching grocery items: ${response.statusText}\\`);
  }
  const data = await response.json();
  return data;
};

And, again, like the above, we will create our useFetchGroceryItems.js hook



// hooks/useFetchGroceryItems.js
import { useQuery } from 'react-query';
import { fetchGroceryItems } from '../api/grocery';

export const useFetchGroceryItems = (token) => {
  return useQuery('groceryItems', () => fetchGroceryItems(token));
};

I want to take a second to pause here and reflect on what’s happening here. We have defined 2 functions, 1 which mutates data and 1 which returns it. React Query doesn’t care what this data is, where it comes from or how we choose to display it. It just needs to receive a Promise and optionally an Error. In this case, we are polling our ‘/data’ route, which we set up earlier, but you can (and likely will) use it for all kinds of state and data management.

Next up, we’re going to build our input form, and display it in our Dashboard. I’m going to create a new component called GroceryItemInputForm.jsx



import React, {useState} from 'react';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';

const commonMeasurements = [
  'piece',
  'fluid ounce',
  'cup',
  'pint',
  'quart',
  'gallon',
  'milliliter',
  'liter',
  'ounce',
  'pound',
  'gram',
  'kilogram',
];

const GroceryItemInputForm = ({token}) => {
  const [name, setName] = useState ('');
  const [quantity, setQuantity] = useState ('');
  const [measurement, setMeasurement] = useState ('');

  const handleSubmit = e => {
    e.preventDefault ();
    console.log ({name, quantity, measurement});
  };

  return (
    <Grid
      component="form"
      onSubmit={handleSubmit}
      noValidate
      autoComplete="off"
      container
      justifyContent={'space-between'}
      rowGap={1}
    >
      <Grid
        item
        component={TextField}
        label="Item Name"
        value={name}
        onChange={e => setName (e.target.value)}
        xs={8}
        sm={4}
        fullWidth
      />
      <Grid
        item
        component={TextField}
        label="Quantity"
        value={quantity}
        onChange={e => setQuantity (e.target.value)}
        fullWidth
        xs={3}
      />
      <Grid
        item
        component={TextField}
        select
        label="Measurement"
        value={measurement}
        onChange={e => setMeasurement (e.target.value)}
        sm={2}
        xs={8}
        fullWidth
      >
        {commonMeasurements.map (unit => (
          <MenuItem key={unit} value={unit}>
            {unit}{quantity > 1 ? 's' : ''}
          </MenuItem>
        ))}
      </Grid>
      <Grid
        component={Button}
        type="submit"
        variant="contained"
        color="primary"
        item
        xs={3}
        sm={2}
      >
        Add
      </Grid>
    </Grid>
  );
};
export default GroceryItemInputForm;

Here, we’ve used MUI’s Grid to build a nice, responsive form, which includes a dropdown menu for various common measurements. Right away, this just logs the entry for us, but it’s a great start. We’ll import this into our Dashboard.jsx for use, where we’ll also pass in the user token. To make sure we’re using the most recent token, we’re going to get it from the firebase/auth library, using the getAuth() method.



// Dashboard.jsx
import React, {useContext} from 'react';
import {Box, Typography} from '@mui/material';
import {getAuth} from 'firebase/auth';

import GroceryItemInputForm from '../components/GroceryItemInputForm';

const Dashboard = () => {

    const {currentUser} = getAuth ();

    return (
    <Box display="flex" flexDirection="column" alignItems="center">
      <Typography variant="h3" mb={3}>
        Welcome to the Dashboard!
      </Typography>
      <Typography variant="h5" mb={2}>
        {currentUser ? \`Logged in as ${currentUser.email}\\` : ''}
      </Typography>
      <GroceryItemInputForm token={currentUser.accessToken}/>
    </Box>
  );
};

export default Dashboard;

Perfect, it’s now imported into the dashboard, which should look like this:

Now, let’s hook it up to our API! Head back into the GroceryItemInputForm.jsx, lets import our custom useAddGroceryItem hook.



import { useAddGroceryItem } from '../hooks/useAddGroceryItem';

Then, inside the GroceryItemInputForm component, we’re going to accept the passed token, and create our authenticated mutation instance.



// /components/GroceryItemInputForm.jsx
//...Other Code

const GroceryItemInputForm = ({token}) => {
  const [name, setName] = useState ('');
  const [quantity, setQuantity] = useState ('');
  const [measurement, setMeasurement] = useState ('');
  const addGroceryItemMutation = useAddGroceryItem(token);

  const handleSubmit = e => {
    e.preventDefault ();
        const newItem = {name, quantity, measurement, id: Date.now ()};
        addGroceryItemMutation.mutate (newItem, {
      onSuccess: () => {
        setName ('');
        setQuantity ('');
        setMeasurement ('');
      },
    });  
    };
//...Other Code
}

Awesome! Now we can update our grocery list using our form. Notice that we’ve also included the onSuccess handler, which in this case resets the form back to default. You can use this to display a success message, navigate users as needed, and others. You also have available the onError which which can offer error handling on a per-mutation instance, and onSettled, which runs regardless of Success or Error. Read more about Mutations and side effects here.

Now that we have a way to set our grocery list, we need a way to display our Grocery items! Lets create the GroceryList.jsx component



// GroceryList.jsx
import React from 'react';
import {useFetchGroceryItems} from '../hooks/useFetchGroceryItems';
import {
  CircularProgress,
  ListItem,
  ListItemText,
  Typography,
  Grid,
  List,
} from '@mui/material';

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);
  if (isLoading) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <CircularProgress />
        </Grid>
      </Grid>
    );
  }
  if (error) {
    return (
      <Grid container py={4}>
        <Grid item xs={12} textAlign={'center'}>
          <Typography variant="h6" color="error">
            Error: {error.message}
          </Typography>
        </Grid>
      </Grid>
    );
  }
  return (
    <Grid container>
      <Grid xs={12} component={List} container>
        {Object.values (groceryItems).map (item => (
          <Grid item xs={12} component={ListItem} key={item.id}>
            <ListItemText
              primary={item.name}
              secondary={\`${item.quantity} ${item.measurement}\`}
            />
          </Grid>
        ))}
      </Grid>
    </Grid>
  );
};

export default GroceryList;

Alright, that’s a big component! with a lot going on. Let’s break it down.

As usual, we’re importing out necessary dependancies, as well as our useFetchGroceryItems custom hook. We’re taking in the token which we will pass in from the Dashboard, then we have this:

Now, if you haven’t taken the opportunity to head over to the React Query docs, now would be another great time to do so.

What we have here is a destructured Array, which we are pulling from the useFetchGroceryItems hook we built earlier.



const {
    data: groceryItems,
    error, 
    isLoading
} = useFetchGroceryItems (token);

This allows us to check and handle our Loading status, check and handle any errors, and finally display the data. Awesome. Hit save, and we’ll head to the browser to add a couple of items to our list.

That looks alright, but did you notice how long it took to update? Isn’t it called “Real Time Database”? What gives?

Well, remember how we talked about how React Query manages caching and state? Well now it’s time to learn about another awesome feature. Optimistic updates! Optimistic updates aren’t a new idea, nor are they overly complex. Essentially, you push the data to your state while pushing the data to the server you synchronize with. But what if your mutation fails, or the user cancels the mutation mid-process? That’s where React Query comes in handy. Let’s head back into our useAddGroceryItem.js file.



//useAddGroceryItem.js
import {useMutation} from 'react-query';
import {addGroceryItem} from '../api/addGroceryItem';

export const useAddGroceryItem = (token, queryClient) => {
  const mutation = useMutation ({
    mutationFn: groceryItem => addGroceryItem (groceryItem, token),
    onMutate: async (groceryItem) => {
      await queryClient.cancelQueries({queryKey : ['groceryItems']});
      const prevItems = queryClient.getQueryData(['groceryItems']);
      queryClient.setQueryData(['groceryItems'], (old) => {old, old[groceryItem.id] = groceryItem});
      return {prevItems}
    },
    onError: (error, groceryItem, context) => {
      console.log ('An error occurred while adding the grocery item: ', groceryItem, 'Error: ', error);
      queryClient.setQueryData(['groceryItems'], context.prevItems)
      return context.prevItems
    },
    onSuccess: (data, context) => {
    console.log ('Grocery item added successfully:', data);

    },
    onSettled: () => {
      queryClient.invalidateQueries({queryKey: ['groceryItems']})
    }
  });

  return mutation;
};

Remember the side effects we talked about? Now we’re showing off their real power! Let’s break down what we’re doing here: First, we define the mutationFn, what we actually want the function to DO. In this case, we’re calling our addGroceryItem function and passing in the new groceryItem with our token. Next, we’re calling the “onMutate” side effect. This is where we are performing our optimistic updates. When the mutation is called, we cancel any current occurrences of the ‘groceryItems’ query, we then get a snapshot of the current state, and push our new item into that state. We then return the previous items, passing them into our error handler.

Here, if we run into an issue, we are able to quickly log the problem, and roll back to our previous state. We could also display an error message, or redirect the user as is necessary.

Then, when the Error and Success handling have completed, we invalidate the groceryItems query, and refetch from the back-end.

Now, one thing you’ll notice here, we’ve added in the queryClient variable. That needs to be retrieved and passed in from the dashboard.



// Dashboard.jsx
import React, {useContext} from 'react';
import {Box, Typography} from '@mui/material';
import GroceryItemInputForm from '../components/GroceryItemInputForm';
import GroceryList from '../components/GroceryList';
import {getAuth} from 'firebase/auth';
import { useQueryClient } from 'react-query';

const Dashboard = () => {
  const {currentUser} = getAuth ();
  const queryClient = useQueryClient()
  const token = currentUser.accessToken;
  return !currentUser
    ? ''
    : <Box display="flex" flexDirection="column" alignItems="center">
        <Typography variant="h3" mb={3}>
          Welcome to the Dashboard!
        </Typography>
        <Typography variant="h5" mb={2}>
          {currentUser ? \`Logged in as ${currentUser.email}\\` : ''}
        </Typography>
        <GroceryItemInputForm token={token} queryClient={queryClient}/>
        <GroceryList token={token} />
      </Box>;
};

export default Dashboard;

Here, we’ve imported the useQueryClient hook from React Query, which we use to call our contextual Query Client. Remember, since we’re calling this within a single context, the cache is shared, and the mutations and queries are all interconnected. Take another look at useFetchGroceryItems:



import { useQuery } from 'react-query';
import {fetchGroceryItems} from "../api/fetchGroceryItems"

export const useFetchGroceryItems = (token) => {
  return useQuery('groceryItems', () => fetchGroceryItems(token));
};

The ‘groceryItems’ key that we’re using is unique to this hook, and it can be used to invalidate the items in this specific call, simply by using the string key and the QueryClient. Now, because we’re invalidated the query, we’re going to run into some scenarios where ‘groceryItems’ === null and we didn’t set up our GroceryList to handle that scenario.



//GroceryList.jsx

const GroceryList = ({token}) => {
  const {data: groceryItems, error, isLoading} = useFetchGroceryItems (token);

    if (isLoading || !groceryItems) {
        //Loading handler
    }

    if (error) {
        //Error handling
    }

    if (groceryItems) return (
        {/*Grocery List component*/}
    )
};

export default GroceryList;

There you have it. We’ve added some elegant handling for adding items and automatically refreshing our list on update!

Wrapping Up

By no means are we “done”, here. But we’re off to a great start. In this walkthrough, together we hooked up our Firebase Auth and Realtime Database, we created our Express server with our back-end API routes, we developed our React Front End to display and add our grocery items!

Also it runs on the Node Engine. Yay FERN!

Our next steps are going to include:

Adding a check mark to mark as completed
Edit items
Remove items
Removing completed items after a set period of time
Building the Front-end for Production
Containerizing
Hosting!

I really hope you enjoyed this walk-through, it’s my first time ever putting one together. Please let me know your thoughts and if you have any questions or comments!

You can find the completed github repo here.