DEV Community: SimoneVeitch

Navigating Client-Side Routing

SimoneVeitch — Wed, 19 Jun 2024 05:03:22 +0000

Hello readers,

I'm Simone, currently enrolled in the Academi Xi Front-End Web Development: Transform course. I'm in the midst of Phase 2, which focuses on React.

After completing Phase 1, which laid the foundation for Javascript, Phase 2 introduced me to the world of React.

It took some adjustment moving from a vanilla Javascript mindset, to suddenly having to think in components, states and side effects. The biggest challenge I faced, however, was client-side routing.

I’ll tell you why.

Prior to being introduced to client-side routing the two main concepts that I was introduced to were useState and useEffect. While it took some time to get my head around these two hooks, they are more straightforward in their use.

Client-side routing introduced multiple concepts that I had to get my head around in a very brief amount of time. You need to understand all the components that make up client-side routing to get it to work on your web application and be able to troubleshoot issues that you will no doubt face when trying this out for the first time.

But first things first, why is client-side routing important? Client-side routing enables smooth navigation between different pages on your web application without making a full request to the server. This is beneficial as it leads to a faster user experience when navigating between pages.

In vanilla Javascript you will typically need to click on a link that points to a different HTML file, ie, loading an entirely new HTML document. To do this the browser has to send a request to the server for the new page, which can lead to a less smooth user experience.

Alternatively, to avoid a full page reload using vanilla Javascript, you can use Javascript to manipulate the DOM and update the content, but as it requires manual handling of the DOM it is more error prone.

While I personally find using vanilla Javascript for page navigation more simple and approachable as an aspiring front-end web developer, the benefits of using React and client-side routing outweigh those of vanilla JavaScript (if, and only if, you are building an application where page navigation is necessary).

React uses a single-page application approach, and handles routing within this, which allows for a more seamless navigation. This approach avoids full page reloads, and navigation is instead managed by React components.

Below I will take you through some key concepts relating to client-side routing with code examples from my Phase 2 React web application project.

Getting started

To get started using client-side routing you will need to install React Router, which is a library that handles routing in React applications. Without this you won’t have the components and hooks required to manage navigation and URL changes.

In your terminal add the following to install React Router

npm install react-router-dom

Then, import it into your application in the component where you need to enable client-side routing.


import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

Let me break this down before we continue.

BrowserRouter is the top level component that enables routing. It uses the HTML5 history API to manage the browser’s history stack, which is what allows you to navigate through your app using the browser's back and forward buttons.

Next, you need to wrap your components and routes in <Router> to be able to define routes and navigate between them without refreshing the page. You typically just need to do this in your top-level Router component, which in my case is index.js. You only need to do this once, as the <Router> component provides routing context to all its child components.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./Components/App";
import './index.css';


ReactDOM.render(
<Router>
  <App />
</Router>,
document.getElementById("root")
);

Now that we have that set up, we can start working on our routing context.

In my web application I have two main components that work with navigation, App and NavBar.

Starting with my App component, I import all the components that I want to navigate to.

import NavBar from "./NavBar";
import DirectoryList from "./DirectoryList";
import ResultsList from "./ResultsList";
import Contact from "./Contact";
import Tips from "./Tips";
import Home from "./Home";
import Footer from "./Footer";

I then wrap all my routes in <Switch>. The purpose of switch is that it ensures that only the first matching <Route>is rendered. This prevents multiple components from rendering at the same time, which is important to ensure a smooth user experience.

Next I wrap each component that will sit on its own page, ie, each component that I want the user to be able to navigate to, as though it’s its own page in <Route>. <Route> defines the paths and the components to render for those paths. For example, when the URL in my code is /directorylist, the DirectoryList component is rendered.

return (
     <div className="app-container">
       <NavBar />
       <Switch>
         <Route exact path="/directorylist">
           <DirectoryList list={list}/>
         </Route>
         <Route exact path="/tips">
           <Tips />
         </Route>
         <Route exact path="/contact">
           <Contact onAddOrganisation={handleAddOrganisation}/>
         </Route>
         <Route exact path="/">
           <Home />
         </Route>
         <Route
           path="/results/:category"
           render={({ match }) => (
             <ResultsList category={match.params.category} />
           )}
         />
       </Switch>
       <Footer />
     </div>
 );

There are a few props that make <Route> work as it does. You can see them all in use here:

<Route exact path="/directorylist">
           <DirectoryList list={list}/>
         </Route>

Path is the URL path to match, ‘exact’ ensures that the route matches exactly, preventing partial matches. This is especially important if you have a path that is “/” like I do for the Home component. And then there is the component to render, when the path matches, which in the above example is my DirectoryList component.

That concludes the routing context in my App component. In summary, the <Router> set up manages the routing context and determines which components to render based on the current URL.

