DEV Community: Rishi Purwar

Build a Custom Toast Notification Component with ReactJs & Context API

Rishi Purwar — Mon, 10 Apr 2023 10:25:17 +0000

Toast notifications are a popular way to provide users with quick feedback and alerts on actions they take on the web application. While there are many pre-built libraries available for adding toast notifications to your React project, building your own custom component can provide greater flexibility and control over the user experience.

In this blog post, I will guide you through the process of building a custom toast notification component using ReactJs and the Context API. You'll learn how to use Context API and the useReducer hook to manage the state of your toast notification component. We'll also show you how to customize the position of your notification and add a progress bar to display the remaining time. Additionally, we'll implement a pause on hover and a dismiss button functionality.

By the end of this tutorial, you'll have a fully functional custom toast notification component that you can customize according to your project's design and functionality requirements. So, let's start building!

Demo

Check out this video demo to see the final Custom Toast Notification Component in action:

Cloning the starter code

Before we begin building our custom toast notification component, let's clone the starter code from GitHub for our React project.

To do this, open up your terminal and navigate to the directory where you want to clone your project. Then, run the following command:

git clone https://github.com/rishipurwar1/react-custom-toast-notification.git

Once the cloning process is complete, navigate into the project directory by running:

cd react-custom-toast-notification

You will find the CSS code for this project in the src/App.css file, which is imported into the App.js file.

Now, we'll install all the dependencies of our project. Enter the following command in your terminal:

npm install

This command will install all the required packages listed in the package.json file.

Next, we'll start the development server by running:

npm start

You should see something like this on your browser:

Now that we have our React project set up, we can move on to creating our custom toast notification component.

Creating the Toast Notification Component

We will start by creating a new file in the src/components folder called Toast.js. Inside the Toast.js file, we will define our functional component Toast which will return the toast notification markup.

const Toast = () => {
  return (
    <div>
      {/* toast notification markup */}
    </div>
  )
}

export default Toast;

Next, we will define the markup for our toast notification. In this example, we will create a toast notification with a message, an icon and a dismiss button.

import {
  IconAlertCircleFilled,
  IconCircleCheckFilled,
  IconCircleXFilled,
  IconInfoCircleFilled,
  IconX,
} from "@tabler/icons-react";

const toastTypes = {
  success: {
    icon: <IconCircleCheckFilled />,
    iconClass: "success-icon",
    progressBarClass: "success",
  },
  warning: {
    icon: <IconAlertCircleFilled />,
    iconClass: "warning-icon",
    progressBarClass: "warning",
  },
  info: {
    icon: <IconInfoCircleFilled />,
    iconClass: "info-icon",
    progressBarClass: "info",
  },
  error: {
    icon: <IconCircleXFilled />,
    iconClass: "error-icon",
    progressBarClass: "error",
  },
};

const Toast = ({ message, type, id }) => {
  const { icon, iconClass, progressBarClass } = toastTypes[type];

  return (
    <div className="toast">
      <span className={iconClass}>{icon}</span>
      <p className="toast-message">{message}</p>
      <button className="dismiss-btn">
        <IconX size={18} color="#aeb0d7" />
      </button>
    </div>
  )
}

export default Toast;

In the above code, we have imported some icons from @tabler/icons-react library. Then we have defined an object called toastTypes to make our toast notification component more flexible. This object contains data for different types of notifications, such as success, warning, info, and error. Each type has its specific icon , iconClass , and progressBarClass associated with it. While progressBarClass is currently unused, it will be used later to give a background color to the progress bar. You can find the CSS code for all these classes in the App.css file.

The Toast component takes three props - message, type, and id. The message prop is used to display the text message of the notification. The type prop is used to determine the type of notification and the corresponding icon and icon class name.

Although the id prop is not currently used in the above code, we will use it later to remove the notification.

Finally, we have defined a dismiss button in our Toast component, which will allow the user to remove the notification.

Now that we have created the Toast component, let's create a container component called ToastsContainer that will hold all the Toast components.

Let's create a new file ToastsContainer.js in the src/components directory and add the following code:

import Toast from './Toast';

const ToastsContainer = ({ toasts }) => {
  return (
    <div className="toasts-container">
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} />
      ))}
    </div>
  );
};

export default ToastsContainer;

The ToastsContainer component accepts an array of toast objects as the toasts prop. It then maps over this array using the map method and renders a Toast component for each object. We are using the spread syntax {...toast} to pass all the properties of the toast object, such as message, type, and id, as individual props to the Toast component.

We'll render the ToastsContainer component inside the ToastContextProvider component, which we have yet to create.

Setting up the Toast Notification Context

Now that we have our Toast and ToastsContainer components set up, it's time to move on to the next step, which is creating a context for our toast notifications.

First, let's create a new file called ToastContext.js in the src/contexts folder. Inside this file, we'll create a new context using the createContext function provided by React:

// ToastContext.js
import { createContext } from "react";

export const ToastContext = createContext();

We've created a new ToastContext using the createContext function, and we've exported it so that we can use it in other parts of our application.

Now, let's create a ToastContextProvider component that will wrap our entire application and provide the ToastContext to all of its children:

// ToastContext.js
export const ToastContextProvider = ({ children }) => {

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

Creating the Toast Notification Reducer Function

Next, let's create a new file called toastReducer.js in the src/reducers folder. In this file, we'll create a toastReducer function to manage the state of the toasts:

// toastReducer.js
export const toastReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [...state.toasts, action.payload],
      };
    case "DELETE_TOAST":
      const updatedToasts = state.toasts.filter(
        (toast) => toast.id !== action.payload
      );
      return {
        ...state,
        toasts: updatedToasts,
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
};

Our toastReducer function takes in a state and an action and returns a new state based on the action type. We have two types of actions: ADD_TOAST, which adds a new toast to the toasts array in our state, and DELETE_TOAST, which removes a toast from the toasts array based on its ID.

Now let's go back to the ToastContext.js file and import the toastReducer function and useReducer hook:

// ToastContext.js
import { createContext, useReducer} from "react";
import { toastReducer } from "../reducers/toastReducer";

Inside the ToastContext.Provider component, we'll use the useReducer hook that takes in the toastReducer function and intialState:

// ToastContext.js
const initialState = {
  toasts: [],
};

export const ToastContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(toastReducer, initialState);

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

Now, we need to create some functions inside the ToastContextProvider component to add and remove toasts from the state. Firstly, we'll create an addToast function that takes in message and type as arguments and dispatches an ADD_TOAST action to add a new toast to the state:

// ToastContext.js
const addToast = (type, message) => {
  const id = Math.floor(Math.random() * 10000000);
  dispatch({ type: "ADD_TOAST", payload: { id, message, type } });
};

In addition to the addToast function, we'll create individual functions for each type of toast notification - success, warning, info, and error. These functions will call the addToast function with the corresponding type:

// ToastContext.js 
 const success = (message) => {
    addToast("success", message);
  };

  const warning = (message) => {
    addToast("warning", message);
  };

  const info = (message) => {
    addToast("info", message);
  };

  const error = (message) => {
    addToast("error", message);
  };

To remove toast notifications, we'll create a remove function that takes in a toast id as an argument and dispatches a DELETE_TOAST action to remove the toast from the state:

// ToastContext.js  
const remove = (id) => {
  dispatch({ type: "DELETE_TOAST", payload: id });
};

Then, create a value object that holds all the functions we have created and pass it to the ToastContext.Provider component:

// ToastContext.js
export const ToastContextProvider = ({ children }) => {
  // rest of the code

  const value = { success, warning, info, error, remove };

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

Next, we need to render the ToastsContainer component inside the ToastContextProvider component like this:

// import ToastsContainer
import ToastsContainer from "../components/ToastsContainer";

export const ToastContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(toastReducer, initialState);
  // rest of the code

  return (
    <ToastContext.Provider value={value}>
      <ToastsContainer toasts={state.toasts} />
      {children}
    </ToastContext.Provider>
  );
};

Finally, wrap our App component in the ToastContextProvider component in order to make the context available to all of our child components:

// src/index.js
import { ToastContextProvider } from "./contexts/ToastContext";

root.render(
  <React.StrictMode>
    <ToastContextProvider>
      <App />
    </ToastContextProvider>
  </React.StrictMode>
);

Creating the `useToast` Hook

Next, let's create our custom hook, useToast.js, in the src/hooks folder, which will allow us to access the toast-related functions from the ToastContext directly without having to manually call useContext and import the ToastContext in every component.

