DEV Community: Sam Preston

The making of a Google Analytics 4 NPM package.

Sam Preston — Sun, 28 May 2023 20:40:01 +0000

The Structure

After drafting the initial part of this I completely forgot about it a week later while I went to start the project. Thus I have managed to start without any documentation here. So here's the catchup:

Directory structure

.
├── .github - GitHub actions for automatic publishing to NPM on release.
├── src - The source directory, for the actual brains behind the package.
├── .env - Environment variables.
├── .gitignore - Directories and Files that Git should ignore.
├── environment.d.ts - To declare environment variable types.
├── LICENSE - Outlines the license in use. (Apache 2.0).
├── package-lock.json - Dependancy storage.
├── package.json - Project information such as description, npm scripts, and dependancies.
├── README.md - Displays information on GitHub or NPM regarding the purpose and inspiration of the project.
└── tsconfig.json - Config for TypeScript

Source Directory

.
└── src/
    ├── lib/
    │   ├── admin/
    │   │   └── .keep
    │   ├── analytics-data/
    │   │   ├── types/
    │   │   │   ├── googleAnalytics4.ts
    │   │   │   └── runReport.ts
    │   │   ├── utils/
    │   │   │   └── queryFactory.ts
    │   │   ├── index.ts
    │   │   └── README.md
    │   ├── analytics-embed
    │   ├── analytics-reporting
    │   ├── management
    │   ├── metadata
    │   ├── multi-channel-funnels-reporting
    │   ├── real-time-reporting
    │   └── user-deletion  
    └── index.ts

I wanted to breakdown the structure of the source directory within the markdown but it was too much, so I'll try to briefly discuss it here.

The lib directory contains all the APIs available for Google Analytics, I have made these as a promise to myself that I want to cover the full range of APIs made available by Google for this service. For the directories which currently have no code, I have used a .keep file. This is because Git only stores file paths, not directories, so, if you make a directory which is empty it won't be uploaded using Git, hence the use of .keep.

However, the first one I'm tackling is the one I am currently using and having a horrible time using. The "Google Analytics Data API (GA4)" is the one I am targeting first.

This is an ever changing situation as I previously said so take this structure with a grain of salt, as this is also my first OS project.

Types

The types directory is present in the relevant API directory because I wanted to follow the colocation of resources methodology. It was initially in the lib directory, but I decided if I was to store ALL the types there it would get overwhelming almost immediately.

Within the googleAnalytics4.ts are all the types related to GA4 (Google Analytics 4). The content of it would be too much to share here but it stores information regarding API Names, UI Names, and Descriptions for the metrics and dimensions GA4 has access to.

The runReport.ts file, in hindsight probably needs remaining as it's a lie. It doesn't run the report. Even though it's situated within the types directory I still believe this is poor practice. So I'll probably rename it by the time this is out. Simply, or not, it contains all the types relating to the running of a GA4 report. This includes all the parameters that can be passed in the body of the request.

Utils

The utils directory servesthe purpose of providing the framework for the entrypoint of the API: index.ts. For now it only contains queryFactory.ts. Simply this file will spit out all the restructured body, URL, and other configuration options, back to the runReport function that lives in the index.ts file.

This factory exists because of one of the hardships I currently face with using GA4. They have a very poor support for making simple GA4 calls using TypeScript. There is no type hinting and no clean API which can take changing authentication tokens which is needed in the project I'm working on. Thus I want to create a simple way for users to make these complicated queries such as nested "andGroup" statements. This factory will then take my implementation of this and transform it into the expected format that GA4 requires.

The first step to this is establishing the required GA4 format into types, then creating the simplified version I will open for the user to optionally add configurations. Then I need to create the data manipulation functions to get from A to B, all while maintaining full type-safety and type-hinting.

Judgement Call

Currently this is not how it should be built, eventually all this logic will be bundled into a Class which will be instantiated by the user and methods called to make these queries, however for now, I'm approaching it in the mind that this WILL need refactoring later.

If you want to check out the current progress of this project please go to the repo, if you have any ideas please feel free to leave a message. Cya next time.

How to Build a Nav Menu with Burger Menu Button

Sam Preston — Fri, 15 Apr 2022 01:33:24 +0000

Welcome Back!

Where we left off - GitHub

What we're doing today:

Creating a Navigation Menu

Where am I?