This isn’t where the story ends though, next you need to set up the UI elements for navigating between the different routes, without that your users won’t be able to actually navigate to the different components. In my case, I manage this in my NavBar component.

Navigation interface

To start off, I again first need to import the component that enables rendering.

If you don’t plan to do any styling based on active routes you can import <Link>, but as I am, I imported <NavLink> instead. Both components render an anchor tag (<a>) and update the URL without causing a page reload. The difference is that with <Navlink> you can define styling for the active route.

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

Next, I add all the NavLinks that will appear in my navigation bar.


 return (
   <div className={`navbar ${navBackground ? "navbar-scrolled" : ""}`}>
       <button className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
               <div className="line"></div>
               <div className="line"></div>
               <div className="line"></div>
           </button>
           <div className={`nav-links ${menuOpen ? "open" : ""}`}>
     <NavLink to="/" exact className="navlink" activeClassName="active">
       Home
     </NavLink>
     <NavLink to="/directorylist" exact className="navlink" activeClassName="active">
       Directory
     </NavLink>
     <NavLink to="/tips" exact className="navlink" activeClassName="active">
       Tips
     </NavLink>
     <NavLink to="/contact" exact className="navlink" activeClassName="active">
       Contact
     </NavLink>
   </div>
   </div>
 );
}


export default NavBar;

To break down the elements in the code above, the NavBar component provides a user interface for navigation, which is imported into my App components that renders that component. The NavLinks are used to create navigable links that allow users to switch between different routes, and it also enables me to add styling to the link when it matches the current URL.

I can then define the active style in my CSS, providing a better user experience as the user will know which route is active.

The screenshot below is from my web application, and when a route is active, ie, is the page the user is currently on, the nav element has an underline.

And that is that.

Final words

In summary, I need both the Router setup in my App component for routing logic and the NavLink setup in my NavBar component for navigation UI, to ensure that users can interact with my app and navigate between different pages smoothly.

These are the most fundamental parts of client-side routing. There are other hooks that are important, like useParams and useLocation, but I won’t go in to those here.

Thanks for reading.

My flip gallery journey

SimoneVeitch — Mon, 15 Apr 2024 05:32:26 +0000

Hello readers,

I'm Simone, currently enrolled in the Academi Xi Front-End Web Development: Transform course. I'm in the midst of Phase 1, which focuses on JavaScript.

During this phase, I've gained a solid understanding of fundamental JavaScript concepts. I've learned how to manipulate the DOM, handle JavaScript events, and interact with the server using json-server.

At the end of this phase, all students, including myself, are tasked with creating a web application that demonstrates our grasp of the concepts covered so far. Additionally, we're required to write a blog post focusing on a technical aspect of front-end web development. This post is my attempt to fulfill that requirement.

In this post, I'll walk you through the development of the key feature of my web application. This feature integrates all the elements of my learning journey thus far, including HTML, CSS, DOM manipulation, JavaScript events, and server communication.

But before we delve into that, let's start from the beginning of my web application journey.

It’s a data thing

For my Phase 1 web application project, I had to build a frontend using HTML, CSS, and JavaScript that interacts with data

Before diving into the actual coding and visual design of my app, I had to work out what kind of data I was going to use.

Throughout Phase 1, we primarily used animal-related data, particularly relating to cats or dogs. Given this familiarity, I decided to start with this type of data for my project.

While exploring public APIs, I found that many of them provided only limited information, such as images or a single attribute like breed or name. This posed a challenge, as our project required us to use an API that returned a collection of at least five objects, each with at least three attributes. To address this, I opted to create my own db.json file to serve as the data source for my project.

Now that I knew where I would get my data from, I had to decide what kind of data I wanted to use and with that, what kind of web application I wanted to build.

Furry friends

Continuing with the pet theme, I chose to focus on dogs for my project since I lean more towards being a dog person than a cat person.

Additionally, working with pet data was a familiar choice, as mentioned earlier.

I knew I had to display data in an interesting way, use at least three distinct event listeners that enable interactivity and implement at least one instance of array iterations.

What would be a good way to do this…. A dog competition site of course! I called the web application, and the competition, Furry Fave 2024. In the competition fictional judges and users decide who should win Furry Fave 2024, i.e. who is the cutest, and most likeable dog.

With only eight weeks of JavaScript learning under my belt the app is fairly simple. On the site users can scroll through a gallery of the dog’s that are in the competition to be Furry Fave 2024, they can like their favourite dog, they can see who the leading puppy is (the dog with the most likes to date), and they can submit a dog to the competition.

There are a lot of elements to the app, but for today’s post I will focus on the key feature of the app; the contestants gallery.

Back to the future data

I wanted to display dog data in a visually interesting way that would encourage interactivity, while meeting the project requirements. I thought a gallery would be a good way to do this.

Going back to data, before delving into HTML, CSS or JavaScript I needed to decide what data I wanted to display on my app and create my db.json file.