// useToast.js

import { useContext } from 'react';
import { ToastContext } from "../contexts/ToastContext";

export const useToast = () => useContext(ToastContext);

The useToast hook is a simple function that utilizes the useContext hook from React to access the ToastContext. This hook provides a simple and intuitive API for showing different types of toasts in our application since it returns the context's value, which includes all the functions for adding and removing toasts.

Using the `useToast` Hook

Now that we have created our custom hook useToast, we can use it to show toasts in our components. This hook provides a value of the context containing all the toast functions that we defined earlier: success, warning, info, error, and remove.

To use the hook, we simply need to import it into our App component and call it to get access to the value object. After that, we can assign it to a variable named toast:

// App.js

import { useToast } from "./hooks/useToast";

const App = () => {
  const toast = useToast();

  return (
    // JSX
  );
};

Next, we need to add an onClick event to each of the buttons defined in the App component so that when a button is clicked, it should display the corresponding toast notification.

For example, to show a success toast, we would call toast.success("MESSAGE"), where MESSAGE is the text we want to display in the toast.

Here's an example of how we can use the useToast hook in an App component:

// App.js

const App = () => {
  const toast = useToast();

  return (
    <div className="app">
      <div className="btn-container">
        <button
          className="success-btn"
          onClick={() => toast.success("Success toast notification")}
        >
          Success
        </button>
        <button
          className="info-btn"
          onClick={() => toast.info("Info toast notification")}
        >
          Info
        </button>
        <button
          className="warning-btn"
          onClick={() => toast.warning("Warning toast notification")}
        >
          Warning
        </button>
        <button
          className="error-btn"
          onClick={() => toast.error("Error toast notification")}
        >
          Error
        </button>
      </div>
    </div>
  );
};

Now, you should be able to create new toast notifications by clicking on those buttons.

Using the useToast hook can make adding and removing toasts in our app easier, and it's also a great way to keep your code clean and organized.

Check out my open-source project, FrontendPro to take your frontend development skills to the next level for FREE!

Adding dismiss button functionality

To add this functionality, we'll first import the useToast hook in our Toast component and call the useToast hook to get access to the value object.:

// Toast.js
import { useToast } from "../hooks/useToast";

const Toast = ({ message, type, id }) => {
  const { toastClass, icon, iconClass } = toastTypes[type];
  const toast = useToast() // call useToast

  return (
    <div className={`toast ${toastClass}`}>
      <span className={iconClass}>{icon}</span>
      <p className="toast-message">{message}</p>
      <button className="dismiss-btn">
        <IconX size={18} color="#aeb0d7" />
      </button>
    </div>
  );
};

Next, we'll define a handleDismiss function, which will call the toast.remove() function with a toast id to remove the toast. We will then attach an onClick event to the dismiss button to call the handleDismiss function:

const Toast = ({ message, type, id }) => {
  // code

  const handleDismiss = () => {
   toast.remove(id);
  };

  return (
    <div className={`toast ${toastClass}`}>
      <span className={iconClass}>{icon}</span>
      <p className="toast-message">{message}</p>
      {/* Add onClick */}
      <button className="dismiss-btn" onClick={handleDismiss}>
        <IconX size={18} color="#aeb0d7" />
      </button>
    </div>
  );
};

With this change, you can now manually remove a toast by clicking the dismiss button.

Adding a Progress Bar and Auto-Dismiss Timer

In this section, we will add a progress bar that will indicate how much time is remaining before the toast disappears and an auto-dismiss timer to automatically remove toast after a certain amount of time.

To implement the auto-dismiss timer functionality, we will use the useEffect hook to attach a timer to each toast using setTimeout when it's mounted. This timer will call the handleDismiss function after a certain amount of time has passed, which will remove the toast from the screen.

We can achieve this by adding the following code to our Toast component:

// Toast.js
import { useEffect, useRef } from "react"; // import useEffect & useRef

const Toast = ({ message, type, id }) => {
  // rest of the code
  const timerID = useRef(null); // create a Reference

  const handleDismiss = () => {
    toast.remove(id);
  };

  useEffect(() => {
    timerID.current = setTimeout(() => {
      handleDismiss();
    }, 4000);

    return () => {
      clearTimeout(timerID.current);
    };
  }, []);

  return (
    // JSX
  );
};

In the above code, we create a new timer using setTimeout that will call the handleDismiss function after 4000 milliseconds (or 4 seconds). We then return a cleanup function from the useEffect hook that will clear the timer using the clearTimeout function when the Toast component is unmounted. With these changes, our Toast component will now automatically remove itself after 4 seconds.

Now let's add the progress bar to our Toast component. First, update the JSX of our Toast component to include the progress bar like this:

const Toast = ({ message, type, id }) => {
  // code

  return (
    <div className="toast">
      <span className={iconClass}>{icon}</span>
      <p className="toast-message">{message}</p>
      <button className="dismiss-btn" onClick={handleDismiss}>
        <IconX size={18} color="#aeb0d7" />
      </button>

      {/* Toast Progress Bar */}
      <div className="toast-progress">
        <div className={`toast-progress-bar ${progressBarClass}`}></div>
      </div>

    </div>
  );
};

Next, we need to style and animate the progress bar using CSS:

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
}

.toast-progress-bar {
  height: 100%;
  animation: progress-bar 4s linear forwards;
}

.toast-progress-bar.success {
  background-color: var(--success);
}

.toast-progress-bar.info {
  background-color: var(--info);
}

.toast-progress-bar.warning {
  background-color: var(--warning);
}

.toast-progress-bar.error {
  background-color: var(--error);
}

@keyframes progress-bar {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

In the above code, we define the progress bar style in the .toast-progress and .toast-progress-bar CSS classes.

Additionally, we define four more CSS classes: .toast-progress-bar.success, .toast-progress-bar.info, .toast-progress-bar.warning, and .toast-progress-bar.error. These classes define the background color of the progress bar based on the dynamic progressBarClass value in the Toast component.

We also use the @keyframes rule to define the progress-bar animation. This animation animates the width of the progress bar from 100% to 0% over 4 seconds.

After applying these changes, our Toast component now displays an animated progress bar.

Adding Hover on Pause functionality

After adding the progress bar to our Toast component, we can now further enhance its functionality by adding a pause on the hover feature. With this feature, users can pause the auto-dismiss timer and the progress bar animation by simply hovering their mouse over the Toast.

To add the hover-on pause functionality, we can use the onMouseEnter and onMouseLeave events in React. When the user hovers over the Toast, we can clear the auto-dismiss timer using the clearTimeout function to pause the timer. Then, when they move their mouse away, we can start a new timer with the remaining time.

First, let's create a new reference called progressRef and attach it to the progress bar element to track whether the progress bar animation is currently paused or not.

// Toast.js
const progressRef = useRef(null);

{/* Toast Progress Bar */}
<div className="toast-progress">
    <div
      ref={progressRef}
      className={`toast-progress-bar ${progressBarClass}`}
    ></div>
</div>

Next, we will create handleMouseEnter function to handle the onMouseEnter event. When the mouse enters the toast, we will clear the timer using the clearTimeout and set the progress bar animation to paused to pause the animation.

// Toast.js
const handleMouseEnter = () => {
  clearTimeout(timerID.current);
  progressRef.current.style.animationPlayState = "paused";
};

Similarly, we will create a handleMouseLeave function to handle the onMouseLeave event. When the mouse leaves the toast, we will set the progress bar animation back to running to resume the animation.

  const handleMouseLeave = () => {
    const remainingTime =
      (progressRef.current.offsetWidth /
        progressRef.current.parentElement.offsetWidth) *
      4000;

    progressRef.current.style.animationPlayState = "running";

    timerID.current = setTimeout(() => {
      handleDismiss();
    }, remainingTime);
  };

In the above code, we first calculate the remaining time by dividing the current width of the progress bar by the total width of the progress bar container and multiplying it by the total duration (which is 4 seconds in our case).

Next, we set the animation play state back to running to resume the progress bar animation. Then, we create a new timer using setTimeout and pass in the handleDismiss function as the callback, which will automatically dismiss the Toast after the remaining time has passed. This ensures that the Toast will still auto-dismiss even if the user pauses the animation for a certain period of time.

Now we need to add these event listeners to the wrapper div of the Toast component.

const Toast = ({ message, type, id }) => {
  // rest of the code
  return (
    <div
      className="toast"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <span className={iconClass}>{icon}</span>
      <p className="toast-message">{message}</p>
      <button className="dismiss-btn" onClick={handleDismiss}>
        <IconX size={18} color="#aeb0d7" />
      </button>
      {/* Toast Progress Bar */}
      <div className="toast-progress">
        <div
          ref={progressRef}
          className={`toast-progress-bar ${progressBarClass}`}
        ></div>
      </div>
    </div>
  );
};

With these changes, users can now hover over the Toast to pause the animation and resume it when they move their mouse away.

Customizing Toast Notification Component position

To customize the position of our Toast notification component, we can pass a different position class as a prop to the ToastsContainer component and add the corresponding CSS for that class. By default, our ToastsContainer component is positioned at the top right of the screen using the .toasts-container class.

Let's first create a few more position classes in our CSS file and remove the default top and right property from the .toasts-container:

.toasts-container {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 12px;
  position: fixed;
  z-index: 9999;
}

.top-right {
  top: 16px;
  right: 16px;
}

.top-left {
  top: 16px;
  left: 16px;
}

.top-center {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-left {
  bottom: 16px;
  left: 16px;
}

.bottom-center {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-right {
  bottom: 16px;
  right: 16px;
}

Next, let's update our ToastsContainer component to accept a position prop and add that to the wrapper div:

const ToastsContainer = ({ toasts, position = "top-right" }) => {
  return (
    <div className={`toasts-container ${position}`}>
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} />
      ))}
    </div>
  );
};