I did a bit more work from where we last left off, I consolidated the component styling within the Body.css file. I have completed the content for the site. Everything but state management, a contact form, and the menu are completed.

So lets start on the menu. From the design you can see the wireframe design of the menu:

From the component tree we can also identify that it doesn't belong inside the Body component so we will implement it outside and import it directly into the App component.

function App() {
  return (
    <>
      <Menu />
      <Body />
    </>
  );
}

Now we need to look at the actual design of the menu and note down the key aspects of it:

As we can see there is a dark background, a rounded corner, and a 1px border. We'll implement that with this css:

.menu {
  position: absolute;
  background: rgba(0, 6, 37, .2);
  min-width: 64px;
  width: 20%;
  max-width: 16rem;
  height: 30rem;
  border-radius: 0 0 25px 0;
  border-right: 1px solid #004762;
  border-bottom: 1px solid #004762;
}

Now we can create two more components called Navigation and Socials, and directly import them into the Menu component.

For the Navigation implementation I simply created a <nav> element around 4 <h3> elements. For the CSS I had to remember there will be a close button in the top left of the menu so I implement a :first-child selector:

nav {
  margin-left: 1rem;
}

nav>h3:first-child {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

nav > h3 {
  margin-top: 0.25em;
  margin-bottom: 1rem;
}

We're now left with:

The next part of the puzzle is creating the close button which is part of a Burger Menu component. We'll be using an outside library for ease called hamburger-react.

First we'll import it and then we'll add it to the Menu component.

import { Divide as Hamburger } from 'hamburger-react'

import Navigation from './Navigation'
import Socials from './Socials'

function Menu() {
  return (
    <div className="menu">
      <Hamburger
        size={20}
        color='#004762'
        rounded
      />
      <Navigation />
      <Socials />
    </div>
  )
}

With this all done all that is left is to add the socials and then we can start using state within the app to piece all the currently static components together.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

How to Add Content to Your Body

Sam Preston — Thu, 14 Apr 2022 13:23:05 +0000

Welcome Back!

Where we left off - GitHub

What we're doing today:

Adding content to the main body

Time for the chit chat

Now we have divided our component into a component tree and developed the areas in the DOM specifically for the content (body and footer), we can add the content.

First things first, following the principles of TDD we need to write a test within Title.test.js for the secondary heading as per the design.

test('secondary header is visible', () => {
  render(<Title />)

  const secondaryHeading = 'Full-Stack Engineer'
  screen.getByText(secondaryHeading)
})

Now running the test will fail due to us not adding the content into the Title component. However, before we can do that we need to check the design.

When creating my design I first what is called a wireframe.

Wireframing is a way to design a website service at the structural level.

From the wireframe I researched the standard pixel height for the different heading levels and using those standards designed with those specific headings in mind.

Now we can reference that wireframe with the correct heading, which for the secondary heading is <h3>.

function Title() {
  return (
    <div>
      <h1>
        Samuel Preston
      </h1>
      <h3>
        Full-Stack Engineer
      </h3>
    </div>
  )
}

Now the test passes because the content is visible when the Title component is mounted. However, the Title component isn't where we want it on the DOM:

To fix this we need to create a Title.css file and import it, I have already developed the CSS ahead of time, so here it is:

.title {
  color: white;
  text-align: center;
}

.main-title {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

This produces still not the nicest looking style but it will do until we add our font later:

We will continue this process for the rest of the components within the body:

About Me
My Skills
Portfolio
Blog

When it comes to the detailed components such as the Project and Post child components we'll add those at the end.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

How to Stop Preparing and Build

Sam Preston — Wed, 13 Apr 2022 23:24:35 +0000

Welcome Back!

Where we left off - GitHub

What we're doing today:

Building the base layer application

Start at the back

As discussed in the last chapter, we deconstructed the design into a hierarchy of components. All components within the design are built on top of 1 component... the App component.

The App component will act as the background for the webpage and will provide context across the application.

The main feature of the webpage is the light to dark vertical gradient, so we'll start there.

We'll create a new directory called Styles with the new App.css file within. We'll now import that into the App component.

import './styles/App.css'

function App() {
  return (
    <>
      Hello World!
    </>
  );
}

Using a neat website called CSS Gradient we can generate the CSS easily to create the background:

body {
  background: linear-gradient(0deg, rgba(0, 3, 10, 1) 0%, rgba(0, 25, 34, 1) 100%);
  height: 2779px;
}

Until we start adding the components I have hard coded the height in which the design specifies.

We need structure

Now we've completed the background we can start by adding the Body component into the mix.

For this we'll create a new Body component within the component directory.

The body will house the main components within the application and will be the centrepiece in which the user browses the site. However, for the mean time we'll be implementing the CSS for it for now.

Within the Body component we must first import the Body.css file, something which I forgot to do for 10 minutes. As per the Figma specification we must then create a centred black background with 80% opacity. To achieve this we implement the following:

.frame {
  background: rgba(0, 0, 0, .8);
  height: 2779px;
  width: 720px;
}

.x-center {
  margin: auto;
}

function Body() {
  return (
    <div className='frame x-center'>

    </div>
  )
}

This will product the following:

The Final Footer

Just before we finish up we'll add the framing for the footer. Following a similar process we end up with this:

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 71, 98, 0.2);
  height: 79px;
  width: 100%;
}

