DEV Community: Aodhan Hamilton

An introduction to Go, by leveraging your favorite JS flavor.

Aodhan Hamilton — Tue, 16 Jan 2024 02:25:04 +0000

I'll assume you have a comprehensive understanding of JavaScript and frontend. I'll just focus on the Go code and to familiarize ourselves a bit with Go, we'll create a simple desktop app with Wails to track our subscriptions.

Simply put Wails is like the Tauri of the Go world, they both leverage the native web view of your operating system (WebView 2 in my case as I'm developing on windows) to build desktop apps, but while Tauri uses Rust as the backend logic language, Wails uses Go.

Prerequisites

Make sure you have Go (1.18+) on your system
Make sure you have Node & NPM on your system

Wails mentions in their docs how you can download, configure and verify these tools on your system.

Install the Wails CLI

Installing the Wails CLI via go install will allow us to call the Wails cli from anywhere in our system

go install github.com/wailsapp/wails/v2/cmd/wails@latest

Generate a Wails app

Generate a wails app with React and TypeScript, via the CLI
(or with your favorite flavor. Svelte, Vue, Lit, Preact or Vanilla JS)

wails init -n myproject -t react-ts

or without TypeScript if you prefer

wails init -n myproject -t react

You can run your application in development mode by running wails dev from your project directory.

Typically package main and usually main.go are the entry point of any go program and we'll rarely need to touch this file, but this will create and run our app.
main.go

package main

import (
    "embed"
    "github.com/wailsapp/wails/v2"
    "github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
    // Create an instance of the app structure
    app := NewApp()

    // Create application with options
    err := wails.Run(&options.App{
        Title:  "Simple Suscription Tracker",
        Width:  1080,
        Height: 710,
        AssetServer: &assetserver.Options{
            Assets: assets,
        },
        BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
        OnStartup:        app.startup,
        Bind: []interface{}{
            app,
        },
    })

    if err != nil {
        println("Error:", err.Error())
    }
}

OnStartup calls a method called startup on our app instance, which is found in app.go

We define a method by using parens after the funckeyword and before the function name, passing in a the thing itself with a pointer type, which references the struct in memory.

In this case, the startup method is already defined for us

// startup is called when the app starts. The context is saved
// so we can call the runtime methods
func (a *App) startup(ctx context.Context) {
    a.ctx = ctx
}

//NOTE: CONNECTING TO A DB FROM A DESTOP APP IS NOT BEST PRACTICES AND NOT RECOMMENED, THIS IS JUST FOR LEARNING PURPOSES, TO LEARN GORM.

In this project, I'm using gorm to connect to a railway Postgres Database to persist subscriptions, so I'll create a method to connect and create the database tables if they don't already exist.

func (a *App) connectToDB() {
    err := godotenv.Load()
    if err != nil {
        log.Fatal("Error loading .env file")
        return
    }
    dsn := os.Getenv("DATABASE_URL")
    conn, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})

    if err != nil {
        log.Fatal("Error connecting to the db")
        return
    }

    db = conn
    log.Println("Connected To DB")
}

func (a *App) createTables() {
    db.AutoMigrate(&Subscription{})
}

The connectToDB func needs a string to connect to the DB an we don't want to expose it in our code, so we'll utilize gotdotenv to load the env variable from our .env and then add it to our .gitignore.

Install godotenv and gorm

go get github.com/joho/godotenv
go get -u gorm.io/gorm

And if like me, you're using Postgres, you'll need to install the driver for gorm

gorm.io/driver/postgres

You'll notice the connection is assigned to a variable db, that is outside the scope of the function. I defined it globally, so we can use it from other functions and in go, to initialize a variable without a value, we use the varkeyword and give it a type.

var db *gorm.DB

The type here is a pointer to the gorm connection.

Now we can call these two methods on our app on startup by adding them to the startup func.

func (a *App) startup(ctx context.Context) {
    a.ctx = ctx
    a.connectToDB()
    a.createTables()
}

Go has a concept of a struct, a struct defines a custom data structure