Now, when we use the ToastsContainer component, we can pass a different position prop to customize its position on the screen:

// ToastContext.js
<ToastContext.Provider value={value}>
   <ToastsContainer toasts={state.toasts} position="bottom-right" />
   {children}
</ToastContext.Provider>

With these changes, we can customize the position of our Toast notifications by simply passing a position class as a prop.

Adding animation to the Toast component

Currently, our Toast notifications appear and disappear suddenly without any animation. In this section, we will add a slide-in and slide-out animation to the Toast component using CSS.

To add a slide-in effect, we can use the @keyframes rule to define an animation that gradually changes the opacity of the Toast from 0 to 1 and translates it from 100% to 0% along the x-axis. We can then apply this animation to the .toast class using the animation property in CSS.

/* App.css */

.toast {
  /* rest of the properties */
  animation: slide-in 0.4s ease-in-out forwards;
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

To add a slide-out effect, we can use a similar approach. We can define another animation using the @keyframes rule that gradually changes the opacity of the Toast from 1 to 0 and translates it from o% to 100%.

/* App.css */

.toast-dismissed {
  animation: slide-out 0.4s ease-in-out forwards;
}

@keyframes slide-out {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

To apply the .toast-dismissed class to the Toast component when it is dismissed, we can create a new state variable called dismissed and set it to true when the Toast is removed. Then, we can conditionally add the .toast-dismissed class to the Toast component based on the value of dismissed.

// import useState hook
import { useEffect, useRef, useState } from "react";

const Toast = ({ message, type, id }) => {
  // rest of the code
  const [dismissed, setDismissed] = useState(false);

  const handleDismiss = () => {
    setDismissed(true);
    setTimeout(() => {
      toast.remove(id);
    }, 400);
  };

  return (
    <div
      className={`toast ${dismissed ? "toast-dismissed" : ""}`}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {/* rest of the code */}
    </div>
  );
};

In the above code, we have also updated the handleDismiss function slightly. Now, when the dismiss button is clicked, or the auto-dismiss timer is completed, the dismissed state variable is set to true, and the .toast-dismissed class is added to the Toast component. This will trigger the slide-out animation defined in the slide-out keyframe animation. Finally, after a short delay of 400ms, we remove the Toast component using the toast.remove() function.

With these changes, we have added animations to our Toast component. When the Toast component appears, it slides in from the right of the screen, and when it is dismissed, it slides out in the same direction.

Conclusion

In this blog, we covered various aspects of building the Toast Notification component, including creating a context, creating a Toast component, and adding functionality such as an auto-dismiss timer, progress bar, pause on hover, and animation. We also learned how to customize the position of the Toast component using CSS.

With this custom Toast notification component, you can easily add beautiful and informative notifications to your application. The possibilities for customization are endless, and you can tailor the component to your specific needs.

We hope this blog has been helpful and informative, and we encourage you to try building your own custom Toast notification component using ReactJS and Context API.

If you have any feedback or suggestions, please feel free to leave them in the comments section below. Also, don't forget to follow me on Twitter for more exciting content. Thank you for reading!

Check out my open-source project, FrontendPro to take your frontend development skills to the next level for FREE!

Build a Random Quote Generator with HTML, CSS, and JavaScript

Rishi Purwar — Sun, 19 Mar 2023 05:06:33 +0000

In this tutorial, we'll build a Random Quote Generator frontend project from FrontendPro.dev using HTML, CSS, and JavaScript. If you're looking to practice your frontend development skills, building a random quote generator is an excellent project to start with. In this tutorial, I'll walk you through the step-by-step process of building your own Random Quote Generator from scratch.

We'll start by setting up the HTML for our web page, then add styles with CSS to make our Quote Generator look good. After that, we'll dive into the JavaScript code to fetch quotes from an external API and display them on the web page. We'll also add a Tweet button so that users can share their favourite quotes on Twitter. By the end of this tutorial, you will have a fully functional Random Quote Generator that you can also share with your friends or add to your portfolio.

So, let's get started and build a Random Quote Generator that will inspire and motivate you and your users!

Getting Started

To get the starter code for this project, head over to the FrontendPro website and sign up using your GitHub account if you haven't already. Then, navigate to the challenges page and select the "Random Quote Generator" challenge. Click the "Start Challenge" button to begin. You'll have two options: you can either start coding directly on the website, or you can download the starter code and work locally.

For this tutorial, I will be coding the project directly on the FrontendPro website using their online code editor. However, if you prefer to work locally, you can download the starter code and follow along with the steps in your preferred code editor.

Setting Up the HTML

Now that you have access to the starter code let's dive into building our Random Quote Generator project. The first step is to set up the HTML structure for our web page.

Open up the index.html file in the code editor. You should see a basic HTML structure that includes a head and a body section. We'll be working within the body section to create the layout and content for our Random Quote Generator.

To get started, let's add a main section that will hold all the elements on our web page. Inside this main section, we'll add a quote and author name, as well as buttons.

<main>
    <!-- Quote and author information will go here -->
</main>

Now, let's add a quote and author name inside the main section. We'll hard code them for now, but later on, we'll make them dynamic using JavaScript. Here's an example of what our HTML code might look like:

 <main class="container">
    <h1 class="quote">Nobody will believe in you unless you believe in yourself.</h1>
    <hr>
    <p class="author">Liberace</p>
</main>

Finally, let's add a button that users can click to fetch a new quote and add a tweet button that allows users to share the current quote on Twitter. Here's what the complete HTML code for our main section might look like:

<main class="container">
    <h1 class="quote">Nobody will believe in you unless you believe in yourself.</h1>
    <hr>
    <p class="author">Liberace</p>
    <div class="controls">
        <a class="twitter-share-btn" data-size="large" href="https://twitter.com/intent/tweet?text=Hello%20world" target="_blank" rel="noopener noreferrer">Tweet</a>
        <button class="new-quote-btn">New Quote</button>
    </div>
</main>

Styling the Quote Generator with CSS

Now that we have set up our HTML structure, let's move on to styling our Random Quote Generator with CSS. The main goal of this step is to make our Quote Generator look good.

To begin, open up your style.css file and remove the default padding and margin. Additionally, let's specify a font family for our Quote Generator, like so:

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
}

Next, add a background image for our page, like this:

body {
    font-family: "Quicksand", sans-serif;
    background-color: #dfdbe5;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

Next, let's add some styles to our main section to give it some structure:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 20px;
}

This will give our main container section a transparent background with rounded corners, some padding around the edges, a maximum width of 600 pixels, and center the content horizontally inside the container using CSS flexbox.

You should see something like this in your browser window:

To center our main container, we need to give display: flex property to the body tag. This allows us to use the flexbox layout and center the container horizontally and vertically. Here's the updated CSS code:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* rest of the CSS properties */
}

Next, we'll define two CSS colour variables that we'll use in our CSS code. Here's how we can define them:

:root {
  --primary-color: #364ba7;
  --secondary-color: #f583a7;
}

Now, let's style the quote and author name like this:

.quote {
  text-align: center;
  font-style: italic;
  color: var(--primary-color);
}

.author {
  color: var(--secondary-color);
  font-size: 20px;
}