import '../styles/Footer.css'

function Footer() {
  return (
    <>
      <div className='footer'></div>
    </>
  )
}

The final design should look something like this currently (this is zoomed out):

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

How to Plan Your Project

Sam Preston — Tue, 12 Apr 2022 18:58:02 +0000

Welcome Back!

Where we left off - GitHub

What we're doing today:

System Design

Breaking a Design into a Component Tree

Like I said in part 1 of this series, I created the design for the website using Figma:

We can develop a diagram using Draw.io a free Google developed tool for diagrams, similar to LucidBoard and MS Visio.

Knowing the UI design of what we're trying to make allows us to visually translate the page into components. To do this we'll work from the higher level components down to bodies of text.

For my design we'll start with the whole App:

Within the App we can see that there is a vertical main body. We can call this the Body component:

Within the Body there are multiple sections:

Header
About Me
My Skills
Portfolio
Blog
Footer

We can then create components named after these sections:

The Header, About Me, My Skills, and Footer components are all non-complex and only contain bodies of text or simple buttons therefore require no further detail. However, the Portfolio, and Blog components have further detailing we can achieve.

Let's start with the Portfolio component. Within the portfolio we will have multiple projects, so we'll create a Project components. Within each Project it will have an thumbnail, a title, and a description, these can be included within the component and so will not need further detailing.

Similar to the Portfolio component the Blog component will contain posts, so we'll create a Post component. The Post component will contain a thumbnail and a title.

Before we finish up there's one detail we missed. There's a little burger menu in the top left of the page. Let's find this on the design and take a look:

How can we split this into multiple components? Well we can start by identifying that it's not in the Body component so we'll put it under the App component. With a few touches the new component diagram looks promising:

However, the Menu component will contain some lower level components. We can see from the design there is are Navigation and a Social component, so we'll add this to the diagram:

The Final Diagram

Thanks for reading, please leave feedback or any questions in the comments. Next time we'll be building the project to match the component diagram and we'll start filling out the application.

How to Write Your First React Unit Test

Sam Preston — Tue, 12 Apr 2022 00:13:43 +0000

Welcome Back!

Where we left off - GitHub

What we're doing today:

Creating a smoke test
Performing our first TDD iteration

The Three Laws of Test Driven Development

You may not write production code until you have written a failing unit test.
You may not write more of a unit test than is sufficient to fail, and not compiling is failing.
You may not write more production code than is sufficient to pass the currently failing test.

Creating your first Unit Test

Before we continue where we left off I have created a separate component for the title of the webpage called Title.tsx, I have then added this to a component directory within src:

Now we have everything setup, let's write the test.

We'll start by creating a new testing component called Title.test.js.

For this test we'll be doing something very simple, checking if the title has rendered. This test isn't something you should be doing for every body of text, however, for now it will act as an example for TDD.

test('once rendered title is visible', () => {

})

We'll start by mounting the Title component.

const { render } = require("@testing-library/react")
import Title from './Title'

test('once rendered title is visible', () => {
  render(<Title />)
})

Now to actually run the test, if you have the app already running, open a new terminal and run npm run test. So we currently have an output similar to this:

Now we need to make it fail. Let's ask it to find the title:

To get what is rendered, we need another import called screen, so we'll use that to find any element on the screen with the text "samuel preston".

const { render, screen } = require("@testing-library/react")
import Title from './Title'

test('once rendered, title is visible', () => {
  render(<Title />)

  screen.getByText(/samuel preston/i)
})