type Subscription struct {
    Id        string    `gorm:"primaryKey" json:"Id"`
    Name      string    `json:"Name"`
    Price     string    `json:"Price"`
    CreatedAt time.Time `json:"CreatedAt"` 
// Automatically managed by GORM for creation time
    UpdatedAt time.Time `json:"UpdatedAt"` 
// Automatically managed by GORM for update time
}

The code inside of the backticks in the struct are known as field tags, they are optional and tell certain libraries how to treat each struct field and gorm has many.

gorm:"primaryKey" is pretty self explanatory, but it specifies the column as primary key, gorm automatically uses fields named CreatedAtand UpdatedAtto automatically track the creation and update times of records.

GORM simplifies database interactions by mapping Go structs to database tables and AutoMigrateruns auto migration for given models.

Here, we migrate our subscription struct and pass in an empty struct.

func (a *App) createTables() {
    db.AutoMigrate(&Subscription{})
}

Now we have our DB setup, we'll define some functions to be called from our frontend. You'll notice these functions are capitalized here too, that's to ensure they can be exported from that package.

func (a *App) GetAllRecords() (string, error) {
    var subscriptions []Subscription
    result := db.Find(&subscriptions)

    if result.Error != nil {
        log.Fatalln("Error executing query:", result.Error)
    }

    data, err := json.Marshal(subscriptions)
    if err != nil {
        log.Fatalf("Failed to marshal data: %v", err)
    }

    return string(data), nil
}

func (a *App) CreateRecord(name string, price string) {

    v4, err := uuid.NewRandom()
    if err != nil {
        log.Println("Error creating uuid", err)
        return
    }

    v4Str := v4.String()
    log.Println(name)
    log.Println(price)

    subscription := Subscription{Id: v4Str, Name: name, Price: price}
    result := db.Create(&subscription)

    log.Printf(fmt.Sprint(result.RowsAffected))
}

func (a *App) GenUUID() (string, error) {
    v4, err := uuid.NewRandom()

    if err != nil {
        return "", err
    }

    return v4.String(), nil
}

func (a *App) DeleteById(id string) {
    db.Delete(&Subscription{}, "Id = ?", id)
}

Now we can import and call our functions from our frontend.
frontend\src\App.tsx

import { CreateRecord, GetAllRecords } from "../wailsjs/go/main/App";

If you'd like me to cover what I'm doing in the TS and cover more of the go code, let me know.

The github repo can be found here

Autocompleting API Responses for the zod curious

Aodhan Hamilton — Thu, 01 Jun 2023 04:17:51 +0000

Zod's popularity has been and is really picking up right now and I'm sure there's a large number of tutorials and explainers out there, but today we'll attempt to precisely go over, arguably the greatest and one of my personal favourite use cases, API Response Typesafety.

Not only would we like Typesafety, but sometimes we don't need or want all the data we get back from our API's... So let's do both with Zod

TL:DR If you haven't heard of Zod, it's a small, zero dependency, validation library. Zod plays extremely nice with TypeScript, but it works with plain JavaScript too!

I've implemented this in a single file in the new stable Next.JS 13.4 app directory, to demonstrate this, but you might want to split these up.

Install Zod
npm install zod or yarn add zod

First import z from Zod and define a validation schema. This defines an array of one or more objects that have an id, title, date and uri, which are all strings.

import { z } from "zod";
const parsedResults = z.array(
    z.object({
        id: z.string(),
        title: z.string(),
        date: z.string(),
        uri: z.string(),
    })
);

We can also use our validation schema to infer a TypeScript type for extra typesafety too.

type ParsedEpisodes = z.infer<typeof parsedResults>;

To demonstrate, we'll use the Learn with Jason API
and as you can see, we get back quite a bit of information for each episode/