Next, let's style the hr tag to add a horizontal line after the quote like this:

hr {
  margin: 10px 0;
  width: 60%;
  border: 1px solid #364ba788;
}

Finally, let's style our buttons using the CSS below:

.controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.new-quote-btn, .twitter-share-btn {
  cursor: pointer;
  border: none;
  color: var(--secondary-color);
  font-size: 20px;
  font-weight: 700;
  background-color: var(--primary-color);
  padding: 10px;
  border-radius: 4px;
}

.twitter-share-btn {
  text-decoration: none;
}

button:focus {
  outline: none;
}

With these CSS styles, our Quote Generator is starting to look more polished. In the next section, we'll dive into the JavaScript code to make our Quote Generator dynamic and functional.

Fetching Quotes from an External API using JavaScript

In the previous sections, we set up the basic HTML structure and styled our Random Quote Generator using CSS. Now, it's time to make our Quote Generator dynamic by fetching quotes from an external API using JavaScript.

There are many APIs available on the internet that provide quotes, but for this tutorial, we'll use the Quotable API to fetch random quotes. It is a free, open-source and easy-to-use quotations API.

To get started, let's first open a index.js file and link it to our HTML file using the script tag if you haven't yet:

  <script src="src/index.js"></script>

Next, we'll define a function called getQuote that will fetch a random quote from the API and display it on the web page. Here's how the code for the getQuote function might look like:

const quoteEl = document.querySelector(".quote");
const authorEl = document.querySelector(".author");

const API_URL = 'https://api.quotable.io/random';

const getQuote = async () => {
  try {
    const response = await fetch(API_URL);
    const data = await response.json();

    const quote = data.content;
    const author = data.author || 'Unknown';

    quoteEl.textContent = quote;
    authorEl.textContent = author;
  } catch (error) {
    console.log(error);
    quoteEl.textContent = 'Oops! Something went wrong.';
    authorEl.textContent = '';
  }
}

Let's go through the code step by step:

First, we use the querySelector method to target the HTML elements that we created earlier for the quote and author.
Then, we define a variable called API_URL that contains the URL of the Quotable API.
Next, we use the fetch() method to send a GET request to the API URL, which returns a promise. So, we use the await keyword to wait for the promise to be resolved before executing the next line of code.
Once the promise is resolved, we call the json() method on the response object, which also returns a promise. We use the await keyword again to wait for this second promise to be resolved and return the parsed JSON data, which we save in a variable called data.
We then extract the quote and author information from the data and store them in variables called quote and author.
After that, we update the content of quoteEl and authorEl using the textContent property.
Finally, we wrap the code in a try-catch block to handle errors that may occur while fetching the quote. In case of an error, we catch it and update the quote element with an error message.

Generating Random Quotes with JavaScript

Now that we have defined the getQuote function, we need to call it when the page loads and when the "New Quote" button is clicked. Here's how we can do that:

const newQuoteBtn = document.querySelector(".new-quote-btn")

// rest of the code

getQuote(); // fetching a quote on page load

newQuoteBtn.addEventListener('click', getQuote); // attaching an event listener to the new quote button

And that's it! We have successfully fetched a random quote from an external API and displayed it on our web page using JavaScript. In the next section, we'll add a "Tweet" button that will allow users to share their favourite quotes on Twitter.

Adding the Tweet Button

Now that we have our Random Quote Generator working properly, it's time to add a Tweet button that allows users to share the quote on Twitter.

To do this, we'll create a function called setTweetButtonHref that will update the href attribute of our tweet button with the current quote and author. We'll then call this function each time we fetch a new quote using our getQuote() function.

Here's how we can create the setTweetButtonHref function:

const tweetButton = document.querySelector('.twitter-share-btn');

// rest of the code

function setTweetButtonHref(quote, author) {
  const tweetText = `"${quote}" - ${author}`;
  const tweetHref = `https://twitter.com/intent/tweet?text=${tweetText}`;
  tweetButton.setAttribute('href', tweetHref);
}

First, we use the querySelector method to select our tweet button. We then create a tweetText variable that includes the current quote and author.

Next, we create a tweetHref variable that contains the URL to share the quote on Twitter. We include the tweetText in the text parameter of the URL.

Finally, we use the setAttribute method to update the href attribute of our tweet button with the tweetHref variable.

Now, we just need to call this function each time we fetch a new quote using our getQuote() function. We can do this by adding the following line of code just above the catch block of the getQuote() function:

const getQuote = async () => {
  try {
    const response = await fetch(API_URL);
    const data = await response.json();

    const quote = data.content;
    const author = data.author || 'Unknown';

    quoteEl.textContent = quote;
    authorEl.textContent = author;

    setTweetButtonHref(quote, author); // function call
  } catch (error) {
    console.log(error);
    quoteEl.textContent = 'Oops! Something went wrong.';
    authorEl.textContent = '';
  }
}

With these changes, users can now share the quote and author information on Twitter using the "Tweet" button.

Conclusion

In this blog, we have learned how to build a random quote generator frontend project using HTML, CSS, and JavaScript. We started by setting up the HTML structure and styling the app with CSS. Then we learned how to fetch quotes from an external API using JavaScript's fetch() method and display them dynamically on the web page. Finally, we added a Tweet button to allow users to share their favourite quotes on Twitter.

This project is a great way to practice your front-end web development skills, build frontend projects for your portfolio and learn more about working with APIs and JavaScript. Remember that this is just the beginning, and there's always more to learn and improve upon. Keep experimenting and building on what you've learned to create more advanced and useful web applications.

Thank you for following along with this tutorial, and we hope it has been helpful in your learning journey. Good luck!👍

Start your frontend development journey today with FrontendPro!

10 Frontend Projects to Take Your Coding Skills to the Next Level

Rishi Purwar — Mon, 13 Mar 2023 05:35:57 +0000

Are you a front-end developer looking to take your skills to the next level? One of the best ways to do so is by working on real-world projects that push you out of your comfort zone and force you to learn new techniques and technologies.

In this blog, I've compiled a list of front-end projects from FrontendPro.dev that can help you improve your proficiency in HTML, CSS, JavaScript, ReactJs, and other front-end technologies.

These frontend projects are designed for developers of all skill levels and each one is unique, varying from developing a responsive website to building real-world UI components. So, whether you're a beginner, intermediate, or advanced front-end developer, there's a front-end project for you.

FrontendPro is an open-source platform that offers a diverse range of real-world frontend projects designed to help developers hone their frontend skills. Moreover, FrontendPro provides you with Figma files for each project for Free to make it even easier for you to get started. With these Figma files, you can visualize what you're building and create polished, professional-looking projects that you can add to your portfolio to showcase your skills and impress potential employers.

So, what are you waiting for? Let's take your front-end skills to the next level with these 10 front-end projects!

1. Blog Card Component

Skills Required	Difficulty Level	Project Link
HTML, CSS	Beginner	View Project

In this frontend project, you'll build a Blog Card Component. This project is perfect for you if you've been learning CSS and want to take your CSS skills to the next level by building something new and beginner-friendly.

Project Requirements

Make this component look as close to the design as possible.
The component should be responsive and display correctly on different screen sizes.

Learning outcomes

After completing the Blog card frontend project, you will acquire the skills to build UI components using CSS flexbox or grid. Did we mention that creating these UI components is also a lot of fun?

Resources to help complete the project

2. Payment Landing Page

Skills Required	Difficulty Level	Project Link
HTML, CSS & JavaScript	Beginner	View Project

In this frontend project, you'll build a landing page for a fictional Payment App. This project is perfect for you if you're looking to build your first Landing page using HTML, CSS and JavaScript.

Project Requirements

Show the hover effect of all the elements.
Display the hamburger menu icon on mobile devices.
When the hamburger menu is clicked, it should open the mobile navigation menu.
Make this landing page look as close to the design as possible.
The component should be responsive and display correctly on different screen sizes.

Learning outcomes

Upon finishing the Payment Landing Page frontend project, you'll acquire the knowledge and skills to build responsive and mobile-friendly layouts using CSS Flexbox or grid. You're definitely going to love this project.

Resources to help complete the project

3. Pricing Card Page

Skills Required	Difficulty Level	Project Link
HTML, CSS & JavaScript	Beginner	View Project

In this frontend project, you will create a pricing card page that displays different pricing plans for a product or service. This project is perfect for you if you're interested in building interactive front-end web components and taking your front-end skills to the next level!

Project Requirements