With this we'll get an output similar to this:

Now, lets write the code to satisfy this requirement. We'll head back into the Title component and create a new h1 element containing "Samuel Preston".

function Title() {
  return (
    <>
      <h1>
        Samuel Preston
      </h1>
    </>
  )
}

Now once we save the file, our testing terminal should re-run the test, you should see an output similar to this:

This marks the first iteration of our TDD journey within this project.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

How to setup React for testing

Sam Preston — Mon, 11 Apr 2022 00:21:59 +0000

Introduction

Hey all, within this I'll be going step-by-step my journey in creating my personal website which will house my portfolio and CV.

I'll be building it with React + Typescript as I do most of my projects and I'll be building it using Test Driven Development.

The Project So Far

Before deciding to blog this process I have already developed a quick sketch of the design on Figma, it currently looks like so:

I know it might not be the best design, but hey, I'm an engineer not an art student.

Setting up React

For this project I'll be using Create React App to install all the necessary dependencies, and I'll be using the TypeScript template. For this we'll just plug this into the terminal: npx create-react-app . --template typescript.

Now we'll be presented by our lovely default app.
We'll make a few changes so it's a bit simpler:

Setting up our Testing

By default Create React App installs Jest, however we'll be using React Testing Library for unit testing, and Cypress for end-to-end testing.

We'll just run npm install cypress, then we need to add "cypress:open": "cypress open" to our scripts in package.json. Finally we need to run Cypress to allow it to do it's first time install, npm run cypress:open.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

Calling and Consuming APIs with Mantine in ReactJS #3

Sam Preston — Thu, 24 Feb 2022 02:40:59 +0000

Intro

Welcome back to Part 3 of the series where I build a full frontend application using the new React Component Library Mantine. Our starting point is:

If you want to know how we got this far please check out Part 1 and work your way through to here!

Part 1 - Using an API to generate users

Today we'll be building a window at the bottom of the Navbar component to display the user and any details such as username or email.

First we have to have a userbase, but wait...we don't have any. This is where Random User Generator comes in! Using the Axios module we can request a user by querying https://randomuser.me/api/.

To begin we'll modify our current project structure and add a directory called api, and within it create User.ts.

First we need to install the Axios module into our project, this is done in the terminal with npm install axios. From here we can import it into our User.ts file.

Now we can create an exported asynchronous function called fetchRandomUser:

import axios from 'axios'

export async function fetchRandomUser() {

}

We want this function to return the result of the API call from https://randomuser.me/api/:

export async function fetchRandomUser() {
  return await axios.get('https://randomuser.me/api/')
}

However, we need to add steps for what we want to do with the data which is returned. For this we'll use . notation:

export async function fetchRandomUser() {
  return await axios.get('https://randomuser.me/api/')
    .then((response) => {
      // console.log(response.data);
      return response.data
    })
    .catch((error) => {
      console.log(error)
    })
}

This will now on a successful API call return the body of the response and if it's unsuccessful will print the error in the console.

Part 2 - Handling the API call within React

Now we need to do the API call when the page is first loaded, the first instinct is to run the fetchRandomUser function inside the useEffect hook provided by React. However, this is the last thing you want as this can cause race conditions which means sometimes it will work sometimes it will not, you do not know!

How do we do it then?! We use useCallback, useState, and useEffect all together:

Inside App.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { fetchRandomUser } from './api/User';