"host": {
"image": "https://cdn.sanity.io/images/vnkupgyb/production/11b8e51d90b26838de71904294430279b7099995-700x700.jpg",
"name": "Jason Lengstorf",
"twitter": "jlengstorf"
},
"tags": [
{
"label": "Testing",
"slug": "testing",
"uri": "https://www.learnwithjason.dev/topic/testing"
}
],
"id": "83a25cf4-dc5a-4b6b-a77e-375822dc815c",
"title": "Component-driven development with Faker.js",
"slug": "component-driven-development-with-faker-js",
"description": "Using realistic data for dev helps create more resilient code in less time. Jessica Sachs will teach us how to use component-driven dev + Faker.JS to build better code faster.",
"uri": "https://www.learnwithjason.dev/component-driven-development-with-faker-js",
"date": "2023-06-16T16:30:00.000Z",
"guest": {
"image": "https://cdn.sanity.io/images/vnkupgyb/production/02354409cec8d403fa78daf21e9c748e98eb699b-2316x2316.jpg",
"name": "Jessica Sachs",
"twitter": "_jessicasachs"
}

We only what the id, title, date and uri in the validation schema we defined earlier, so we pass the returned response from our API request, into the safeParse method of the validation schema

    const res = await fetch(`https://www.learnwithjason.dev/api/v2/schedule`, {
        method: "GET",
    });
    let episodes = await res.json();
    const validatedData = parsedResults.safeParse(episodes);
    let parsedEpisodes: ParsedEpisodes;
    if (validatedData.success) {
        parsedEpisodes = validatedData.data;
        console.log(parsedEpisodes);
    } else {
        console.log("some error");
    }

Using the safeParse method, we get back an object with a success boolean and our data if there is sufficient data to satisfy our validation schema.

{
  "success": true,
  "data": [
    {
      "id": "da1679e9-9834-4ee5-8e29-199ce6cca463",
      "title": "Redux in 2023: What you need to know",
      "date": "2023-06-08T16:30:00.000Z",
      "uri": "https://www.learnwithjason.dev/redux-in-2023-what-you-need-to-know"
    },
    {
      "id": "83a25cf4-dc5a-4b6b-a77e-375822dc815c",
      "title": "Component-driven development with Faker.js",
      "date": "2023-06-16T16:30:00.000Z",
      "uri": "https://www.learnwithjason.dev/component-driven-development-with-faker-js"
    }
  ]
}

As we have defined and inferred our TypeScript type above that we expected to get back from the API, we can use it to get our nice auto complete elsewhere in our code e.g like I have done by simply mapping over the typed data.


<main className="flex min-h-screen flex-col items-center  p-24">
            {parsedEpisodes!.map((ep) => (
                <div
                    className="w-3/5 h-[150px] ring ring-gray-950 rounded-md my-5 flex flex-col items-center"
                    key={ep.id}
                >
                    <div>{ep.title}</div>
                    <div>{ep.title}</div>
                </div>
            ))}
        </main>

There's a whole lot more that Zod can do, but this is my powerful and favourite use case.

I didn't like the way the Twitter UI looked on my smaller screen, so I made a quick extension to fix that

Aodhan Hamilton — Mon, 02 Jan 2023 02:31:36 +0000

Today we'll learn one of the most basic, but most powerful feature of a chrome extension... the content script. Code along with me or clone my repo to add it to your chrome.

If you'd like to further with your extension, here are some helpful docs.

Extensions: https://developer.chrome.com/docs/extensions/
Manifest: https://developer.chrome.com/docs/extensions/mv3/manifest/
API reference: https://developer.chrome.com/docs/extensions/reference/
Service workers: https://developer.chrome.com/docs/workbox/service-worker-overview/

In a new directory, create a manifest.json file, it's the most important file of any extension and ties the whole thing together.
It's fairly self explanatory defines a content script that will run any twitter twitter path, after the page loads (as defined by "matches": ["https://twitter.com/*"])

{
  "manifest_version": 3,
  "name": "Twitter Blue hider",
  "version": "1.0.0",
  "description": "Simply hides the Twitter Blue button on twitter, makes the UI nicer on a smaller screens.",
  "icons": {
    "16": "twitter.png",
    "48": "twitter.png",
    "128": "twitter.png"
  },
  "action": {
    "default_icons": {
      "16": "twitter.png",
      "48": "twitter.png",
      "128": "twitter.png"
    },
    "default_title": "Twitter Blue hider"
  },
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["twitter.css"]
    }
  ]
}