The page should contain three pricing cards, each with a different pricing plan and a list of features.
Display both monthly and annual pricing to users.
Users should have the option to switch between monthly and annual pricing by clicking on the Toggle button.
Show the hover state of all the elements.
Make this landing page look as close to the design as possible.
The component should be responsive and display correctly on different screen sizes.

Learning outcomes

Upon completing the Pricing Card Page frontend project, you'll have knowledge of how to build complex and interactive UI components using CSS and JavaScript.

Resources to help complete the project

4. Random Quote Generator

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Intermediate	View Project

In this frontend project, you'll build a Random Quote Generator that displays random motivational quotes. This project is perfect for you if you're looking to create interactive projects using external APIs and to enhance your Frontend skills.

Project Requirements

A button that fetches a new quote from an external API every time it's clicked.
Display the quote and its author's name.
A tweet button to allow users to share the quote on Twitter.
Make this landing page look as close to the design as possible.
The component should be responsive and display correctly on different screen sizes.

Learning outcomes

Upon completing the Random Quote Generator frontend project, you will have gained the knowledge and practical experience of using external APIs to fetch data into your website. Additionally, you will have strengthened your skills in HTML, CSS, and JavaScript while building an interactive and responsive web application.

Resources to help complete the project

5. Contact Us Form

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Intermediate	View Project

In this frontend project, you'll build a responsive contact us form using HTML, CSS, and JavaScript. In addition, you will integrate an external API that will allow you to receive submissions from the Contact Form directly in your email inbox using the Contact Form API.

Project Requirements

All fields are required and must be validated.
The email field must be validated to ensure it is a valid email address format.
The form should display a success message to the user after the form is submitted.
The form should also display an error message if there are any issues with the form submission, such as an invalid email address or missing fields.
The form should be responsive and should adjust to different screen sizes.
Show the hover state of all the elements.
The form should use the Contact Form API to send a form submission response to the email inbox.

Learning outcomes

Upon completing the Contact Us Form front-end project, you will acquire various skills and knowledge in front-end web development. You'll learn to implement form validation techniques to ensure accurate and complete form data submissions. You will also learn to integrate external APIs to securely send data from your website to a server using an API.

This project will provide an opportunity for developers to develop a portfolio-ready project to showcase their technical skills and problem-solving ability.

Resources to help complete the project

6. Accordion Component

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Intermediate	View Project

In this frontend project, you'll build an Accordion Component. This project is perfect for you if you're interested in building interactive front-end web components and taking your front-end skills to the next level!

Project Requirements

The accordion should have a minimum of 4 sections that expand and collapse.
Clicking on a section header should toggle the section open or closed.
The icon should change from plus to a cross icon when the accordion item is expanded.
Make this Accordion Component look as close to the design as possible.
The component should be responsive and display correctly on different screen sizes.

Brownie Points

Only one section should be open at a time. Clicking on a different section should close the currently open section and open the new one.
Animate the expansion and close of the accordion items.

Learning outcomes

Upon completing the Accordion Component frontend project, you'll learn how to build an Accordion Component from scratch. You'll also learn how to use DOM manipulation to make the component interactive and dynamic.

This frontend project is an excellent opportunity to improve your CSS & JavaScript skills and build something cool.

7. OTP Verification Component

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Intermediate	View Project

In this frontend project, you'll build an OTP Verification component that will validate user input and allow them to submit an OTP only after entering the correct code. This project is perfect for you if you're interested in building interactive front-end web components and taking your frontend dev skills to the next level!

Project Requirements

The component should include a form where users can enter the OTP.
The form should have an input field for each digit of the OTP code.
The component should have a button to validate the OTP code entered by the user.
If the OTP entered is valid, the input border should turn green.
If the OTP entered is invalid, the input border should turn red.
Upon successfully submitting a valid OTP, the user should see a success message.
Upon submission of an invalid OTP, the user should see an "Invalid OTP" alert message.

Note that to test your component's functionality, you can store a hard-coded OTP in your code and validate the form's submission against that.

Brownie Points

The component should allow users to easily copy and paste the OTP code directly into the input field.

Learning outcomes

Upon completing the OTP Verification component frontend project, you'll learn how to use CSS Grid/Flexbox to lay out the OTP Verification component. You'll also learn how to use DOM manipulation to make the component interactive and dynamic. This project is a great opportunity to improve your CSS & JavaScript skills and build something cool.

Resources to help complete the project

Javascript Form Validation Guide

8. Calendar Viewer Component

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Intermediate/Hard	View Project

In this frontend project, you'll build a Calendar Viewer Component from scratch. This project is perfect for you if you've been learning JavaScript and want to take your JavaScript skills to the next level by building a real-world project.

Project Requirements

The component should display a calendar with the current month and year, along with the days of the week.
Users should be able to navigate to the previous and next months by clicking on buttons or arrows.
The component should highlight the current day of the month.

Brownie Points

Users should be able to add new events by clicking on a day and entering event details into a modal form.
Users should be able to edit or delete existing events by clicking on the event and modifying the details in the modal form.
The component should highlight the days with different background colours on which events have been added.
The component should save the events in local storage, so they persist between page reload.

Learning outcomes

Upon completing the Calendar Viewer Component frontend project, you'll have knowledge of how to use JavaScript DOM manipulation to manipulate the data. This is a great skill to have in your developer’s belt because it can help you create more dynamic and interactive components. Additionally, developers can improve their JavaScript skills by working on the complex functionality of the Calendar Viewer component.

Resources to help complete the project

9. Multi-select Search Component

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Hard	View Project

In this frontend project, you'll build a Multi-select Search Component that fetches data from an API based on user input and allows users to select multiple options from a dropdown list. This project is perfect for you if you're interested in building complex front-end web components and taking your front-end dev skills to the next level!

Project Requirements

Build a reusable UI component that can fetch data from an API and allow users to select multiple options from a dropdown list.
The component should include a search bar that allows users to search the results from the API based on the text entered.
The dropdown list should display the results from the API and allow users to select multiple options.
Selected options should be displayed in the search bar as tags, and users should be able to remove them.
The component should have a "Clear All" or "x" button on the search bar, which allows users to remove all selected tags at once with a single click.

Brownie Points

Show a loading spinner on the right side of the search bar while data is being fetched from the API.
Add debouncing to the search input to reduce API calls and improve the performance of the component.
Make it reusable.

Learning outcomes

By completing the Multi-select Search Component frontend project, you'll gain valuable knowledge and skills for building complex and reusable UI components. You will gain hands-on experience implementing search functionalities, handling user inputs, and rendering dynamic data in a UI. Additionally, you will learn how to optimize network requests using debouncing techniques to improve the performance of your component.

Resources to help complete the project

Debounce Explained – How to Make Your JavaScript Wait For Your User To Finish Typing

10. Video Player Web App

Skills Required	Difficulty Level	Project Link
HTML, CSS, JavaScript or use a library like React or Vue	Hard	View Project

In this frontend project, you'll build a full-fledged video player web app using HTML5 Video API. The web application should have a user-friendly interface with features such as play/pause, skip, and volume controls. This project is perfect if you want to level up your front-end development skills by building something exciting and challenging.

Project Requirements

The web application should have a video player that can play, pause, and stop video playback.
Users should be able to navigate through the video by dragging the progress bar.
The web application should display the current time and total time of the video.
The application should include volume controls that allow users to adjust the volume of the video.
The application should include a control to allow users to toggle between full-screen and normal mode.
The application should be responsive and accessible and work well on different devices and screen sizes.

Brownie Points

The video player should include controls to skip forward and backwards by a certain number of seconds.
The video player should include a control to allow users to mute the audio of the video.
The application should provide options for users to customize the playback speed of the video.

Learning outcomes

By completing the Video Player Web App frontend project, you will gain valuable skills and knowledge in developing complex and interactive web applications. You will also learn to use the HTML5 video API to create a feature-rich video player and develop expertise in handling various user interactions, such as play/pause, volume control and fullscreen mode.

Resources to help complete the project

HTML5 Video API Docs

Conclusion

To improve your front-end development skills, you need to build your own projects to gain confidence in your skills. FrontendPro.dev offers a variety of projects suitable for developers of varying proficiency levels. By taking on these real-world front-end projects, you can improve your front-end development skills and advance in your career.

Remember, the key to becoming a great front-end developer is to keep learning and practicing. Even if you didn't get everything right the first time around, the most important thing is to keep trying and learning from your mistakes.

If you need any assistance with these projects, or if you're looking to connect with other front-end developers, we invite you to join our FrontendPro Discord server.