To ensure the gallery was visually appealing, informative, and met the requirement of returning objects with at least three attributes, I decided that each dog should have the following attributes: id, image, name, breed and description. To then encourage interactivity I also added a like attribute as I knew I wanted a like button for each dog. In the data set the like attribute shows the total likes to date, a number I initially add, but which will increase dynamically.. I will get back to that.

In the end, the data structure for each dog in my db.json file looked like this

{
 "dogs": [
   {
     "id": "1",
     "image": "https://www.purina.co.uk/sites/default/files/styles/square_medium_440x440/public/2022-07/Spaniel%20%28American%20Cocker%291.jpg",
     "name": "Vanilla",
     "breed": "Cocker Spaniel",
     "description": "Vanilla is a merry and busy little dog. Profuse and glamorous,  she is an intelligent dog who loves her family",
     "likes": 13
   } 
]
}

To ensure that the data I used would display on my published site, once I had added enough starting data in my db.json file I deployed my json-server on render.com. That deservers a separate blog post, but I won't go much further in to that today.

Javascripting away

With my data in place it was time to roll up my sleeves and dig into some JavaScript code.

I had the structure and hierarchy in place for my app, so the first thing I had to do was create a place for the gallery in my HTML file within that hierarchy.

In my HTML file I created a cards div container to hold the card elements that would be dynamically created using JavaScript. I gave the div a class to be used for CSS purposes later, and placed this div within the main contestants section on the site. As you can see there is no content within the div, that is because the content will be dynamically generated through JavaScript in interaction with the server.

<section id="contestants">
       <h2><span class='bark'>CONTESTANTS</span></h2>
       <div class="heart">
           <img src="./Images/noun-footprint-3974617.png" alt="dog heart paw"/>
           <img src="./Images/noun-footprint-3974617.png" alt="dog heart paw"/>
       </div>
       <div id="cards" class="card-gallery">
       </div>
   </section>

Next, I moved on to my index.js file, where I added a function to render each dog card to be displayed in the gallery. I called this function renderOneDog.

function renderOneDog(dog) {
   const card = document.createElement('div');
   card.className = 'card';
   card.innerHTML = `
       <div class="card-inner">
           <div class="card-front">
               <img src="${dog.image}" class="dog-image" />
           </div>
           <div class="card-back">
               <h3>${dog.name} the ${dog.breed}</h3>
               <p>${dog.description}</p>
               <p class="like">${dog.likes} likes</p>
           </div>
       </div>
       <button class="like-btn" data-id="${dog.id}">Like</button>
   `;
   card.querySelector('.like-btn').addEventListener('click', handleLike);
   document.querySelector("#cards").appendChild(card);
}

The renderOneDog function takes a dog object as input and creates a new div element (card) for each dog. By passing a dog object to the function, it can access these properties and use them to dynamically create a card with correct/up to date information.

The card sets the class name of the card to card and populates its HTML content with the dog’s image, name, breed, description and number of likes.

The function also adds a like button (like-btn) to each card for liking the dog, with the dog’s ID as a data-id attribute. This is used to uniquely identify each dog in the gallery, which is important as the function that handles likes (which I will get to), needs to know which dog was liked so that it can update the likes count for that dog.

With all the card elements in place I added a function to fetch the data that will be used in the card and displayed on the site.

I wrote the renderOneDog function before the function that fetches the dog data because I use renderOneDog inside the function that fetches the data. I named the fetch function getAllDogs.

function getAllDogs(){
   fetch('https://dogs-njbi.onrender.com/dogs')
   .then (response => response.json())
   .then (dogData =>
       {dogData.forEach(dog => renderOneDog(dog));
   // Note: I will not touch on the mostLikedDog element in this blog post as this data doesn’t display in the gallery. 
   mostLikedDog = dogData.reduce((prev, current) => (prev.likes > current.likes) ? prev : current);
   renderMostLikedDog();
})
// 
   .catch (error => console.error("Error fetching dogs", error));
}

getAllDogs fetches data from the json-server. The data is fetched using a GET request to https://dogs-njbi.onrender.com/dogs. The function first converts the response to JSON format, which allows the data to be easily parsed and manipulated as a JavaScript object. This is necessary as it allows me to iterate over the data.

The function then iterates over each dog in the data, using a forEach iteration, calling the renderOneDog function to render each dog card. Through this, the function allows me to dynamically display the dog cards based on the data received from the server.

I added the .catch method for my own debugging purposes. I use it to handle errors that might occur when the data is being fetched. If an error is encountered during the fetch operation the .catch method is called and used to log the error message to the console along with the error object that was caught.

Next, lets handle that the like functionality

It doesn’t make sense to display the number of likes a dog has received if a user can’t also like a dog. I wanted to add a like button to encourage user interactivity, engagement and investment.