The script simply runs the CSS in twitter.css and targets an a tag inside the nav with an aria-label attribute of "Twitter Blue" and sets the display to none.

nav [aria-label='Twitter Blue'] {
  display: none;
}

The extension is so simple in terms of function, now lets add it to our browser. Go to chrome://extensions/ in Chrome, Toggle on Developer Mode, click load unpacked and select the directory of your project.

I was afraid of TS, now my blog is written in it and I love it.

Aodhan Hamilton — Tue, 20 Dec 2022 13:26:16 +0000

In this article, we'll get acquainted with TypeScript, tailwind and the dev.to api in a super friendly. As you'll see, its super simple to get started.

I finally decided to put together a blog / portfolio. Right now it's super simple and retrieves articles from my dev.to account. It uses Next.JS, Tailwind CSS and TypeScript.

In the directory you'd like to create your project run

npx create-next-app@latest .

Go ahead and select yes for using TypeScript & ESLint

Now lets add Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

//globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Since we're using TypeScript, we can alter out tsconfig to make it nicer to import from our folders

//tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/types/*": ["types/*"]
    },
    ... 
}

Lets create a interface in a declaration file for the data we get back from our api, it's not all off the data we get back from the api, but it will give us nice autocomplete on the data we do care about

//devto.d.ts

export interface IDevtoPost {
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  url: string;
  edited_at: string;
  published_at: string;
}

We can then import that interface easily thanks to the modifications we made in our tsconfig

pages/index.tsx

...
import { IDevtoPost } from '@/types/devto';
...

Now we'll export a function which will retrieve the data from our api on every request. We'll use axios to help use call our api, so you'll need to install axios before using the following code.

npm install axios

pages/index.tsx
...

export async function getServerSideProps() {
  const res = await axios.get(
    'https://dev.to/api/articles?username=<YOUR USERNAME>'
  );
  return {
    props: {
      posts: res.data,
    },
  };
}

...

Let's now consume that data in our page and give it a structure with our interface

pages/index.tsx

...
export default function Home({ posts }: { posts: IDevtoPost[] }) {
  return <></>;
}

...

We use prop deconstructing to pass the posts into our page and define the data that comes back from getServerSideProps, as an array of IDevtoPost interfaces with : { posts: IDevtoPost[] }

Bellow is the data we get back from getServerSideProps, just to give you an idea

Now lets create a post component to display that data, this one will utilize the tailwind library (for the sake of time, I won't go into detail on every component I've created here).

components/post

import { IDevtoPost } from '@/types/devto';
import Link from 'next/link';
const post = ({ post }: { post: IDevtoPost }) => {
  return (
    <div className="w-11/12 h-30 flex flex-col bg-gray-50 dark:bg-black mt-6 mb-2 border border-gray-200 hover:scale-110">
      <h2 className="mt-4 mb-1 ml-4 text-sm sm:text-base"> {post.title} </h2>
      <span className="ml-4 mb-1 italic text-xs sm:text-sm">
        Publish date: {post.readable_publish_date}
      </span>
      <Link href={post.url} className="mb-4">
        <span className="ml-4 italic text-xs">Read on Dev.to</span>
      </Link>
    </div>
  );
};

export default post;

We import our interface again and define the structure of the data the component receives, except this time, it's not an array of interfaces, but just the interface itself, since we'll map through the posts array.

The brief overview of tailwind CSS is, it's shorthand vanilla CSS. In the bellow code

w-11/12 is the equivalent of width: 91.666667%;
flex is the equivalent of display: flex
flex-col is the equivalent of flex-direction: column

<div className="w-11/12 h-30 flex flex-col bg-gray-50 dark:bg-black mt-6 mb-2 border border-gray-200 hover:scale-110">

Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled. By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually using the ‘class’ strategy.

therefore