We encourage you to take on these front-end projects from FrontendPro and use your creativity to customize them and add your unique touch. Please feel free to share your completed projects and tag us when you post them on Twitter or LinkedIn so we can check them out.

Thank you for taking the time to read this blog, and we wish you all the best in your journey to becoming a great Frontend Developer.

Start your frontend development journey today with FrontendPro!

If you've liked what you've seen so far and would like to show your support for this Open Source project, please give this project a ⭐️ star on GitHub or sponsor it on GitHub.

Become a Pro in Frontend Development with FrontendPro.dev

Rishi Purwar — Fri, 03 Feb 2023 10:31:27 +0000

🚀 Ready to take your FrontEnd skills to the next level? 👋 Say hello to our open-source platform, FrontendPro formerly known as Codingspace!

At FrontendPro, we provide a variety of real-world Frontend challenges for developers to take on, and after completing the challenge, developers can share their solutions on our platform to get valuable feedback from fellow developers.

🎉 To celebrate this launch, I've revamped our landing page to provide a sleek and modern look.

But that's not all, I've added an amazing new feature that you're going to love - an online Coding Playground, where you can code directly on our website! 💻 Yes, you heard it right, you can now code directly on our website without any hassle.

So, what are you waiting for? 🤔 Come join us and take your frontend skills to the next level!

Feedbacks are more than welcome!

Checkout FrontendPro: https://www.frontendpro.dev

How I Built A Web Development Challenges Website With $0 (And You Can Too!)

Rishi Purwar — Wed, 24 Aug 2022 07:47:00 +0000

If you're looking for inspiration to build your own side project, this blog post is for you! I'll share the learning and experiences that I gained throughout the process of building FrontendPro, a website where we provide a variety of Frontend development challenges that will help you improve your coding skills and become better at web development.

Before moving forward, I would like to give you my introduction.

Hi 👋, my name is Rishi Purwar, a developer from India 🇮🇳. I'm an enthusiastic web developer who has been building side projects for quite some time now.
Apart from this, I also got selected as a Google Summer Of Code Student at Postman. I'm also a 4th-year B.Tech student pursuing Chemical Engineering at MNIT Jaipur, India.

🚀 What is FrontendPro?

FrontendPro is an Open Source platform where we aim to provide lots of different real-world UI challenges. These challenges are designed to help you improve your web development skills and to build a great portfolio of projects. You can choose a challenge from a variety of challenges that we've on FrontendPro. And once you've completed a challenge, you can share it with other talented developers, who would help you with their valuable feedback.

👷‍♂️ Why did I build FrontendPro?

You may be wondering why I built FrontendPro. What are its benefits? Let's see those points -

There are many ways to learn web development. Most people start with a tutorial, but that's not enough. You need to build your own projects in order to gain confidence in your skills but you can't do that if you don't have an idea for a project. This is why I built FrontendPro — so you could get better at web development by doing it and build a great portfolio of projects.
The world of tech is changing, and the way companies assess candidates is changing right along with it. Nowadays, companies are increasingly giving candidates take-home projects to solve for an assessment. This is a great way to assess how a candidate will perform on the job, but it can be difficult for candidates to get a feel for what's expected and build the right strategy to complete their next real job take-home challenge. We're providing a platform where candidates can get a feel of take-home challenges by solving FrontendPro challenges and build the right strategy to complete their next real job take-home challenge.
I also realized that although many people were sharing nice project ideas via blogs and tweets that we could build to improve our web development skills, but they aren't always sharing the UI designs, so it's hard for the newbies to code without having a proper UI design. So I put together a list of challenges(will add more soon) on FrontendPro that I thought would be beneficial for the developer community.
I want to make FrontendPro a full-fledged platform where developers can polish their web development skills and build some cool projects and get a job by showcasing on their portfolio.

👨‍💻 The Tech Stack

Here are the primary technologies that I used in this project:

Frontend: I used ReactJs for the frontend of the website.
CSS Framework: I chose to use TailwindCSS, which is a utility-first CSS framework.
Backend: I used Firebase for the backend. It's easy, reliable, fast and costs me $0 because I went with the free plan!
Images & Files Hoisting: I used Cloudinary to host images and files for my website, it's a cloud-based image management solution that allows me to host, manage, and serve the images and files for my website. It costs me $0 because I decided to go with their free tier which is more than enough for my project as of now.
Domain Name: I bought a domain name from name.com. But fortunately, I got it for free thanks to Github Student Developer Pack. If you are also a student like me, then go to https://education.github.com/pack and sign up for it as well.
Website Hoisting: I hosted my website on Vercel, which is a static website hosting service. It's really easy to use and costs me $0 per month.
Newsletter: I used Typeform Newsletter because I got it for free thanks again to Github Student Developer Pack. It was pretty easy to use and I didn't have any problems setting up the forms. It's pretty easy to customize, too. If you're looking for an easy way to integrate newsletter to your website, this can be a great option!
Icons/Illustrations: I chose to use Font Awesome & Pixeltrue. It costs me $0 because both provide free Icons and Illustrations.

Why did I choose ReactJs?