You will have noticed this line of code in my renderOneDog function

card.querySelector('.like-btn').addEventListener('click', handleLike);

Here I added an event listener to the like button. When clicked the handleLike function is called, which is the function where I handle the logic of what will happen when a user clicks on the button. In this context, the handleLike function is a callback function, as it is passed as an argument to another function (in this case, addEventListener) and is executed later, in response to a click on the like button.

For anything to happen I needed to write the handleLike function

function handleLike(event) {
   const dogId = event.target.dataset.id;
   const card = event.target.parentElement;
   const likesElement = card.querySelector('.like');
   let likesCount = parseInt(likesElement.textContent.match(/\d+/)[0]);


   likesCount++;


fetch(`https://dogs-njbi.onrender.com/dogs/${dogId}`, {
       method: 'PATCH',
       headers: {
           'Content-Type':'application/json',
           'Accept': 'application/json'
       },
       body: JSON.stringify({
           likes: likesCount
       })
       })
       .then(response => response.json())
       .then(updatedDog => {
           likesElement.textContent = `${updatedDog.likes} likes`;
       })
       .catch(error => console.error("Error updating dog likes", error));
}

The handleLike function is responsible for updating the number of likes a dog has when the user clicks the like button on a card.

First, the function identifies the elements associated with the dog: dogId, card, and likesElement. It then extracts the current number of likes from the likesElement, converts it to an integer using parseInt, and stores it in the likesCount variable.

Next, it increments the likesCount variable to simulate the user liking the dog.

The function then makes a PATCH request to the API endpoint for the specific dog (https://dogs-njbi.onrender.com/dogs/${dogId}). After the request, the response is converted to JSON format. The .then(updatedDog => { ... }) block updates the text content of likesElement to display the updated number of likes.

Finally, the initialise function is called to start the processes of fetching and rendering dogs on the app when the site loads, as well as the like function which updates the likes in the DOM.

function initialise(){
   getAllDogs();
}
initialise();

And there you have it, a quick overview of the Javascript code. Javascript out.

All this code makes up the foundation and key functionality of the contestants gallery, but without CSS the gallery wouldn’t have flesh, emotion, or expression. So let’s add some of that.

Design Design Design

My vision for the gallery was to present the dog data in a simple, professional, and visually appealing way, while also engaging the user.

I knew I wanted the gallery to be a scrolling gallery, that I wanted something to happen when the user hovered over the gallery card and that I wanted the like button to sit outside of the card so that it was always visible, encouraging user engagement.

After researching and experimenting with different designs, I settled on a flip gallery layout. This design allowed me to keep the initial gallery view visually appealing with just an image of the dog and a like button, while the back of the card could contain additional information about the dog.

This is what my CSS code for the gallery looks like

.card-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-height: 400px;
    gap: 20px;
    scroll-snap-type: x mandatory;
}

.card-gallery::-webkit-scrollbar {
    display: none; /* Hiding scrollbar for Chrome, Safari */
}

.card:first-child {
    padding-left: 20px;
}

.card {
    text-align: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* Safari flip gallery fix*/
}

.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d; /* Safari flip gallery fix*/
}

.card:hover .card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari flip gallery fix*/
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari flip gallery fix*/
}

.card-front {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-back {
    background-color: #4a6163;
    color: #f9faf4;
    text-align: center;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari flip gallery fix*/
    border-radius: 10px;
}


.card-back p {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    padding: 10px;
    letter-spacing: 0.5px;
}

.card-back .like {
    font-style: italic;
}

.dog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.like {
    text-align: center;
    margin-top: 10px;
}

.like-btn {
    display: block;
    margin: 10px auto;
    background-color: #4a6163; 
    color: #f9faf4;;
    border: none;
    width: 100px;
    height: 40px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 10px;
}

.like-btn:hover {
    background-color: #f17a7e;
    color: #f9faf4;
}

Phew. That’s a lot of code!

The key things to point out in the CSS are the elements that make the gallery cards flip.

In the CSS for the gallery cards, .card-gallery styles the gallery container using flexbox, allowing for horizontal scrolling and preventing card wrapping. .card styles each card, centering content, setting dimensions, and enforcing no grow or shrink. .card-inner styles the inner content for flip animation, while .card:hover .card-inner handles the flip effect on hover. .card-front and .card-back style the front and back faces of each card, with .card-back initially rotated to hide it.

This does not cover all the styles in the CSS code above, but highlights those relevant to the flip effect.The flip effect adds an element of fun and interactivity to the user experience, especially when a user hovers over the dog image. This interactivity extends to the like button, which updates the number of likes on the back of the card after a click, enhancing user engagement.

The end result is not exactly, to the detail, what I had envisioned when I started my journey, but as a result of only 12 weeks of coding experience I am satisfied with how it ended up looking and working.

Thanks for reading.