dark:bg-black is the equivalent of background-color: black; when the users preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
hover:scale-110 will scale to 1.1 when hovered

Out of the box, tailwind does not understand scale-110 however we can extend the tailwind theme

//tailwind.config.js

...
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      scale: {
        110: '1.1',
      },
    },
  },
};

See more in the Tailwind docs
and check out this cheetsheet for more help.

Finally to not make this article too long, lets just quickly touch on we can utilize an earlier technique we used and import our post component and map over the data we received

pages/index.tsx

...
import Post from '@/components/post';

export default function Home({ posts }: { posts: IDevtoPost[] }) {
  return (<>
{posts.map((post) => (
 <Post key={post.id} post={post} />
))}
</>)

you can view the complete code here
you can also view the final project here

Responsive layout in Next.js with Chakra-ui

Aodhan Hamilton — Fri, 27 May 2022 06:43:36 +0000

Earlier this week I posted an article on responsive and custom components with Chakra-ui in next Next.js.

I wanted to write a follow up and focus on a responsive layout, and the Chakra-ui Grid Component makes it a breeze and pleasure to do so.

I've made a small demo, displaying some friends on a small profile-like card, building on top of what I explained in my previous article


//pages/index.js

const Home = () => {
  const mainRef = useRef();
  const dimensions = useDimensions(mainRef, true);

  const [size, setSize] = useState('');

  useEffect(() => {
    if (dimensions) {
      let width = dimensions.borderBox.width;
      switch (true) {
        case width < 499:
          setSize('base');
          break;
        case width >= 499 && width < 696:
          setSize('sm');
          break;
        case width >= 696 && width < 945:
          setSize('md');
          break;
        case width >= 945:
          setSize('lg');
          break;
      }
    }
  }, [dimensions]);

  return (
    <>
      <Nav />
      <Box
        w="100vw"
        h="100vh"
        display="flex"
        justifyContent="center"
        ref={mainRef}
        alignItems="flex-start"
        as="main"
      >
        <Layout>
          <MyGrid />
          <Box fontSize={{ base: '20px', sm: '24px' }} mt="30px">
            <Text display="flex" justifyContent="center">
              Width: {dimensions && dimensions.borderBox.width}px
            </Text>
            <Text display="flex" justifyContent="center">
              Custom breakpoint size: {size}
            </Text>
          </Box>
        </Layout>
      </Box>
    </>
  );
};
export default Home;

The index component returns a React Fragment containing a simple custom Nav component and a Layout container component to house our Grid component.


//components/MyGrid.js

import profiles from '../profiles.json';

const MyGrid = () => {
  return (
    <>
      <Grid
        templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}
        h="100%"
        gap="10px"
        overflow="auto"
        css={{
          '&::-webkit-scrollbar': {
            width: '4px',
          },
          '&::-webkit-scrollbar-track': {
            width: '6px',
          },
          '&::-webkit-scrollbar-thumb': {
            background: 'primary',
            borderRadius: '24px',
          },
        }}
      >
        {profiles.map((profile) => (
          <GridItem
            key={profile.id}
            h="150px"
            bg="primary"
            borderRadius="10"
            color="white"
            display="flex"
            pl={{ base: '10px', sm: '25px', lg: '15px' }}
            alignItems="center"
          >
            <Box display="flex" alignItems="center">
              <ItemAvatar imageSrc={profile.imageSrc} name={profile.name} />
            </Box>
            <Details
              name={profile.name}
              title={profile.title}
              link={profile.linkSrc}
            />
          </GridItem>
        ))}
      </Grid>
    </>
  );
};

export default MyGrid;

The Grid component imports a json file from our root and we map over that data and for each object in that array, we return a Grid Item from Chakra, with an Avatar component from Chakra and our own custom Details component inside.


//components/Details.js

import { Box, Text } from '@chakra-ui/react';
import Link from 'next/link';