function App() {
  const [userData, setUserData] = useState([])

  const loadUserData = useCallback(async () => {
    setUserData(await fetchRandomUser())
  }, [])

  useEffect(() => {
    loadUserData()
    console.log(userData);
  }, [loadUserData])

  return (
    {/*Application*/
  );
}

To understand what is happening here we've created a state called userData using useState, and we're providing it an empty array as it's initial value.

We're then defining a function called loadUserData using useCallback with an asynchronous function, which sets the userData with the return value of our fetchRandomUser method created in api/User.ts inside, and an empty dependency array.

Finally we call the loadUserData function inside the userEffect, when the loadUserData function is initiated aka when the App component renders, and for debugging purposes I've added a console.log().

All of this generated the following output into the console:

Part 3 - Creating the Navbar component

Now the part where the user can see all the work we just put in. Like we did previously we'll create a new <Navbar.Section> in the components/navbar/CustomNavbat.tsx component. To specify we'll also be creating it outside of the <Group> component, as it is not to be grouped with the navigation buttons.

<Navbar.Section>
   <Button variant='subtle' fullWidth>
     User
   </Button>
</Navbar.Section>

This creates this:

Now how do we get our API data from the App component into the CustomNavbar component?

Part 4 - Little bit of drilling

Prop drilling in React is a frowned upon practice and there are plenty of React state management libraries out there such as Redux and MobX. However, for the ease of creating this walkthrough we'll just do a little bit of drilling, I will be covering state management libraries soon I promise!

To pass the data to the CustomNavbar component we'll simply add it as a prop in the component in the App.tsx file.

<CustomNavbar userData={userData} />

Now in CustomNavbar.tsx we need to import this prop as such:

function CustomNavbar({ userData }) {}

Then you can refer to the contents of the userData within the component. For example we want to print the Title, First, and Last name of the person as a sort of greeting. We can do that as such:


const { name } = userData.results[0]
const { title, first, last } = name

return (

  {/*Rest of Navbar*/}

  <Navbar.Section>
    <Button variant='subtle' fullWidth>
      {`${title} ${first[0]}. ${last}`}
    </Button>
  </Navbar.Section>
)

This produces the following:

Outro

For now this is all we will complete, later on we will be further customising the component and doing more development with the Mantine component library.

Thanks for ready, please leave a like and comment!

Creating a Custom Navbar with Mantine in ReactJS #2

Sam Preston — Sun, 20 Feb 2022 04:02:17 +0000

Intro

Welcome back (previous) to the series where I show you how to build an web application with Mantine, ReactJS with TypeScript.

Mantine is:

"A fully featured React components library"

Part 1 - Simple Theming

Mantine ships with a very useful MantineProvider this allows us to apply themes and styles globally. This is as simple as inserting it and enclosing the App component in index.tsx with it:

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

We'll use the default dark mode for now so we can create the application without going blind. To do this we need to use the theme prop.

ReactDOM.render(
  <React.StrictMode>
    <MantineProvider
      theme={{
        colorScheme: 'dark'
      }}
    >
      <App />
    </MantineProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

This changes the application to look like so:

Part 2 - Navigation

With great foresight, Mantine ships with a Section component as a child of the Navbar component so this is simply used as <Navbar.Section />.

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          <Navbar.Section>Assets/Hosts</Navbar.Section>
          <Navbar.Section>Software</Navbar.Section>
          <Navbar.Section>Configurations</Navbar.Section>
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

This creates a very ugly un-styled look to the Navbar, lets fix that by using a Button component.

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          <Navbar.Section>
            <Button>
              Assets/Hosts
            </Button>
          </Navbar.Section>

          <Navbar.Section>
            <Button>
              Software
            </Button>
          </Navbar.Section>

          <Navbar.Section>
            <Button>
              Configurations
            </Button>
          </Navbar.Section>
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

Better, however, it could be better if we styled them. To do so we can use the variant and fullWidth prop. We're going to use the subtle variant as I personally prefer it.

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          <Navbar.Section>
            <Button variant='subtle' fullWidth>
              Assets/Hosts
            </Button>
          </Navbar.Section>

          <Navbar.Section>
            <Button variant='subtle' fullWidth>
              Software
            </Button>
          </Navbar.Section>

          <Navbar.Section>
            <Button variant='subtle' fullWidth>
              Configurations
            </Button>
          </Navbar.Section>
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

As you can see it looks 10 times better than before, but **STILL **we are not done. I want to centre these vertically so they more accessible from anywhere on the page. To this we need to do some tricky CSS, we're also going to create a Group component to... group the buttons.

Personally, I like to do in-line CSS before moving it anywhere that way I only have to modify a single file. This is what I created:

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          <Group
            direction='column'
            spacing='lg'
            grow
            sx={{ margin: 'auto 0 auto 0' }}
          >
            <Navbar.Section>
              <Button variant='subtle' fullWidth>
                Assets/Hosts
              </Button>
            </Navbar.Section>

            <Navbar.Section>
              <Button variant='subtle' fullWidth>
                Software
              </Button>
            </Navbar.Section>

            <Navbar.Section>
              <Button variant='subtle' fullWidth>
                Configurations
              </Button>
            </Navbar.Section>
          </Group>
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

Let me explain the Group component quickly.

<Group
  direction='column'
  spacing='lg'
  grow
  sx={{ margin: 'auto 0 auto 0' }}
>

direction is used to define if the group is in columns or rows. spacing is used to create spaces between the components, this can be customised using themes. grow allows the components to grow horizontally if direction='column' and vertically if direction='row'. sx is used to pass in-line CSS to the component, more of my reasons for my solution can be found here.

Now before we move on let's clean it all up. I'll create a new directory under src, called components/CustomNavbar, and create the CustomNavbar.tsx file. Within it I'll cut the Navbar children and paste it into CustomNavbar.tsx.

CustomNavbar.tsx

function CustomNavbar() {
  return (
    <Group
      direction='column'
      spacing='lg'
      grow
      sx={{ margin: 'auto 0 auto 0' }}
    >
      <Navbar.Section>
        <Button variant='subtle' fullWidth>
          Assets/Hosts
        </Button>
      </Navbar.Section>

      <Navbar.Section>
        <Button variant='subtle' fullWidth>
          Software
        </Button>
      </Navbar.Section>

      <Navbar.Section>
        <Button variant='subtle' fullWidth>
          Configurations
        </Button>
      </Navbar.Section>
    </Group>
  )
}

We'll then import the new CustomNavbar component into the App.tsx file where the original code was.

App.tsx

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          <CustomNavbar />
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

Part 3 - Further Styling

We're not going to be creating anymore Navbar components and so we'll make the CSS for this global to clean up the files. We do this by moving it to the MantineProvider component in our index.tsx.

ReactDOM.render(
  <React.StrictMode>
    <MantineProvider
      theme={{
        colorScheme: 'dark'
      }}
      styles={{
        Navbar: {
          root: { height: '100vh', width: '300px' }
        }
      }}
    >
      <App />
    </MantineProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Because our CustomNavbar's Group component will be reused later in this project we'll leave the in-line styling and we'll come back to the CustomNavbar when we create users.

Conclusion

Thanks for joining me on the 2nd part to this series, please leave a like and comment if you have any questions, I will try to answer all questions. Come back next time to see further developments to the Navbar and how we'll create a User component.

Building an Application with Mantine in ReactJS #1

Sam Preston — Fri, 18 Feb 2022 02:31:07 +0000

Intro

After 1 year of learning ReactJS and frontend development I've been looking for adventure, this is when I found Mantine.

Mantine is:

"A fully featured React components library"

Mantine also provides many options for styling and even it's off-the-shelf hooks. This was something I was completely unfamiliar with. At the time I was also learning to use TypeScript within ReactJS projects and struggling.

Throughout this series of articles I'll be discussing my struggles with ReactJS with Mantine and TypeScript, and will be sharing my solutions as well has hopefully receiving some!

Part 1 - Preparing

The tool I'm building is a interface for an 'Asset Configuration Management Tool' using Ansible under the hood.

To start we'll set up the project:
npx create-react-app . --template typescript
I'll be starting the project in an already named directory hence the . in-between create-react-app and --template typescript.

This will generate the lovely create-react-app boilerplate with TypeScript already plugged in.

Second step will be removing all the boilerplate code to start from a blank canvas. Once done we'll run in the terminal npm run start. And after removing all css...

Currently we won't be structuring the codebases file structure as we'll address that as our needs evolve.

Part 2 - Building the Home Page

First we'll install Mantine:
npm install @mantine/hooks @mantine/core

To start we want a basic application format with a navigation bar for users to browse the application. Luckily this is where the first Mantine component, AppShell.

We'll import the necessary components from the Mantine Core library:



import React from 'react';
import './styles/App.css';

import { AppShell, Navbar} from '@mantine/core'

function App() {
  return (
    <div>
      Hello Dev.to!
    </div>
  );
}

export default App;

We'll now start to configure our AppShell component, note I haven't imported the Header component as we won't be requiring it for this project.



import React from 'react';
import './styles/App.css';

import { AppShell, Navbar } from '@mantine/core'

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          {/* Navbar Content */}
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

export default App;

As you can see I've set the height to the Viewport Height of 100% this mean it will extend vertical across the whole application. This is because we want to make this AppShell the backbone of the application.

Sadly you can barely see the line separator between the Navbar and the Application window here, this will change when we add custom styling.

Conclusion

Next time we'll add styling so we can see the difference between the two sections created by AppShell. Mantine have a provider which you can apply styles globally which is great for implementing a dark/light feature which we'll be doing!

Thanks for reading, let me know you opinions and hope to find you in the next one!