You may be wondering why I used ReactJs. What are its benefits? Let's see those points -
React was so popular(still, it's trendy) when I started building this project which means there is a strong community of developers using React, so we can easily find good documentation, tutorials, lots of open source components and lots of NPM packages. If something goes wrong while building, we can find help or a solution relatively quickly and most importantly, StackOverflow has tons of React questions and answers😂.
React has a smooth learning curve. It's much easier to learn compared to other Frontend Framework or Library. If you have a basic understanding of HTML, CSS and JS, you can quickly start working with ReactJs.
When I started building this project, I didn't have a profound knowledge of ReactJs, but I just had a basic understanding of it. So, I really wanted to gain deep knowledge of React by building a side project. I learned many things about React while building this project, i.e. managing the application's state using Context API and Reducers, Code Splitting, Lazy Loading, Suspense and so many other things.

Why did I choose Firebase?

Firebase has a number of good reasons to use it as a Backend. Let's see some of them:
It's easy to set up, not just for me, but also for you. You can get started with Firebase in just a few minutes and there are no servers to maintain or deploy. I also don't have to worry about scaling my project for thousand of users.
It also provides authentication out of the box, so we don't need to write complex authentication code from scratch(This saves a lot of our time).
I wanted to use a real-time database so that whenever a change happens in a database, it immediately shows up on the UI without refreshing the page. This would help me build a comment and emoji system for the solution details page that is more dynamic.

That's why I chose Firebase, as it allows me to focus more on developing the website instead of writing a whole server code from scratch.

Why did I choose TailwindCSS?

TailwindCSS has a number of good reasons to use it as a CSS framework. Let's see some of them:

It makes the styling process much faster since we don't have to leave our markup; we can write CSS and HTML for the website simultaneously.
TailwindCSS v3.0 uses a Just In Time engine under the hood that really helps us to get better browser performance, reduced CSS file size and lightning-fast build time.
TailwindCSS has a lot of pre-built classes for sizing and colours that will altogether remove the need to implement a design system from scratch.
We can quickly implement media queries using TailwindCSS to make our websites responsive.

💡My Learnings and Experiences

I loved building this website, and I learned a lot of things while building FrontendPro, and still learning lots of things. The experience was truly enriching. Here's a list of things that I learned from this experience:

The first thing I learned while building FrontendPro is that I have a lot to improve on. That's okay, though, because the number of things to learn about coding is infinite. So if you don't know something, and not knowing has your brain fizzing - just ask!
I also got to know about lots of ways to improve the performance of a React App. Code Splitting and Lazy Loading are two of them. Using these techniques helps me to reduce the bundle size by splitting a large bundle of code into multiple small bundles that can be loaded dynamically, which improves the user experience. This technique helps us avoid performance issues associated with large bundles without actually reducing the amount of code in our React app.
Upgrading third-party dependencies or modules can be challenging. Upgrading is a process that sometimes involves rewriting some existing code to work with newer versions as per their latest syntax in order to avoid errors or improve readability. Recently, I upgraded Firebase from v7 to v9 and React Router DOM from v5 to v6 in production. You'll find more information about that in the next section
Whether you're shipping a single page app or building a multi-page site, cross-browser testing is an essential thing to do before shipping the app to production. I used BrowserStack to test my React App on different devices and browsers. I got this tool for free from Github Student Developer Program.
SEO can't be avoided. SEO plays an important role in getting traffic through search engine results. This also helps our website become more discoverable.
I never registered a new domain before FrontendPro. I always deployed all my projects either on Vercel or Netlify for free. This was the first time I registered a domain, and fortunately, I got this domain for free(again, thanks to Github Student Developer Pack). After registering this domain, I hosted my project on Vercel to leverage its Vercel Edge Network compression, which results in better performance.
In addition to this, I learned more about the tools used to maintain code quality and consistency. I learned to set up Eslint and Prettier to find potential bugs, bad practices and to maintain the coding style in our project.

This is just a small collection of things I learned while building FrontendPro and hoping to learn lots more in the future.

🛠 Recent Improvement

I have recently worked on improving the User Experience and making it faster. I have worked on a number of different things including fixing bugs and adding new features. Here's a list of things that I worked on:

To encourage collaboration and make it more engaging for developers, I have started working on a comment section for the solution details page. This way, fellow developers can give constructive feedback on the solutions submitted by other developers. This feature is almost complete, will ship it to production soon. Here is a Sneak Peak👀 of this new feature! // Detect dark theme var iframe = document.getElementById('tweet-1523629805325135873-721'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1523629805325135873&theme=dark" }
To make our app more fun and exciting, I added a confetti animation that plays when the user submits a solution for a challenge. It looks great and makes the learning experience as fun as possible. Here is a Sneak Peak👀 of this feature! // Detect dark theme var iframe = document.getElementById('tweet-1520264639883640834-532'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1520264639883640834&theme=dark" }
I have recently worked on upgrading Firebase from v7 to v9 and React Router DOM from v5 to v6. The reason behind upgrading from Firebase v7 to v9 is version 9 enables a dramatically reduced app size. It adopts the modern JavaScript Module format, allowing for "tree shaking" practices in which you import only the artifacts your app needs. Depending on the app, tree-shaking with version 9 can result in 80% less kilobytes than a comparable app built using version 8.
I also improved the AuthContext code and made it more readable, modular, and reusable. I also wrote a couple of new custom hooks for fetching data from a Firebase to make the app's state management more accessible, and these hooks also helped me reduce Firebase reads. These custom hooks are completely reusable, so I can reuse them on my other projects without making many changes.

🤔 Future Plans

There are a lot of new things on our roadmap. Some of them I'm mentioning here:

We plan to add a Hashnode-style Emoji system to our comments section of the solution details page. The emoji system is great because it provides a fun and creative way for you to interact with fellow developers.
We love fun front-end challenges as much as you do, but we also want to add full-stack challenges on FrontendPro so that developers can put their full-stack knowledge to practical use.
Aside from adding front-end and full-stack challenges to the platform, I'm also planning to add Web 3 challenges on FrontendPro, so that Web 3 developers can build amazing Web3 projects for their portfolio.

We are always looking for feedback from users, so please if you have any suggestions or new feature ideas, you can open an issue on Github or you can share your ideas on our Discord server. You can also share new challenges Ideas or even a UI design of the challenge.

😀 Takeaways

The key takeaway from this blog are:

Start with something simple. You don't need to be a professional developer or an advanced programmer in order to create something amazing. Take what you already know and use it to make something new!
If you're looking to build something new, just get started! Don't wait until it's perfect, launch something simple and iterate on that. Perfection is a myth, we all have to start somewhere.
Don't be afraid to ask for help. There are so many resources available online, so if you ever get stuck on something just Google it! The internet is your friend and will never let you down!

🎁 Want to support this project

If you've liked what you've seen so far and want to support this Open Source project, there are a few ways to do that:

Give this project a star ⭐️ on Github.
If you are a social person, share it with your friends on your favourite social media platform.
And of course, if you're a UI designer and have time on your hands, you can contribute a UI design for the challenge—I'd be super grateful if you did.
At last, if you want to buy me a coffee for my hard work, please click here GitHub Sponsors.

🙏 Thank You for reading this blog

Thanks for reading! I hope these insights have been helpful. If you have any questions or comments, please get in touch via Twitter or LinkedIn!

If you enjoyed this post, I would greatly appreciate it if you shared it on your favourite social media platform.

Please take a look around my Youtube channel and subscribe if you like it!

Cheers, and see you in the next one! 🙏

Thank You

Github Externship Program

Rishi Purwar — Sat, 03 Apr 2021 12:24:04 +0000

Hello Everyone,

The GitHub Externship is a 90 days fellowship program. The GitHub Externship program is about learning, preparing students to be market-ready, strengthening industry-academia relations, and giving practical experience to students. This also aims to provide innovative solutions to the partner organizations on their existing challenges, organizations could potentially identify real talent that can be employed by the organizations at later stages.

If you want to know about Github Externship Program, you should check out this video.
https://youtu.be/woH-1LdmHV0

How to use Git and GitHub inside of VS Code Editor

Rishi Purwar — Mon, 30 Nov 2020 08:01:14 +0000

Hello Everyone,

In today's tutorial, I am going to show you How to use Git and GitHub inside of VS Code Editor.

After reading this blog, you don't need to remember all those git commands.

If you prefer to watch a video tutorial, you can check it out over here.

Basic Setup

First, start by creating a new folder and name it whatever you want, and then open it with VS Code Editor.

And then create a new file inside this folder like a index.html file or name it whatever you want so that we can make some changes to it and demonstrates to you how git and GitHub work inside the VS Code Editor.

Now add a simple boilerplate inside the index.html file by pressing shift + 1.

Please make sure you are using the latest version of VS Code Editor(I'm using the version: 1.51.1)

Create a GitHub repository

Let's create a new GitHub repository right inside of VS Code Editor. Now, you don't need to go to the official GitHub site and then create a new repository from there anymore.

First, click on the source control icon on the left sidebar or press
ctrl + shift + g to open source control panel. It should look like this.

And then click on the Publish to GitHub button.
This will open a dialog box like this.

and then click on the allow button, this will allow the GitHub extension to sign in using your GitHub account.

After that, a window will open in your browser to authorize your GitHub account, just click on the Continue button and then click on the Authorize button to authorize your GitHub account.
Now your GitHub account is setup inside of VS Code Editor.
Again open the VS Code, you will see a dialog box like this.

First, enter your project name or leave it to default and then select the repository type. If you want to create a public repository, click on the Publish to GitHub public repository, else click on the Publish to Github private repository.

Now, your Github repository is created, if you want to check it, go to the repository section of your GitHub account.
Now, your source control tab should look like this.

How to use Git inside of VS Code Editor?

Now, make some changes in the index.html file so that we can learn How to use Git inside of VS Code?
I just added an h1 tag inside the file, now the source control panel shows that changed file under the Changes section.

The next step is to stage these changes, just click on the plus button to stage the changes and if you want to stage all the changes at once then click on the plus icon that is in line with the Changes title respectively.

All the changes are now staged. The next step is to commit these changes.
Enter your commit message inside the input and then click on the tick icon to commit all the changes like this.

Now, the next step is to push these changes to your GitHub repository.
Click on the three-dot button and then click on the Push, Pull option, and then click on Push. This will push all the changes to the master branch.
You can also create a new branch, click on three dots, and then click on Branch and then click on Create Branch and enter your branch name, this will create a new branch for you. Then push all these changes in the branch.
Now, you pushed the changes, if you want to check it, open this repository in your browser.

Congratulations🎉! You successfully pushed your changes to your GitHub repository without opening the command line.

Hopefully, you learned about How to use Git and GitHub inside of VS Code Editor.

Thanks for reading this blog

If you find the blog helpful, feel free to subscribe to our newsletter so whenever our new post goes live, you'll get the notification first.

Do leave your feedback and suggestions as comments.

Check out my youtube channel

Let's connect on Twitter

Thank You

Setting up Tailwind CSS v2.0 with Create React App

Rishi Purwar — Wed, 25 Nov 2020 08:33:52 +0000

Hello Everyone,
Today I am going to show you how to set up Tailwind CSS v2.0 with create react app.

Create Your React Project

So before starting to set up Tailwind CSS with create react app, first, we need to create a react project using the command below if you already have a project, you don't need to create it again.

npx create-react-app your_react_project_name

Setting Up Tailwind CSS

Now we can start setting up Tailwind CSS in our react project.
If you prefer to watch video tutorial, you can check out it over here .

Installing npm packages

First, we need to install tailwindcss, postcss, autoprefixer and postcss-cli packages as dev dependencies using npm.

PostCSS: PostCSS is a tool for transforming CSS with JS plugins.

Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules. It is a CSS post-processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code.
If you want to read more about postcss, check out their documentation.

So, in order to install all the four npm packages, you need to run this command

npm install tailwindcss postcss autoprefixer postcss-cli -D

After installing the npm packages, now, you need to create a new folder inside src folder and name it assets and then inside the newly created assets folder create two files output.css and tailwind.css.
Open your tailwind.css file and paste the following code.

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

Now, If you want to see all the tailwind default configuration, you can run this command to generate a tailwind config file.

npx tailwindcss init --full

The above command generates a tailwind.config.js file which contains all the default tailwind configurations. I don't recommend you directly make any changes in this file.

After that create a tailwindcss-config.js and postcss.config.js file by using this command

npx tailwindcss init tailwindcss-config.js -p

tailwindcss-config.js file looks something like this.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

In this file, you can extend default tailwind CSS configurations like colors, fonts, and much more.

Now, Open your postcss.config.js file and change the tailwindcss line with this one.

tailwindcss: { config: './tailwindcss-config.js' },

Your complete postcss.config.js file looks like this.

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
    autoprefixer: {},
  },
}