const Details = ({ name, title, link }) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      pl={{ base: '10px', sm: '25px', lg: '15px' }}
      fontSize={{ base: '12px', sm: '14px', md: '16px', lg: '14px' }}
    >
      <Text fontSize="20px"> {name} </Text>
      <Text as="i">{title}</Text>
      <Text color="#03fcfc" as="i">
        <Link href={link}>{link}</Link>
      </Text>
    </Box>
  );
};

export default Details;

Throughout this article, you notice the {{base: 'someValue', sm: 'someValue', ...}} syntax on some of the components props and you can see me explain it in more depth in my other article, but to summarize, it tells the prop to be a certain value, based on the custom breakpoints we defined in the theme.


//styles/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '499px',
    md: '696px',
    lg: '945px',
  },
});

export default theme;

Finally, to help us visualize our breakpoints, we can utilize a hook from Chakra to get the the width of our Box that wraps our Layout component and store it in state, and it will update in a useEffect every time on the component resize.


import { useRef, useState, useEffect } from 'react';
import { Box, Text } from '@chakra-ui/react';
import MyGrid from '../components/MyGrid';
import Layout from '../components/Layout';
import Nav from '../components/Nav';
import { useDimensions } from '@chakra-ui/react';

const Home = () => {
  const mainRef = useRef();
  const dimensions = useDimensions(mainRef, true);

  const [size, setSize] = useState('');

  useEffect(() => {
    if (dimensions) {
      let width = dimensions.borderBox.width;
      switch (true) {
        case width < 499:
          setSize('base');
          break;
        case width >= 499 && width < 696:
          setSize('sm');
          break;
        case width >= 696 && width < 945:
          setSize('md');
          break;
        case width >= 945:
          setSize('lg');
          break;
      }
    }
  }, [dimensions]);

  return (
    <>
      <Nav />
      <Box
        w="100vw"
        h="100vh"
        display="flex"
        justifyContent="center"
        ref={mainRef}
        alignItems="flex-start"
        as="main"
      >
        <Layout>
          <MyGrid />
          <Box fontSize={{ base: '20px', sm: '24px' }} mt="30px">
            <Text display="flex" justifyContent="center">
              Width: {dimensions && dimensions.borderBox.width}px
            </Text>
            <Text display="flex" justifyContent="center">
              Custom breakpoint size: {size}
            </Text>
          </Box>
        </Layout>
      </Box>
    </>
  );
};
export default Home;

On the initial load, the size state is a empty string const [size, setSize] = useState('') and will be updates in the useEffect, after the first render to the screen.

Every time the dimensions object from Chakra updates, it triggers the function of the useEffect. That function uses a switch statement to determine what to update the size state to.

You can see the source code here
And follow me here

Let's create some responsive and custom components with Chakra-ui in Next.js

Aodhan Hamilton — Sun, 22 May 2022 10:00:38 +0000

Firstly, I'll assume you have a NextJS project already set-up, if not, you can follow your preferred configuration Here, then we'll setup Chakra for Next. The First bit's of code we'll write, is to customize some global values.

Overwrite Colors & Breakpoints

Below, we'll overwrite the default primary color and breakpoints



//styles/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

Use Our Overwrites

To use our custom values, we first pass the theme into our ChakraProvider from the Setup.



//pages/_app.js

import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/ChakraTheme.js';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Use Our Custom Color

Then we can use our custom values in our components



//pages/Home.js
import { Box } from '@chakra-ui/react'; /* <== A Box is a Chakra-ui component,  equivalent to a div, but one you can style  with style props or those from out custom theme**/

const Home = () => {
  return (
    <Box bg='primary'>Home</Box> 
  )
}
export default Home

bg is a style prop and shorthand in Chakra-ui for background-color and will give our Box that color we overwrote primary to be in out custom theme

Use Our Custom Breakpoints

To use our custom breakpoints, we pass them in an object to a style prop e.g




import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}>Home</Box> 
  )
}

export default Home

base: '18px' The font-size of 18px will apply from 0px- 414px viewport width

sm: '20px' The font-size of 20px will apply from 414px- 584px viewport width

md: '24px' The font-size of 24px will apply from 584px- 1280px viewport width

lg: '32px' The font-size of 32px will apply from 1280px- and up viewport width

Overwrite a component

Now lets overwrite a component

/styles/components/Button.js




const Button = {
  // Styles for the base style
  baseStyle: {
    borderRadius: '10px', 
    fontFamily: 'Baloo 2',
    // <-- border radius & font family is same for all variants and sizes
  },
sizes: {
  // Styles to be to be applied when passed to the Button
  // E.g <Button size='md'>Click</Button>
    sm: {
      fontSize: '12px',
    },
    md: {
      fontsize: '18px',
    },
    lg: {
      fontSize: '22px',
    },
  },
    // Styles for the visual style variations
  variants: {
    rainbow: {
      bgGradient:
        'linear(to-b, #ff96bc, #ffc477 , #fbe84a , #c1f3a1 , #96fce4 )',
      color: 'black',
      border: '1px solid break',
    },
  },
  //   // The default `size` or `variant` values
  //   defaultProps: {},
};

export default Button;

Add the Button to the Theme

styles/ChakraTheme.js



import { extendTheme } from '@chakra-ui/react';
import { Button } from 'import Button from './components/Button';'

const theme = extendTheme({
  components : {
  Button      
  },
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

Use The New Button Variant

Finally we'll use our new variant in a component




import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}
 > <Button variant='rainbow'>
   Log in
    </Button
</Box> 
  )
}

export default Home

Learn Responsive layouts with my follow up article

Accelerate your learning by starting with the full source code of my first project

Aodhan Hamilton — Wed, 24 Mar 2021 06:25:34 +0000

This is my very first project and I'm giving the code away to help other beginners to accelerate their learning.

This article will guide you through setting up and deploying a production-ready app and utilizes a Create-React-App (CRA) boilerplate to get us at a good starting point and Strapi for building our api end-points and auth and a Postgres DB for storing data.

The idea behind it is that it's a drinks ordering app. Users can order drinks off a menu on their phone. It's intended to be used in-house and then the orders apear on a bar management interface. Super simple app, but the concepts of this app can be used to create virtually anything, after all every app boils down to a C.R.U.D (Create. Read. Update. Delete) app.

There are three repo's that complete this app, two CRA repos and one a strapi repo. All repos are hosted as their own app on Digital Ocean's App platform, in a Microservice architecture-like setup.

The ordering (drinks-user) and the management (drinks-bar) sides of the app, build off of Create-React-App, with the drinks-app using Chakra-ui for a small bit of functionality/ animation.

I will provide the CRA repos and I encourage you to check out Thew Dhanat's article to set up and host your own Strapi app.

Don't forget to install Postgresql on the project with npm install pg before deploying on Digital Ocean and you need to create a production db separately to add it as an existing one, instead of the dev db in Thew's article if you want to do a full production build.

My repo's will be linked at the bottom of the article.

Strapi QuickStart on DigitalOcean App Platform

Thew ・ Jan 4 '21

#dohackathon #strapi

Strapi is fairly straight-forward, you generate the code visually and it's easy to get set-up with their quick-start docs.

If you need Strapi help, I strongly recommend Alex the Entreprenerd on YouTube and he has a great course on Udemy too and/or you can join Strapi's Forum or slack channel you can find through their site.

The app for people to submit orders (drinks-user) is just a form and to manage state, I'm using React-easy-state

src/state/OrderStore

import { store } from "@risingstack/react-easy-state";

const OrderStore = store({
  items: [],
  TableNum: "",
});

export default OrderStore;

I'm then importing the state whenever I need to use it, as you can see at the top of src/components/UIForm
and then the initial render, I'm getting the data from the Strapi endpoint e.g ${baseUrl}/item, with useEffect and then pushing each Item from my the request into the empty item array of the state, by pushing in a for loop on the initial fetch.