Now, open your package.json file and replace all the script files with these ones.

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/output.css"
  }

Import output.css file

Now, you need to import the output.css file inside your app.js file like this.

import './assets/output.css'

And run

npm start

Congratulations🎉! You successfully set up Tailwind CSS v2.0 in your react project.

Thanks for reading this blog

If you find the blog helpful, feel free to subscribe to our newsletter so whenever our new post goes live, you'll get the notification first.

Do leave your feedback and suggestions as comments.

Check out my youtube channel

Let's connect on Twitter

Thank You

How you created your first side project?

Rishi Purwar — Sun, 25 Oct 2020 14:39:22 +0000

Make Your First Open Source Contribution

Rishi Purwar — Fri, 02 Oct 2020 10:24:15 +0000

Hello Everyone,
If you are a beginner and interested in contributing to opensource then I made a video about it.
This video will help you to get started with open source and helps you to make your first open-source contribution.
If you are interested in contributing in opensource then click on this link to get started with open source.
https://youtu.be/9yx3XZq4JxM

Thank You.

Quick Review of 5 Of The Most Powerful JavaScript Methods

Rishi Purwar — Sat, 26 Sep 2020 05:31:01 +0000

Hello 👋Everyone,

In this article, I am going to discuss 5 of the most powerful JavaScript methods.

Now, let's start discussing these methods one by one.

Split:

This method is used to split a string into an array of substrings and it returns the new array. Splitting of a string is done by searching for a pattern where the pattern is provided as the first parameter in the method's call.

Let's take one example so that you can understand it clearly:

const string = "Javascript is a programming language."
const newArr = string.split(" ");
console.log(newArr);

If you noticed in the above code, I add space inside the .split method.

This space is used as a separator to split a string into an array of substrings. A split method doesn't change the value of the original string.

If you do console.log(newArr). You'll get a new array that looks like this.

["Javascript", "is", "a", "programming", "language."]

Now, your string is converted into an array. This method is one of the most powerful method.

2.
Math.random:

This method returns a random number between 0 (inclusive) and 1 (exclusive).

It basically returns a random floating-point number(decimal number).

const randomNum = Math.random();
console.log(randomNum);

If you run the above code, you see a number between 0 and 1 like 0.4795164735135027.

If you want an integer instead of a floating-point number, you should wrap Math.random() with Math.floor(). Math.floor() method round a number downward to its nearest integer like so.

const randomNum = Math.floor(Math.random());
console.log(randomNum);

Now, if you want an integer between 0 and 20. Your code should look like this.

const number = 20;
const randomNum = Math.floor(Math.random()*number);
console.log(randomNum);

I hope you'll understand how Math.random() method works.
Now, let's move to our third method.

3.
forEach:

This method is used to loop through an array. If you used for loop to loop through an array, after reading this, you'll never go to use that.

let say we have an array:

const numbers = [1,2,3,4,5];

Now, if you want to multiply each number inside an array by 2, How do you do that?

Here, the forEach() method comes into play. Let see how it works.

Basically, the forEach() method calls a function once for each element in an array, in order.

const numbers = [1,2,3,4,5];
numbers.forEach(number => {
    console.log(number*2);
});

//2
//4
//6
//8
//10

So, in the above code for each number in an array, we call a function which multiplies each number by 2. I think, now you understand how to use forEach method.

4.
filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Now, let's take one example to clearly understand it.

const ages = [18,15,10,20,22];
const filterArr = ages.filter(age => age>18);
console.log(filterArr);

So, in the above example, I take an array of ages and apply the filter method to it.

Filter method executes a function for each element in an array and checks whether it is satisfying the condition provided by the given function or not. If it satisfies the given condition, it returns that element to the new array otherwise it doesn't store that element in the filterArr array.

I hope now you have a clear understanding of how to use the filter method. This method is basically used to implement delete functionality in various apps

Note: filter() method does not change the value of the original array.

filter() method does not run the function for array elements without values.

5.
Map method:-

This method calls a provided function for each element in an array and then it creates a new array with the results of calling a function for every array element.

Now, let's take an example to understand it better.

const numbers = [1,2,3,4,5];
const newArr = numbers.map(number => {
    return number*number;
});
console.log(newArr);

In the above code, I take a numbers array and then apply the .map method to it. For each number, I call a function that returns a square of that number and creates a new array named newArr

Now, if you do console.log(newArr). You will get a new array that contains a square of numbers like this.

[1, 4, 9, 16, 25]

This method doesn't change the value of the original array.

Summary:-

Now, We have covered 5 of the most powerful javascript methods. These methods are very useful and help us to write cleaner code.

Thanks for reading this blog

If you find the blog helpful, feel free to subscribe to our newsletter so whenever our post goes live, you'll get the notification first.

Do leave your feedback and suggestions as comments.

Check out my youtube channel

Let's connect on Twitter

Animated Navigation Bar For Beginners using HTML & CSS

Rishi Purwar — Tue, 22 Sep 2020 06:00:50 +0000

Hello Everyone,
I uploaded a video on How to make Beautiful Animated Navigation Bar using HTML & CSS.
Please go check it out: https://youtu.be/n2gLAYWpTV4

Please consider SUBSCRIBING if you find the video useful...
Thank You

DEV Community: Rishi Purwar

Build a Custom Toast Notification Component with ReactJs & Context API

Demo

Cloning the starter code

Creating the Toast Notification Component

Setting up the Toast Notification Context

Creating the Toast Notification Reducer Function

Creating the useToast Hook

Using the useToast Hook

Adding dismiss button functionality

Adding a Progress Bar and Auto-Dismiss Timer

Adding Hover on Pause functionality

Customizing Toast Notification Component position

Adding animation to the Toast component

Conclusion

Build a Random Quote Generator with HTML, CSS, and JavaScript

Getting Started

Setting Up the HTML

Styling the Quote Generator with CSS

Fetching Quotes from an External API using JavaScript

Generating Random Quotes with JavaScript

Adding the Tweet Button

Conclusion

10 Frontend Projects to Take Your Coding Skills to the Next Level

1. Blog Card Component

Project Requirements

Learning outcomes

Resources to help complete the project

2. Payment Landing Page

Project Requirements

Learning outcomes

Resources to help complete the project

3. Pricing Card Page

Project Requirements

Learning outcomes

Resources to help complete the project

4. Random Quote Generator

Project Requirements

Learning outcomes

Resources to help complete the project

5. Contact Us Form

Project Requirements

Learning outcomes

Resources to help complete the project

6. Accordion Component

Project Requirements

Brownie Points

Learning outcomes

7. OTP Verification Component

Project Requirements

Brownie Points

Learning outcomes

Resources to help complete the project

8. Calendar Viewer Component

Project Requirements

Brownie Points

Learning outcomes

Resources to help complete the project

9. Multi-select Search Component

Project Requirements

Brownie Points

Learning outcomes

Resources to help complete the project

10. Video Player Web App

Project Requirements

Brownie Points

Learning outcomes

Resources to help complete the project

Conclusion

Become a Pro in Frontend Development with FrontendPro.dev

How I Built A Web Development Challenges Website With $0 (And You Can Too!)

🚀 What is FrontendPro?

👷‍♂️ Why did I build FrontendPro?

👨‍💻 The Tech Stack

Why did I choose ReactJs?

Why did I choose Firebase?

Why did I choose TailwindCSS?

💡My Learnings and Experiences

🛠 Recent Improvement

🤔 Future Plans

Creating the `useToast` Hook

Using the `useToast` Hook