import React, { useEffect } from "react";
import Item from "./Item";
import axios from "axios";
import OrderStore from "../state/OrderStore";
import { view } from "@risingstack/react-easy-state";
const UIForm = view(({ items }) => {
  let baseUrl = process.env.REACT_APP_BASEURL;
  const getMenu = async () => {
    const menuItems = await axios.get(`${baseUrl}/items`);
    for (let i = 0; i < menuItems.data.length; i++) {
      OrderStore.items.push({
        itemName: menuItems.data[i].name,
        id: menuItems.data[i].id,
        checked: false,
      });
    }
  };

  useEffect(() => {
    getMenu();
  }, []);

...

Here I'm rendering a UIForm component with as many item components from src/components/item for many items that we get back from the endpoint.

let setInput = (e) => {
    OrderStore.TableNum = e.target.value;
  };

  let setOrder = async (e) => {
    e.preventDefault();

    for (let i = 0; i < OrderStore.items.length; i++) {
      if (OrderStore.items[i].checked === true) {
        const res = await fetch(`${baseUrl}/orders`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            drink: OrderStore.items[i].itemName,
            tableNum: OrderStore.TableNum,
          }),
        });
        const data = await res.json();
        console.log(data);
      } //If statement ends
      OrderStore.items[i].checked = false;
      console.log(
        `${OrderStore.items[i].itemName} is ${OrderStore.items[i].checked} `
      );
    } // For statement ends
    OrderStore.TableNum = "";
  };

  return (
    <div className="item-container">
      <form onSubmit={setOrder}>
        {OrderStore.items.map((item) => (
          <Item
            key={item.id}
            name={item.itemName}
            checked={item.checked}
            value={item.itemName}
            id={item.id}
          />
        ))}

        <div className="submit-div">
          <label htmlFor="tableNum" className="table-label">
            Table Number
          </label>
          <input
            type="text"
            name="tableNum"
            value={OrderStore.TableNum}
            onChange={setInput}
          ></input>
          <button>Order</button>
        </div>
      </form>
    </div>
  );
});
export default UIForm;

I'm using the Axios package to fetch data, which the official Strapi docs recommend and I prefer it to the browser fetch Api tbh. The view() wrapping the component is from the state library and assures it re-renders when the state is updated.

Above you'll see my folder structure for this repo and I recommend creating a .env file in the root directory, like I have, to save an environment variable to ensure changing the URL of the hosted app is a breeze and you only need to change it in one place, I've also set it up to work that way if you're cloning my project.

Environment variables are the way you can save api and secret keys for your projects in the same repo without uploading sensitive information to your git repos, by telling your .gitignore file, in the root directory, to ignore the file extension when uploading to git.

You'll need to prefix environment variables for React apps, with REACT_APP_ for it to work.

My CRA's .env's both have the following environment variables

//Strapi URL
REACT_APP_BASEURL=http://localhost:1337

1337 is the port that Strapi runs on in development mode and you'll notice that's the port Thew gets us to set the port of our Digital ocean app to. It's not really needed in development mode, but we've set it up for deployment, by using setting it to be storing it in a variable in our code

let baseUrl = process.env.REACT_APP_BASEURL;

Now when we deploy the repo, we can set the environment variable through Digital Ocean and it will look something like this
REACT_APP_BASEURL= https://drinks-backend-{you-unique-id}.ondigitalocean.app

You'll need to make sure you change the keys in the setOrder function of the body, where you make the post request, to be the same as the headers of the Strapi collection... see below

 body: JSON.stringify({
            drink: OrderStore.items[i].itemName,
            tableNum: OrderStore.TableNum,
          })

You'll need to do a similar thing in pages that make requests in the drinks-bar app.

Currently, the way it is, anyone can make an order and auth is only on the management app. The login page makes the auth request and stores it in state of the useContext and therefore the whole app will be able to use the user credentials.

I deployed these as separate apps on Digital Oceans App platform and to do so yourself, you can go through a similar process to Thew. Select the Repo >> Select Static site (for the CRA's)

Repeat for the other repo and done!

My Repo's

drinks-user (the order form)
drinks-bar (the bar management app)

Follow me on Twitter to give me feedback and let me know what you end up building.

Thanks for visiting my first ever piece of content!