DEV Community: Chaoo Charles

🎉I tried to create a platform like DEV in Next.js 15

Chaoo Charles — Thu, 29 May 2025 14:00:51 +0000

If you’re a software developer, chances are you’ve experienced imposter syndrome at some point. Despite coding in JavaScript and React for years, I sometimes feel like I know everything and nothing all at once. This peculiar feeling intensifies whenever there’s a new JavaScript framework release or a major update in my tech stack. I remember the confusion (and excitement) when React introduced hooks after I’d just gotten comfortable with class components, or when Next.js switched to the App Router from Pages directory.

What I’ve realized is that the tech world is always evolving, and you never truly know "everything." But that’s also what makes it engaging. To overcome imposter syndrome, I make it a point to build projects with any tech stack I have doubts about. Additionally, I create tutorials or full courses on my YouTube channel. Teaching others is a fantastic way to solidify your knowledge and build confidence.

My Most Recent Challenge:

Server Actions vs APIs, Server Components vs Client Components, Next Auth v5 (now Auth.js), Server Side Rendering...

I took on Next.js 15 and built a fullstack blogging platform inspired by DEV.

Feature in my blog platform:

🔐 Complete Auth System with Auth.js v5: Credential login (email and password), OAuth (Google and GitHub), email verification, password reset, and more.
✍️ Block Note Editor: A rich-text editor similar to Notion, supporting images, code blocks, and essential editing features.
📃 Blog Pagination: Server-side pagination for improved SEO and performance.
🌓 Dark & Light Themes: Seamless switching between themes.
⬆️ Image Uploads: Upload, replace, and delete images smoothly.
👍 Blog Reactions: Like and bookmark blogs.
🔎 Search and Tag Filters: Easily find and filter blogs by tags.
🗨️ Comments & Replies: Engage with blog posts through nested comments and replies.
👤 User Profiles: Manage user details, settings, and authored blogs.
👥 Follow System: Follow and unfollow users.
🔔 Real-Time Notifications: Powered by Socket.io for instant updates.
📊 Admin Dashboard: Manage the platform as an admin.
🚀 Full Deployment: All features live and ready to use.

On top of that, I created a comprehensive course about it on my YouTube channel, teaching everything from scratch. I’ve found that the best way to learn is also to teach—and share your journey with others.

Curious to see it in action?

Try out the app: https://webdevblog-course.onrender.com.

View the course: https://youtu.be/SVZ30q68YlQ?si=zug4gynanlbZH2I6

If you're struggling with imposter syndrome, remember you’re not alone. Dive into projects, share your knowledge, and let each new challenge become an opportunity for growth. You’ll be surprised how much you can learn and teach along the way!

🎉🎉Build and Deploy a Realtime Video Call Application : Next.js, WebRTC, Socket.io

Chaoo Charles — Fri, 27 Sep 2024 15:07:38 +0000

In this course, I’ll walk you through the process of building a realtime video call application from scratch using Next.js, WebRTC, and Socket.io.

We will have call Notification

We will start by setting up the Next.js environment and then dive into implementing WebRTC for peer-to-peer connections. You’ll learn how to use Socket.io for signaling between clients, enabling seamless video and audio communication.

I will give you a walkthrough of how webrtc works

This course is available for free on my youtube channel. You can check it out below.

🎉 Fullstack CRUD in Next.js Server Actions, React.js, Typescript, TailwindCSS and PostgresSQL on Neon

Chaoo Charles — Wed, 26 Jun 2024 11:51:33 +0000

Learn how to perform CRUD operation in Next.js and React Server Actions. Instead of creating APIs, we will use async functions which will run on the server to make changes to the database and fetch the data.

Learn everything you need to know in the following course, free on my youtube channel

🎉🎉 E-commerce product page in HTML, CSS and JavaScript - Frontend Mentor Challenge

Chaoo Charles — Wed, 17 Apr 2024 13:26:00 +0000

In this post we will take an existing design from Frontend Mentor, and convert the design into a HTML, CSSand JavaScript webpage.

The webpage will have some cool features like:

Image gallery
Image slide show
Adding product to cart
Removing product from cart
Cart counter
Mobile responsiveness
and more...

Interested in a video tutorial guide? I got you sorted. The following is the video:

Subscribe to my channel for more.

Starter files

To get the designs and starter files, visit the following link which will take you to the front-end mentor challenge: E-commerce product page

After downloading the starter file, just unzip the zipped folder. Open the unzipped folder with your favorite code editor. I will be using vs-code. You should now have the following starter files.

design folder - this folder have all the designs you need to complete the challenge
images - these are the different images and icons you will need when working on the web page
index.html - A html template with content to get started with.
README - please read the README to get more details about the challenge and what is expected
style-guide - a guide on fonts and colors to be used

Head

Open the index.html file. At our head tag we will link the different css and javascript files that we will need. Remove the already existing style tag, we will use an external css file for styles called main.css. Add script tags for main.js, slider.js, and cart.js.



  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | E-commerce product page</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js" defer></script>
    <script src="slider.js" defer></script>
    <script src="cart.js" defer></script>
  </head>

Note how we have the defer attributes at our scripts. When you include a script with the defer attribute, the browser will download the script in the background while continuing to parse and render the HTML. Once the HTML parsing is complete, the deferred scripts will be executed in the order they appear in the document.

Make sure to also create these files at the root. Note how the folder structure now have additional files. That is main.css, main.js, slider.js, and cart.js.

Nav

At index.html file we will start by working on our navbar. Below will be our html markup for the navbar. We will make sure to place our nav inside the div .container which will set a maximum width for all our content.



<body>
    <div class="container">
      <header>
        <nav class="navbar">
          <section class="nav-first">
            <svg
              class="menu-icon"
              width="16"
              height="15"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M16 12v3H0v-3h16Zm0-6v3H0V6h16Zm0-6v3H0V0h16Z"
                fill="#69707D"
                fill-rule="evenodd"
              />
            </svg>
            <div class="logo">
              <img src="images/logo.svg" alt="sneakers logo" />
            </div>
            <div class="backdrop"></div>
            <div class="nav-links">
              <svg
                class="close-icon"
                width="14"
                height="15"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z"
                  fill="#69707D"
                  fill-rule="evenodd"
                />
              </svg>
              <a href="#">Collections</a>
              <a href="#">Men</a>
              <a href="#">Women</a>
              <a href="#">About</a>
              <a href="#">Contact</a>
            </div>
          </section>
          <section class="nav-second">
            <div class="cart">
              <img
                class="cart-icon"
                src="images/icon-cart.svg"
                alt="cart icon"
              />
              <div class="cart-container">
                <div class="cart-title">Cart</div>
                <div class="cart-items empty">
                  <p class="cart-empty">Your cart is empty</p>
                </div>
                <button class="checkout empty">Checkout</button>
              </div>
              <div class="cart-count">
                <span class="qty">0</span>
              </div>
            </div>
            <div class="avatar">
              <img src="images/image-avatar.png" alt="avatar" />
            </div>
          </section>
        </nav>
      </header>
    </div>
  </body>

Initial CSS

At main.css we will start by importing Kumbh Sans font from google fonts. We then remove the default margin and padding from all the elements and set box-sizing to border-box. This will tell css to include the padding and border of the elements to their height and width. This way we will not have unexpected sizes of our elements.

We also target :root to setup css variables for our colors from the style guide file. The following will be our initial css.



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

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

:root {
  --orange: hsl(26, 100%, 55%);
  --pale-orange: hsl(25, 100%, 94%);
  --very-dark-blue: hsl(220, 13%, 13%);
  --dark-grayish-blue: hsl(219, 9%, 45%);
  --grayish-blue: hsl(220, 14%, 75%);
  --light-grayish-blue: hsl(223, 64%, 98%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --black-with-opacity: hsla(0, 0%, 0%, 0.75);
}

html {
  font-family: "Kumbh Sans", sans-serif;
}

a {
  text-decoration: none;
  color: var(--dark-grayish-blue);
}

body {
  min-height: 100vh;
  min-width: 100vw;
  position: relative;
}

.container {
  max-width: 1120px;
  min-height: 100vh;
  padding: 0 5px;
  margin: auto;
}

Nav CSS

To layout our navbar we will just use css flex box. Notice how we had divided the navbar into two sections. .nav-first and .nav-second. On the first section we style the logo and links while on the second section we will style our cart and profile. Since the cart styles are more detailed, we will have a separate section for it below.



/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-bottom: 1px solid var(--grayish-blue);
  margin-bottom: 85px;
  position: relative;
}

.nav-first {
  display: flex;
  align-items: center;
  gap: 50px;
  padding-bottom: 30px;
}

.nav-first .menu-icon {
  display: none;
}

.nav-first .backdrop {
  display: none;
}

.nav-links .close-icon {
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  position: relative;
}

.nav-links a:hover {
  color: var(--black);
}

.nav-links a:hover::after {
  content: "";
  position: absolute;
  background-color: var(--orange);
  width: 100%;
  height: 3px;
  left: 0;
  bottom: -47px;
}

.nav-second {
  display: flex;
  align-items: center;
  gap: 45px;
  padding-bottom: 30px;
}

.logo img {
  height: 22px;
}

.avatar img {
  height: 50px;
  width: 50px;
}

Cart CSS

.cart-container will hold our cart items. .empty is a dynamic class which we will add or remove it depending on whether we have items in cart or not by making use of javascript. By default the cart will be empty. Note how .cart-container has a display of none. We will add an active class with javascript whenever we click the cart icon in order to open the cart. If you check the html that we currently have, we don't have a .cart-item. We will create the cart-item at our javascript file and make it a child of .cart-items.



/* Cart */
.cart {
  position: relative;
}

.cart-icon {
  cursor: pointer;
}

.cart-container {
  right: -95px;
  top: 50px;
  z-index: 9;
  position: absolute;
  width: 360px;
  min-height: 260px;
  background: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: none;
}

.cart-container.active {
  display: flex;
  flex-direction: column;
}

.cart-title {
  padding: 25px 20px;
  font-weight: 700;
  border-bottom: 1px solid var(--grayish-blue);
}

.cart .cart-items {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.cart .cart-items.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 185px;
  font-weight: 700;
}

.cart .cart-items.empty .cart-empty {
  color: var(--grayish-blue);
  display: inline-block;
}

.cart .cart-items .cart-empty {
  display: none;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cart-item img {
  height: 50px;
  border-radius: 5px;
}

.cart-item {
  color: var(--dark-grayish-blue);
}

.cart-item .total-price {
  color: var(--black);
  font-weight: 700;
}

.checkout.empty {
  display: none;
}

.checkout {
  height: 56px;
  margin: 27px 23px;
  border: none;
  color: var(--white);
  background-color: var(--orange);
  border-radius: 10px;
  font-weight: 700;
}

.checkout:hover {
  cursor: pointer;
}

.cart-count {
  cursor: pointer;
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: var(--orange);
  color: var(--white);
  min-width: 25px;
  min-height: 17px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.delete-item {
  border: none;
  background: none;
  cursor: pointer;
}

Side Nav

To style the side navbar, add the following at the bottom of our css file. We have created a breakpoint at which the side nav will become active.



/* Mobile */

@media (max-width: 755px) {
  .navbar {
    margin-bottom: 0;
    border-bottom: none;
  }

  .nav-first,
  .nav-second {
    gap: 30px;
    padding-bottom: 10px;
  }

  .nav-first .menu-icon {
    cursor: pointer;
    display: inline-block;
  }

  .nav-links {
    display: none;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: -5px;
    max-width: 220px;
    width: 100%;
    height: 100vh;
    background: var(--white);
    align-items: start;
    z-index: 15;
    padding: 25px 30px;
  }

  .nav-first .backdrop.active {
    background: var(--black-with-opacity);
    width: 100vw;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    left: -5px;
    z-index: 11;
  }

  .nav-links.active .close-icon {
    display: inline-block;
    margin-bottom: 30px;
    cursor: pointer;
  }

  .nav-links a {
    font-weight: 700;
    color: black;
  }

  .nav-links.active a:hover::after {
    bottom: -5px;
  }
}

To open and close the navbar, let's add some javascript. At main.js, add the following code:



const menuIcon = document.querySelector(".menu-icon");
const backdrop = document.querySelector(".backdrop");
const navLinks = document.querySelector(".nav-links");
const closeIcon = document.querySelector(".close-icon");

menuIcon.addEventListener("click", () => {
  backdrop.classList.add("active");
  navLinks.classList.add("active");
});

closeIcon.addEventListener("click", () => {
  backdrop.classList.remove("active");
  navLinks.classList.remove("active");
});

backdrop.addEventListener("click", () => {
  backdrop.classList.remove("active");
  navLinks.classList.remove("active");
});

Image Gallery, Lightbox and Product Details

At our index.html just right after our header, we will add a main section with the html markup for our gallery, lightbox and product description.



<section class="main">
        <div class="default gallery">
          <div class="main-img">
            <img
              class="active"
              src="images/image-product-1.jpg"
              alt="product-img"
            />
            <img src="images/image-product-2.jpg" alt="product-img" />
            <img src="images/image-product-3.jpg" alt="product-img" />
            <img src="images/image-product-4.jpg" alt="product-img" />
          </div>
          <div class="thumb-list">
            <div class="active">
              <img
                src="images/image-product-1-thumbnail.jpg"
                alt="product-img"
              />
            </div>
            <div>
              <img
                src="images/image-product-2-thumbnail.jpg"
                alt="product-img"
              />
            </div>
            <div>
              <img
                src="images/image-product-3-thumbnail.jpg"
                alt="product-img"
              />
            </div>
            <div>
              <img
                src="images/image-product-4-thumbnail.jpg"
                alt="product-img"
              />
            </div>
          </div>
        </div>

        <div class="lightbox">
          <div class="gallery">
            <div class="main-img">
              <!-- icons -->
              <span class="icon-close">
                <svg width="14" height="15" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z"
                    fill="#69707D"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <span class="icon-prev">
                <svg width="12" height="18" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M11 1 3 9l8 8"
                    stroke="#1D2026"
                    stroke-width="3"
                    fill="none"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <span class="icon-next">
                <svg width="13" height="18" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="m2 1 8 8-8 8"
                    stroke="#1D2026"
                    stroke-width="3"
                    fill="none"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>

              <!-- main images -->
              <img
                class="active"
                src="images/image-product-1.jpg"
                alt="product-img"
              />
              <img src="images/image-product-2.jpg" alt="product-img" />
              <img src="images/image-product-3.jpg" alt="product-img" />
              <img src="images/image-product-4.jpg" alt="product-img" />
            </div>
            <div class="thumb-list">
              <div class="active">
                <img
                  src="images/image-product-1-thumbnail.jpg"
                  alt="product-img"
                />
              </div>
              <div>
                <img
                  src="images/image-product-2-thumbnail.jpg"
                  alt="product-img"
                />
              </div>
              <div>
                <img
                  src="images/image-product-3-thumbnail.jpg"
                  alt="product-img"
                />
              </div>
              <div>
                <img
                  src="images/image-product-4-thumbnail.jpg"
                  alt="product-img"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="content">
          <h3>SNEAKER COMPANY</h3>
          <h2 class="product-name">Fall Limited Edition Sneakers</h2>
          <p class="product-desc">
            These low-profile sneakers are your perfect casual wear companion.
            Featuring a durable rubber outer sole, they’ll withstand everything
            the weather can offer.
          </p>
          <div class="price-info">
            <div class="price">
              <span class="current-price">$125.00</span>
              <span class="discount">50%</span>
            </div>
            <div class="prev-price">$250.00</div>
          </div>
          <div class="add-to-cart-container">
            <div class="counter">
              <button class="minus">
                <svg
                  width="12"
                  height="4"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <defs>
                    <path
                      d="M11.357 3.332A.641.641 0 0 0 12 2.69V.643A.641.641 0 0 0 11.357 0H.643A.641.641 0 0 0 0 .643v2.046c0 .357.287.643.643.643h10.714Z"
                      id="a"
                    />
                  </defs>
                  <use fill="#FF7E1B" fill-rule="nonzero" xlink:href="#a" />
                </svg>
              </button>
              <span class="count">0</span>
              <button class="plus">
                <svg
                  width="12"
                  height="12"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <defs>
                    <path
                      d="M12 7.023V4.977a.641.641 0 0 0-.643-.643h-3.69V.643A.641.641 0 0 0 7.022 0H4.977a.641.641 0 0 0-.643.643v3.69H.643A.641.641 0 0 0 0 4.978v2.046c0 .356.287.643.643.643h3.69v3.691c0 .356.288.643.644.643h2.046a.641.641 0 0 0 .643-.643v-3.69h3.691A.641.641 0 0 0 12 7.022Z"
                      id="b"
                    />
                  </defs>
                  <use fill="#FF7E1B" fill-rule="nonzero" xlink:href="#b" />
                </svg>
              </button>
            </div>
            <button class="add-to-cart">
              <span>
                <svg width="22" height="20" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z"
                    fill="#69707D"
                    fill-rule="nonzero"
                  />
                </svg>
              </span>
              <span>Add to cart</span>
            </button>
          </div>
        </div>
      </section>

Before the mobile responsiveness, we will style the gallery and the product details. By default the lightbox(image slideshow) will be hidden, and we will add the active to it upon clicking the .main-img.



/* Main */
.main {
  display: flex;
  gap: 125px;
  min-height: 570px;
  align-items: center;
  padding: 0 50px;
}

/* Image gallery */
.gallery {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.gallery .main-img img {
  display: none;
}

.gallery .main-img img.active {
  display: inline-block;
  max-width: 445px;
  max-height: 445px;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  cursor: pointer;
}

.gallery .thumb-list {
  display: flex;
  justify-content: space-between;
  max-width: 445px;
  width: 100%;
}

.gallery .thumb-list div {
  max-width: 90px;
  max-height: 90px;
  margin: 0 2px;
}

.gallery .thumb-list img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
}

.gallery .thumb-list img:hover {
  opacity: 50%;
}

.gallery .thumb-list .active img {
  opacity: 30%;
}

.gallery .thumb-list .active {
  border: 2px solid var(--orange);
  border-radius: 13px;
  margin: 0;
}

/* lightbox */
.lightbox {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  background: var(--black-with-opacity);
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox.active .gallery {
  max-width: 445px;
}

.lightbox .main-img {
  position: relative;
}

.lightbox .icon-prev,
.lightbox .icon-next {
  position: absolute;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 50%;
}

.icon-prev:hover,
.icon-next:hover {
  cursor: pointer;
}

/* .icon-prev svg path {
  fill: var(--orange);
} */

.icon-prev {
  top: 50%;
  transform: translate(-50%, -50%);
}

.icon-next {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.icon-close svg path {
  fill: var(--white);
}

.icon-close svg path:hover {
  cursor: pointer;
  fill: var(--orange);
}

.icon-close {
  position: absolute;
  right: 0;
  top: -40px;
}

/* Content */

.content {
  flex: 1;
}
.content h3 {
  font-size: 16px;
  color: var(--orange);
}

.content h2 {
  font-size: 37px;
  margin: 20px 0 40px 0;
}

.content p {
  font-size: 16px;
  color: var(--dark-grayish-blue);
  margin-bottom: 30px;
}

.price {
  display: flex;
  align-items: center;
  gap: 15px;
}

.current-price {
  font-weight: 700;
  font-size: 25px;
}

.discount {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 10%;
  height: 25px;
  background-color: var(--pale-orange);
  font-weight: 700;
  color: var(--orange);
}

.prev-price {
  margin: 10px 0 35px 0;
  font-size: 18px;
  color: var(--grayish-blue);
  font-weight: 700;
  text-decoration: line-through;
}

.add-to-cart-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  width: 150px;
  height: 55px;
  background: var(--light-grayish-blue);
}

.counter button {
  width: 50px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}

.counter .count {
  font-weight: 700;
}

.add-to-cart {
  color: var(--white);
  background-color: var(--orange);
  border: 0px;
  height: 55px;
  width: 100%;
  border-radius: 10px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  padding: 0 5px;
}

.add-to-cart svg path {
  fill: var(--white);
}

Gallery and Slider Logic

Now let's add logic for our gallery and lightbox. At slider.js add the following code. In the following code we have selected all the mainImages and all the thumbnails, both for gallery and lightbox. Their logic will be similar apart from the slider. The goal is to show a certain image upon clicking it's thumbnail.



const mainImages = document.querySelectorAll(".default .main-img img");
const thumbnails = document.querySelectorAll(".default .thumb-list div");
const lightboxMainImages = document.querySelectorAll(".lightbox .main-img img");
const lightboxThumbnails = document.querySelectorAll(
  ".lightbox .thumb-list div"
);
const lightbox = document.querySelector(".lightbox");
const iconClose = document.querySelector(".icon-close");
const iconPrev = document.querySelector(".icon-prev");
const iconNext = document.querySelector(".icon-next");

let currentImageIndex = 0;

const changeImage = (index, mainImages, thumbnails) => {
  mainImages.forEach((img) => {
    img.classList.remove("active");
  });
  thumbnails.forEach((thumb) => {
    thumb.classList.remove("active");
  });

  mainImages[index].classList.add("active");
  thumbnails[index].classList.add("active");
  currentImageIndex = index;
};

thumbnails.forEach((thumb, index) => {
  thumb.addEventListener("click", () => {
    changeImage(index, mainImages, thumbnails);
  });
});

lightboxThumbnails.forEach((thumb, index) => {
  thumb.addEventListener("click", () => {
    changeImage(index, lightboxMainImages, lightboxThumbnails);
  });
});

mainImages.forEach((img, index) => {
  img.addEventListener("click", () => {
    lightbox.classList.add("active");
    changeImage(index, lightboxMainImages, lightboxThumbnails);
  });
});

iconPrev.addEventListener("click", () => {
  if (currentImageIndex <= 0) {
    changeImage(mainImages.length - 1, lightboxMainImages, lightboxThumbnails);
  } else {
    changeImage(currentImageIndex - 1, lightboxMainImages, lightboxThumbnails);
  }
});

iconNext.addEventListener("click", () => {
  if (currentImageIndex >= mainImages.length - 1) {
    changeImage(0, lightboxMainImages, lightboxThumbnails);
  } else {
    changeImage(currentImageIndex + 1, lightboxMainImages, lightboxThumbnails);
  }
});

iconClose.addEventListener("click", () => {
  lightbox.classList.remove("active");
});

Let's break the above code down. We select the thumbnails and loop over each of them. This allows us to add click event listener to each of it, pass a callback function and then call changeImage function.



thumbnails.forEach((thumb, index) => {
  thumb.addEventListener("click", () => {
    changeImage(index, mainImages, thumbnails);
  });
});

The changeImage function uses the thumbnail index to change the active image. First we remove the .active class from all mainImages and thumbnails and then we use the passed index to add the .active class to only specific mainImage and it's thumbnail.
This logic will be similar for our lighbox when we change images by clicking on thumbnails.



const changeImage = (index, mainImages, thumbnails) => {
  mainImages.forEach((img) => {
    img.classList.remove("active");
  });
  thumbnails.forEach((thumb) => {
    thumb.classList.remove("active");
  });

  mainImages[index].classList.add("active");
  thumbnails[index].classList.add("active");
  currentImageIndex = index;
};

Open Lightbox

To open the lightbox, we looped over the mainImages and added the click event to each of them. Upon clicking the main Image, we add an active class to the lightbox. This will open the lightbox. Now to make sure that the clicked image is the one that show on the lightbox, we also call our changeImage function and pass the index of the clicked image. This will update the lightbox to the current image.



mainImages.forEach((img, index) => {
  img.addEventListener("click", () => {
    lightbox.classList.add("active");
    changeImage(index, lightboxMainImages, lightboxThumbnails);
  });
});

Next and Prev Images

Here we reused our changeImage function. The main thing to note is the correct calculation of the index. To simply explain it, for next we simply add 1 to the index. But if we get to the end, we move the count of the index back to 0. And for previous we decrease the index by 1 and if we get to the first image, we move the count of the index to the last image. We make use of the .length property to know the last image.



iconPrev.addEventListener("click", () => {
  if (currentImageIndex <= 0) {
    changeImage(mainImages.length - 1, lightboxMainImages, lightboxThumbnails);
  } else {
    changeImage(currentImageIndex - 1, lightboxMainImages, lightboxThumbnails);
  }
});

iconNext.addEventListener("click", () => {
  if (currentImageIndex >= mainImages.length - 1) {
    changeImage(0, lightboxMainImages, lightboxThumbnails);
  } else {
    changeImage(currentImageIndex + 1, lightboxMainImages, lightboxThumbnails);
  }
});

Cart Logic

Now add the following code at cart.js. At addToCartBtn we will add a click event listener. upon clicking the button we will extract the product details from the DOM including the name, price and image. The product quantity will already be available at our count variable. We will then call addItemToCart with the product details as parameters.

At addItemToCart we will create a cart item, notice how the information is dynamic depending on the details we got at addItemToCart as arguments, e.g the name, price etc

We also create a custom quantity attribute which will be helpful when calculating the total cart quantity at updateTotalCartQty function.

cartItem.dataset.quantity = count;

After creating the carItem, we then append it as a child of cartItems. This is how the item will simply be added to cart.



const countEl = document.querySelector(".count");
const minus = document.querySelector(".minus");
const plus = document.querySelector(".plus");
const cartIcon = document.querySelector(".cart-icon");
const cartContainer = document.querySelector(".cart-container");
const addToCartBtn = document.querySelector(".add-to-cart");
const cartItems = document.querySelector(".cart-items");
const checkout = document.querySelector(".checkout");
const cartCount = document.querySelector(".cart-count");

let count = 0;
let totalCartQty = 0;

const updateCount = (newCount) => {
  count = newCount;
  countEl.textContent = count;
};

minus.addEventListener("click", () => {
  if (count > 0) {
    updateCount(count - 1);
  }
});

plus.addEventListener("click", () => {
  updateCount(count + 1);
});

cartCount.addEventListener("click", () => {
  cartContainer.classList.toggle("active");
});

const updateTotalCartQty = () => {
  const cartItemsList = document.querySelectorAll(".cart-item");
  totalCartQty = 0;
  cartItemsList.forEach((item) => {
    totalCartQty += parseInt(item.dataset.quantity);
  });

  cartCount.innerHTML = `<span class="qty">${totalCartQty}</span>`;
};

// add item to cart

const addItemToCart = (name, price, imageSrc) => {
  const totalPrice = count * price;

  const cartItem = document.createElement("div");
  cartItem.classList.add("cart-item");
  cartItem.dataset.quantity = count;
  cartItem.innerHTML = `
      <img src="${imageSrc}" alt="${name}" />
      <div class="item-details">
        <div>${name}</div>
        <div>
            <p>
                $${price.toFixed(2)} x ${count} 
                <span class='total-price'>$${totalPrice.toFixed(2)}</span>
            </p>
        </div>
        </div>
        <button class="delete-item"> 
            <svg width="14" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M0 2.625V1.75C0 1.334.334 1 .75 1h3.5l.294-.584A.741.741 0 0 1 5.213 0h3.571a.75.75 0 0 1 .672.416L9.75 1h3.5c.416 0 .75.334.75.75v.875a.376.376 0 0 1-.375.375H.375A.376.376 0 0 1 0 2.625Zm13 1.75V14.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 1 14.5V4.375C1 4.169 1.169 4 1.375 4h11.25c.206 0 .375.169.375.375ZM4.5 6.5c0-.275-.225-.5-.5-.5s-.5.225-.5.5v7c0 .275.225.5.5.5s.5-.225.5-.5v-7Zm3 0c0-.275-.225-.5-.5-.5s-.5.225-.5.5v7c0 .275.225.5.5.5s.5-.225.5-.5v-7Zm3 0c0-.275-.225-.5-.5-.5s-.5.225-.5.5v7c0 .275.225.5.5.5s.5-.225.5-.5v-7Z" id="a"/></defs><use fill="#C3CAD9" fill-rule="nonzero" xlink:href="#a"/></svg>
        </button>
    `;

  cartItems.appendChild(cartItem);

  updateTotalCartQty();

  if (cartItems.classList.contains("empty")) {
    cartItems.classList.remove("empty");
    checkout.classList.remove("empty");
  }

  // attach an event listener to the delete button

  const deleteButton = cartItem.querySelector(".delete-item");
  deleteButton.addEventListener("click", (event) => {
    const cartItem = event.target.closest(".cart-item");
    removeItemFromCart(cartItem);
  });
};

addToCartBtn.addEventListener("click", () => {
  if (count === 0) return;
  const productName = document.querySelector(".main .product-name").textContent;
  const productPriceEl = document.querySelector(".main .current-price");
  const productPrice = parseFloat(productPriceEl.textContent.replace("$", ""));
  const productImg = document
    .querySelector(".default.gallery .main-img img")
    .getAttribute("src");

  addItemToCart(productName, productPrice, productImg);
  cartContainer.classList.add("active");

  updateCount(0);
});

// remove item from cart

const removeItemFromCart = (cartItem) => {
  cartItem.remove();
  updateTotalCartQty();

  if (cartItems.children.length === 1) {
    cartItems.classList.add("empty");
    checkout.classList.add("empty");
  }
};

Mobile responsiveness

Let's make the rest of the page responsive. At our breakpoint @media (max-width: 755px) after .nav-links.active, add the following.




/* main */
  .main {
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .main .default {
    display: none;
  }

  .lightbox {
    display: flex;
    position: relative;
    height: auto;
    width: auto;
    background: none;
  }

  .main .thumb-list {
    display: none;
  }

  .main .icon-prev {
    left: 50px;
    height: 45px;
    width: 45px;
  }

  .main .icon-next {
    right: 50px;
    height: 45px;
    width: 45px;
  }

  .gallery .main-img img.active {
    max-width: none;
    max-height: none;
    width: 100vw;
    height: auto;
    border-radius: 0;
  }

  .content {
    padding: 0 20px;
  }

  .content h2 {
    margin: 10px 0;
    font-size: 30px;
  }

  .price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .prev-price {
    margin: 0;
  }

  .add-to-cart-container {
    flex-direction: column;
  }

  .counter {
    width: 100%;
  }

  .counter button {
    width: 40%;
  }

  .cart-container {
    z-index: 20;
    right: -85px;
    top: 40px;
  }

That's it devs, incase of any confusion you can watch the video tutorial I pinned above and the source code is also available for free on my github: https://github.com/chaoocharles/ecommerce-product-page-html-css-javascript

Do me a favor now and subscribe to my channel 😊: https://www.youtube.com/c/chaoocharles

🌟⚒️ How to Learn Web Development and Land a Job Faster in 2024 (Beginners' Guide With Free Resources)

Chaoo Charles — Tue, 06 Feb 2024 02:29:57 +0000

1. The Problem - Being Stuck in The Tutorial Hell

I remember when I was learning to code, I learnt the basics of web development including HTML, CSS, JavaScript, PHP, SQL and WordPress from Sololearn and YouTube tutorials. Despite this I was really struggling to create real world projects using those skills. I was stuck for a long time (almost 2years), just learning to code with no meaningful progress in terms of projects' development. I know most beginners get stuck in this barrier (where you learn to code, but can't really use your skills to develop something meaningful). And when this is the case, it becomes hard to work on freelance projects or even secure a job since your portfolio of projects tend to be weak.

2. Break the Barrier

I broke this barrier when I decide enough is enough and I started to work on actual projects like coding a portfolio website from scratch using HTML, CSS and JavaScript or Creating a blog website in PHP and SQL. And after doing this for a few months I realized how much I had made progress in understanding how the web work. I also realized how I could have accelerated my learning process earlier if I had started to create projects earlier in my coding career.

For you to break the barrier faster, you need to take the project based learning path. Where you learn the fundamentals quick (like taking crash courses) and starting to work on projects right after. Of course your first few projects will be hard to get through but they will be totally worth it. You can start by following a tutorial to get you started on your first project but for further related projects you try to do them on your own and utilize the power of google when you get stuck. Example, if you learnt how to create a website landing page using HTML and CSS from a tutorial, after completing, try to create a different landing page with a slightly different design on your own using HTML and CSS. Frontend Mentor (https://www.frontendmentor.io/) has a lot of free designs you can try to implement.

See how I converted a landing page design from scratch into a pixel perfect HTM and CSS website.

Build a Complete Responsive Website in HTML and CSS | Frontend Mentor - Fylo dark theme landing page

After creating a landing page, now try to add some JavaScript to the project. Example, Open and Close a side navbar using JavaScript, Create a Slide Show of Testimonials/Images Using JavaScript, Add a Count Down Timer in JavaScript etc.

If you manage to code a website landing page without following a complete Tutorial and be able to sprinkle some JavaScript into it, Congratulations 🎉, you have already broken the barrier. At this point you can think of a nice design for your own portfolio website and code it from scratch using HTML, CSS and JavaScript. It doesn't have to be perfect but as long as you do it all by yourself, it will make you more comfortable with these technologies and be more confident with your skills.

At this point you can even start looking for Freelance Projects where you convert Designs Into HTML and CSS websites.

I know it is possible to get projects with just HTML and CSS skills because I have done it before. Below are some of my very first gigs I did with just HTML and CSS.

3. Create at least 3 Small JavaScript Focused Projects

Here I am assuming you have gone through the JavaScript fundamentals before you start building up the projects. If you don't know anything about JavaScript, then you can start with the following Crash Course.

JavaScript Crash Course For Beginners by Traversy Media

Getting familiar with JavaScript is a bit hard than getting familiar with HTML and CSS, that is why I recommend working on a minimum of 3 JavaScript projects. You would probably need more projects to become better and better, but about 3 of them will give you a pretty good Idea of what JavaScript is all about and how to manipulate the DOM.

Some people might recommend doing hundreds of these small JavaScript projects but I think that will just keep you stagnated, our approach here is to build just enough skills with a few projects quick and move on towards building one big project that solves a real world problem.

@florinpop17 have a very nice video on JavaScript Projects, I recommend choosing at least 3 of these projects and coding them for your JavaScript practice. Below is the video 👇

10 JavaScript Projects in 10 Hours - Coding Challenge 🔥

4. Build your first Fullstack Project

Here you can choose your frameworks of choice, but if you are starting out, deciding which frameworks to use tends to be tricky. If you don't know what to use on your fullstack projects I recommend going with the MERN stack or Next.js(A popular react framework). MERN stack involves React.js on the frontend and Node.js on the backend. Next.js can be used on the frontend and you use node.js on the backend but it is also a fullstack framework, meaning you can use Next.js to write backend code as well.

You will obviously need some knowledge before starting building up your projects, that is why I recommend taking some crash courses before starting the project. Take a crash course on React, Node and express. Express is basically a node.js framework which makes creating of the APIs easier. If you decide to use Next.js, then you will need to also take a crash course on the latest version of Next.js. A crash course on Next.js version 13 and above right now would be okay.

React Full Course for free ⚛️ (2024) by Bro Code

Learn Node Basics in 30 Minutes! by codeSTACKr

Learn Express JS In 35 Minutes by Web Dev Simplified

My 1hr Next.js 13 Tutorial is a good one. See it below 👇

Crash courses are meant to help you move quick, They don't usually cover everything about the language or framework but they definitely give you enough knowledge to get started.

At this point you should be well familiar with HTML, CSS, JavaScript, React, Node.js and Express. The next step will be to build your first fullstack project. In your first fullstack project, it will be okay to follow a tutorial to learn how everything works together. I have personally created several free courses which can help you to get up and running.

If you decided to use the MERN Stack, I recommend the following course.

Realtime Chat App Complete Course (free 🔥) - React, ContextAPI, Node.js and Socket.io

This course will teach your how to implement authentication, perform CRUD operations and implement web sockets for realtime messaging and notifications. It will really cement your knowledge in React and Node.js as well.

If you decided to use Next.js, you can build your first fullstack project using one of the following courses. These projects will help you understand more on React, Next.js, how to create and consume APIs, working with images, processing payment in stripe and more.

Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma

Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe

4. Build your second Fullstack Project

After coding and completing your first fullstack project, now it's time to get your hands dirty on your second fullstack project. Here you will use the same tech stack that you used on your first project. This will make it easy for you to get start and to actually complete the project.

This project will now be unique to you. Here I recommend solving a real world problem. Identify a problem around you and build a project for specifically that. Example, people are having problems getting houses to buy or rent around your area, so you build a project to make that process easier. Your project would connect people with properties available for rentals or purchase. That is just an example, ideas can be limitless. Just think of one good idea, document your idea (answer questions like what problem is the project trying to solve, how long it will take to build the project, etc), and implement it. The reason for this is, I want you to have a story behind the project, I also want your project to be unique and exciting to you. Not just a random clone of another app. You can even create a project for free for a real world business.

When you get stuck, use google, go to docs, use blog posts, and you can still use a few tutorials but try your best not to rely too much on tutorials when creating this project. You can remind yourself stuff from the first project and do your research on how you can add additional features. You can use ChatGPT to help you debug issues as well but don't copy paste codes. Basically learn how to do the research, and this is how you grow and be able to work on your own projects.

Now, this is the kind of project that you add to your resume and it counts as a real world experience, as in, you didn't just follow a tutorial to build it. On your resume you can have good pointers about it, like the problem you were trying to solve, the challenges you experienced while creating the project, the things you learnt, you are able to explain your code and so on. On an interview you are actually able to talk about your past project and being exited about it. If it's good enough you can actually even monetize this project, but the main goal is to have the hands on experience on a real world project.

This is how I became good at creating projects, for me to graduate from college, it was a requirement to solve a real world issue using code. And I think this is still the best way to go about it. When you take this approach, going forward you will be able to learn a technology quick and be able to use it in a project without getting stuck in the tutorial hell. The following was my first project. Not the best design or features but it really helped me to be confident with coding.

(just for motivation) My Final Year React Project - Projects' Progress Management System 🔥

If you successfully complete your project and put it online with an easily sharable link, then you are good enough to start applying for jobs and projects to work on. You can try freelance sites like Upwork, fiverr or advertise your skills on socials. You can actually even teach others on blog posts and increase your visibility.

5. Conclusion

Remember all this will take you time to accomplish. Code for at least 2hours daily for at least 9months. The more hours you put in the quicker you will get to your goal of creating a fullstack project by yourself. Be consistent and do not give up. By the end of 2024 you will be happy of how much you have learnt and accomplished.

Now, as you look for jobs and payable projects, remember to continue improving your skills. Continue learning JavaScript. Continue Building Projects. Consider learning Data Structure and Algorithms. Most tech interviews are pretty hard, learning Data Structure and Algorithms can help you pass the technical interviews. But you can still secure a position in some companies without going hard on Data Structure and Algorithms especially for front-end positions. That is why I recommend to start applying early and learn more while interviewing. Divide your day. Spend 50% of your day learning and the other 50% looking for jobs or projects. During interviews remember to show and mention your second project as part of your coding experience (do not say that you don't have experience, remember you solved a real world problem with code).

With your fullstack skills you can decide to focus now either on the front-end or backend. You can also be just a fullstack dev. Generally you will now be able to do bigger projects and earn way more with your skills and experience.

Below is an example of a project I did in less that 2weeks, compare the earning with the projects that I showed you at the HTML and CSS section and see the big progress

These are my takes on how you can move quicker. It's easy to get stuck in tutorial hell for years but by creating projects you can avoid that. I hope this was helpful. Give me your opinions at the comment section below.

Help me get to my goal of 100k subscribers on my youtube channel quick: https://www.youtube.com/c/chaoocharles

I am on X: https://twitter.com/ChaooCharles

Master React With These 10 Hooks 🔥

Chaoo Charles — Tue, 21 Nov 2023 13:17:58 +0000

Hooks are a major part of modern React and for that I created a video series explaining the most important 10 React Hooks in details. Understanding these hook will really help you to level up your react game.

Below are the 10 major react hooks explained with examples.

Enjoy! ✌️

Follow video series on YouTube

Subscribe to my YouTube channel

Follow me on twitter

0. The Rules of Hooks

Hooks should be called at a top level of a component. Do not call hooks inside conditions, loops or nested functions.
Hooks are only usable in react functional components and custom hooks. Do not use hooks in class components.

1. useState

The useState hook let's you add state variable to a component.

2. useEffect

The useEffect hook is use to synchronize a component with an external system (also know as side effects). Good examples of side effects are, data fetching, subscriptions/event listeners and timer/intervals.

3. useCallback

The useCallback hook helps you to optimize functions between re-renders.

4. useMemo

The useMemo hook is used in a similar way as the useCallback hook, only that useMemo is used to optimize values while useCallback is used to optimize functions.

5. useRef

The useRef hook is used to create a reference to a value(or element). The ref persists across renders and does not cause the component to re-render when its value changes.

6. useReducer

The useReducer hook is an alternative to useState hook. It is often favored for more complex state management scenarios.

7. useContext

The useContext hook is used to consume a context. Context in React is a way to pass data through the component tree without having to pass props manually at every level. useContext hook together with the react context are used to manage some form of global state, e.g a user/auth state.

8. useId

The useId hook is used to generate unique IDs that can be passed to accessibility attributes.

9. use (new)

The use hook lets you read the value of a resource like a Promise or context. This hook is unique because it does not follow all the rules of hooks. You can call it inside loops or even conditions like in if else statements.

10. useTransition

The useTransition hook lets you update the state without blocking the UI.

How Much JavaScript is Enough JavaScript to Learn React? 🤔

Chaoo Charles — Sun, 12 Nov 2023 11:00:28 +0000

The transition from javascript to react can be difficult especially if you are a beginner. The javascript language has a lot of concepts which could take you months if not years to learn (and not even get good at them). To be honest, i have been coding in javascript and react for over 4 years, and even i don't know everything that is there in javascript, but i can still develop full-stack apps in javascript, react and node. The good news is that you don't need to learn everything in javascript for you to start learning react. And you can actually continue learning more javascript concepts as you work with react. I am writing this post to help you transition to react smoothly and not get stuck at javascript for far too long. And if you are good with both javascript and react I would like to hear your thoughts on this topic at the discussion section below.

1. var, let and const

These are used to declare variables in javascript. var and let can be re-assigned values while const is use to create constant variables. In modern javascript it's recommended to use const by default and only use let when you explicitly need to reassign a variable. This helps in writing more maintainable and predictable code.

2. JavaScript Data Types

Understanding the different javascript data types must be one of the most important concept you need to understand well. Almost every line of code you will be writing you will be interacting with these data types. When declaring variables, manipulating data, or even while debugging, it is there good to understand them and know when to use them.

undefined - A variable declare without being assigned a value takes the value of undefined by default. undefined is used to represent absence of a value.
null - null is assigned by the programmer to represents intentional absence of a value.
boolean - Has only two possible values, true or false
string - Represents a sequence of characters using quotes
number - Can be integers or decimal numbers
symbol and bigint - I rarely use them but might be useful in some cases. symbols are often used to add unique property keys to an object. bigint is used to represent large numeric values.
objects - They store data in key and value pairs.
arrays and functions - These are not necessarily types but special objects. Arrays are used to store list of values while Functions are use to write reusable pieces of code/logic.

Understanding these data types is your very first step to becoming good at javascript.

3. JavaScript Array Methods

When you start developing apps, you will find yourself mostly working with list of data. Knowing and understanding the different array methods is essential in react in order to correctly update the state. Some of the methods you might find useful are:

.map - often use to display list of data in react by looping through them.
.filter - when you want to remove an item/items from a list. important when updating state for a delete functionality
.find - to get the first element of an array that satisfies a given condition
.findIndex - similar to .find only that this returns the index(position) of the item instead of the item.
.reduce - used to accumulate values in an array. Good example could be getting the totals of a shopping cart items.
.forEach - you can use this to loop over an array.
.slice - used to get a subarray(a portion of an array)
.push - used when you want to add an item to an array

Although there are many other array methods worth knowing, I find the above being mostly used.

4. Objects and Array Destructuring

Destructuring is used to extract values and assign them variables in a more readable way. In react the concept is widely used when accessing and manipulating props and state. You can also easily assign default values to props when using destructuring.

5. The Spread Operator (...)

The spread operator is very common in react when adding properties to an object or array or even combining objects or arrays, and then using the new value to update the state.

6. Functions (Regular and Arrow Functions)

You need to understand how to create and work with functions. Functions are important in creating reusable logic that can be reused in multiple modules. Understand the syntax and how to pass arguments in both regular and arrow functions. Understand the usage of the return statement in a function. Learn the difference between them, the this keyword, the arguments object and how the functions are hoisted.

7. Conditional Statements

These allow you to execute different blocks of code based on whether a specified condition evaluates to true or false. They include the if statement, the switch statement and the ternary operator.

8. Accessing and Manipulating the DOM

The DOM is a crucial part of web development in JavaScript. It provides a standardized way to interact with and manipulate the structure of web documents, making it possible to create dynamic and interactive web pages. Although in React you will not be interacting with the DOM directly, understanding how to navigate and manipulate the DOM is fundamental for front-end development.

9. JavaScript Modules

Finally I think you should learn javascript modules, modules are a way to organize code of related functionality into separate files. Modules help improve code maintainability, reusability, and organization by allowing developers to break down a large codebase into smaller, more manageable pieces. In javascript, modules can be created using the export and import keywords. In React modularity is widely adapted by making most components as modules.

In my opinion, the above is enough javascript to start learning React. There are many other javascript concepts not mentioned above but I think as you learn react and work on react projects you can as well learn more javascript along the way.

What do you think? Is the above javascript enough javascript to start learning react?

I am adding this section to showcase my content. I have a youtube channel where I create javascript, react and other coding tutorial. My latest big course was on creating a full-stack ecommerce app in Next.js, it is complete and ready on my youtube channel 🔥

Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe

How Creating Content as a Developer Changed My Life

Chaoo Charles — Sun, 05 Nov 2023 15:02:47 +0000

Hello everyone, I want to encourage some of you who want to start a career in coding but find it difficult to get your first job or internship. And also those who find it hard to start/finish a project because you start doubting your own capabilities (imposter syndrome). I will do this by telling you about my own journey and what I have learnt along the way and hopefully you will get motivated to keep going on yours.

So, My name is Charles from Kenya, Africa. I started my coding journey back in 2016, when I joined university to pursue a career in BTECH I.T. Before that I didn't know much about computers, I just knew that they were cool and I wanted to study about them. In high school I was a top performing student and my english teacher(also the deputy, lol) thought that it was stupid that I wanted to do something as simple as computers instead of a more professional and promising career like engineering, medicine, pilot etc, you name them. The good thing is I didn't listen and I went for what I wanted, and I can't regret a bit for doing that. The thing is, any career in I.T is one of the best in todays world and top companies in the world are at the top because of code. Look at Netflix, Amazon, Microsoft, Facebook, Airbnb or Uber. All these companies make billions because of code, therefore don't let anyone fool you that you are on the wrong path. I am here to tell you that you are on the best path.

Back to 2016 when I joined first year, due to my humble background, it was so hard for me to own a laptop, even a simple one or even a second hand one. And it was also kind of compulsory for me to have one if I was to do I.T. Having a decent smartphone was also a problem, but luckily I had a Samsung pocket(those small samsung phones if you remember them) and after convincing a friend to exchange it with me for some amount of money and a button phone. This phone is important in this story because it's the one that I used to start learning to code. In school we were being taught to code yes but that would not have been enough, it was mostly theory. The thing about coding is you have to practice and practice and practice. So, I installed an app called sololearn after learning about it from a classmate. I started learning web development there, that was html, css, javascript, php, sql and I think a bit of jquery. This app taught me all the basics about these topics and it had fun challenges and badges after completing each lesson. The only problem was that I would not make a complete project coding from a phone. But the point is, you can definitely start learning to code from your smartphone as you await to get a laptop. So, don't sit back and relax because you don't have a laptop. The sooner you realize that there is no one coming to save you the better.

I continued learning from my Samsung pocket for a month and it was later stolen in a mysterious way while in the streets of Nairobi (there are a lot of pickpockets). A friend from school gave me one of his, a HTC phone with a broken screen such that some parts wouldn't even touch, I had to rotate the screen multiple times to touch places 😂, but beggars are not choosers, I continued to use that to learn more about coding for the rest of the semester.

In the second semester, this was 2017 now, I received my student loan. Some of my friends/schoolmates used their loan to party, drinking and having fun with girls in clubs. Well, for my case I knew where I was coming from and I had an Idea of where I was going. So, I took some of the money and immediately bought a laptop. The rest of the money went to school fees and a bit for upkeep. This was a huge improvement for my case cause I could now learn more and start working on projects from the laptop. So if you got some money, stop thinking of partying and buying expensive stuff, think of how you can make your life better with that money.

In between 2017 and 2019, nothing much changed during this period. I was just learning and doing school work etc. I think I also did two websites in HTML and CSS which I got paid some amount for the work. I explore more on coding including learning OOP(Object Oriented Programming) in Java and also did a bit of Android Apps Development in Java, my laptop couldn't handle android studio 😂, so I went back to web development. I explored WordPress and how to make blogs with it, etc. and built a WordPress blog which I sold for some few pennies.

At the end of 2019, I was in 3rd yr 3rd sem(this was called internal industrial attachment at our university) and around this time it was when I had a wake up call. I realized I had been learning to code but still I couldn't build a complete project, apart from simple websites in html, css and maybe wordpress. I wasn't confident enough with any of the programming languages either. Plus a requirement for graduation was to complete a coding project in 4th year. I also started to have the fear of the unknown, like what I would be doing after school since it was only one year left. I started to do a lot of research on how to create a complete web apps since I already knew the basics of javascript and one thing which I didn't know popped up, the javascript frameworks, the most popular at the moment were angular, vue and react. I knew then that I had to learn one of these frameworks and it was so difficult to decide which one but I finally settled for React, because it was the most popular of all and most promising for jobs, and I still code with React up to this point.

I tried to learn React from sololearn but it didn't go well. I tried youtube and came across @thenetninja channel: https://www.youtube.com/@NetNinja, it was so wholesome and this is where I got a good introduction to React. Later I took two complete React courses from Udemy, one by Stephen Grider and the other by Maximilian Schwarzmüller. I didn't complete them by the way, who completes a udemy course? 😂 But these two courses taught me more advanced stuff on React.

While learning React, I was also curious of how I could be making money with code after school or while still at school, and I found out several options, Getting a Job, Freelancing, Creating Content (this could be writing blogs or a youtube channel), starting podcast, writing books, creating courses like in udemy and more. Since I was still in school I knew getting a Job would be too much to handle, so I decided to try freelancing and content creation. Still in 2019, that's when I opened my YouTube channel: https://www.youtube.com/c/chaoocharles to teach coding and also opened an upwork account to work on coding freelance projects.

I knew I was not a good writer, as you can definitely tell from this post 😂 So I tried videos instead of blogging. This was another challenge since I had to learn how to make videos, learn about recording and editing software and more. But I went for it and got my first 100subs from my classmates. My videos were so bad while starting and I was doing a lot of work without being paid even a penny. But looking on the positive, creating videos was making me understand coding concepts better. As in, for me to explain stuff I had to understand first. I created a lot of videos mainly in html, css and react, and the more I did the more I became confident with both creating the videos and also coding. In 2020 I had a lot of time to do all this because we closed school for almost a year due to covid, and after an year of doing this I finally got to 1k subs which was a huge win for me.

In mid 2020, I had two major wins, had gotten to 1k on youtube and I got my first client on upwork. I needed 1k subs and 4k hours of watch time for youtube to start paying me. I was still far away from 4k watch time but at least I had achieved one of the requirements. Upwork was also so hard to get the first client, I was applying on jobs to no avail, but this first client was a game changer. I convinced him I knew how to code and proved with my youtube tutorials. You see, while working on youtube tutorials I was also building a portfolio for myself, and I had published multiple projects on my github as well. Let's just say my portfolio at this point was looking so good and this client gave me a contract without hesitation. If you happen to teach something, people will just start viewing you as an expert (even if you are struggling to teach that thing 😂) This could be through videos or blogs, I think you should try it. I did well on the upwork project that this client continued to give me more projects within that year and the following year. I did about 8 of his projects got a rising talent badge on upwork and later a Top Rated badge which allowed me to win even more clients.

Yeah, I know my job success score is bad right now, but you get the point, lol 😂

While working on youtube videos and upwork projects I was also doing my final year project since I was now in 4th year, but these were the only things I was doing since I was at home due to covid in 2020. At the end of 2020 though, we went back for the last semester, did exams and presented the project.

Fast forward to 2021, I was doing an attachment now. This was a requirement for me to graduate. I easily got this by looking for web development companies in kenya, both on facebook and the web. Commenting on their post and explaining my I.T background. I got a DM from a CEO of a certain startup and joined there as a frontend developer. I tried to negotiate for payment but the best I go was just an upkeep for transport and lunch, going to the office for 3days a week, and a promise for a permanent job after attachment. This was good enough as a student so I went for it.

At this company I impressed them with my CSS and React Skills. I revamped their company website, and did 2 more websites while I was there for a period of 5months. I was assessed by my school and later the company gave me the job offer. I felt that the amount per month was not good enough for my skills, As in I would easily make the same doing freelance work in a week or two, and my YouTube also got monetized while I was there. I simply declined the offer and decided to focus on my freelance and content creation journey. If they had allowed me to work on their projects remotely while i work on my other stuff, maybe I would have taken the offer, but that was not in their company policy. And I didn't want to settle for less. You see, all I had been doing for the past few years had given me options and also not to be desperate for a job, and to have a competitive advantage.

Mid 2021 I graduated with 2nd Class Upper, I promise I would have gotten 1st Class were it not for me distracting myself with youtube and upwork, 4th year I performed the worst. But do I regret it? NO. The thing is, I have never used that degree, it is still locked somewhere at home getting dust. The good thing is that, skills and experience is the most important thing in this coding and programming field. Only a few companies might ask for a degree but most companies will not. They will ask for your past experience, projects you have worked on and expect you to pass a coding interview. So if you are looking for a job in coding and blaming not having a degree for not getting one, you should stop. Most of us who have the degrees we are not even using them. Maybe our only advantage is the connections we built at school or skills we gained from there. But to be honest, most of what I know I taught myself and I believe every programmer is a self taught programmer whether they went to school or not. You have to get your hands dirty. Papers alone will not help much.

Later after graduation, I started getting project offers from YouTube, and good paying projects. I also started to use YouTube and GitHub to my advantage to get better paying projects on Upwork, telling the client what I have accomplished by sharing links to my profiles. So, all this added up to something nice. Right now I pay for all my bills from just content creation and earns even more from working on projects both on upwork and outside upwork. I am also flexible with time and working from home which is great. I have done only one fulltime job in 2022. It was remote and totally worth it.

My point is, if you are struggling to get a job or a project to work on, you can change things by building something for yourself. Start a blog, start a podcast, start a channel, start a company, create a course, write a book, build in public (start a huge project and share your progress here and on twitter), simply get your skills out here we see what you can do and sooner or later you will start working on good paid projects. Stop chasing the jobs but simply attract them.

As you can tell from my journey, it was not a one day achievement, I was not paid even a penny for content creation until over an year, I didn't get even a single client on upwork until over an year. I didn't learn to code in one day, I started from a phone and later a low level laptop that I bought with school loan(which I haven't even paid yet). All these successful people and companies all start from somewhere and you can start making a difference in your life today. Start getting your hands dirty and in 2 or 3 years you won't even believe where you came from.

This is my story and I hope you have learnt a thing or two ✌️

Subscribe to my YouTube channel: https://www.youtube.com/c/chaoocharles
Follow me on twitter: https://twitter.com/ChaooCharles

Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe

Chaoo Charles — Tue, 17 Oct 2023 14:58:31 +0000

This comprehensive course teaches you how to build powerful ecommerce application from scratch using Next.js, React, TypeScript, TailwindCSS, Prisma, and MongoDB. From frontend design to backend infrastructure, you'll learn to create dynamic interfaces, handle data modeling and queries, implement user authentication, and deploy to production. Gain the skills to become a proficient full-stack JavaScript developer using this one project.

Features:
🖌️ Awesome UI in TailwindCSS
🛒 Complete Shopping Cart
🔐 Authentication with Google Login in Next Auth
💰 Payment Integration in Stripe
👀 Admin Dashboard
📉 Shop Statistics (Summary)
⬆️ Image Uploads in Firebase Storage
🔎 Search Functionality
👨‍👩‍👧‍👦 Product Categories
🔥 Product Rating
🛠️ Manage Products
🛠️ Manage Orders
🚀 Deployment

Video Tutorial 👇

✨ Source Codes: https://www.patreon.com/posts/next13-fullstack-86787700?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
✨ e-shop-assets: https://github.com/chaoocharles/e-shop-assets
✨ Playlist: https://youtube.com/playlist?list=PL63c_Ws9ecISwPzddQzQ671S_gzJA6M5z
✨ Follow Me on Twitter: https://twitter.com/ChaooCharles
✨ Join My Discord Server
https://discord.gg/WGqJ2CZebb

Next13 Fullstack Ecommerce 🛒 | React, Typescript, TailwindCSS, Prisma and MongoDB 🔥

Chaoo Charles — Sat, 29 Jul 2023 12:38:33 +0000

I start a new Fullstack E-commerce course on my YouTube Channel 🔥

It's free 🙌

This comprehensive course teaches you how to build powerful ecommerce application from scratch using Next.js, React, TypeScript, Tailwind CSS, Prisma, and MongoDB.

From frontend design to backend infrastructure, you'll learn to create dynamic interfaces, handle data modeling and queries, implement user authentication, and deploy to production. Gain the skills to become a proficient full-stack ecommerce developer and create scalable, feature-rich online stores

Check out the demo of the application in the following video

React Project for Beginners: Todo App with Drag and Drop - React DnD Tutorial

Chaoo Charles — Thu, 16 Mar 2023 12:46:43 +0000

Practice React by creating a simple but cool Todo app in React, TailwindCSS and React DnD

Features:

Using Forms in React (Create Task)
Using useState and useEffect Hooks
Passing data via props to child components
Using browser localStorage
Toast messages (react-hot-toast)
.filter() array method
Listing tasks
Drag and Drop tasks to different sections (react dnd)
Style TailwindCSS

Video Tutorial 👇

Real-time Chat App | React, Context API, Node.js and Socket.io (Course)

Chaoo Charles — Mon, 16 Jan 2023 06:04:48 +0000

Hello devs 👋 I started a new course on my youtube channel, it's beginner friendly but you'll get to learn a lot.

Project: Real Time Chat App

You'll learn:

React
Context API
Custom hooks
Reusing functions
Authentication
Node.js
Socket. io

And much more 🤲

Here is the link: Realtime Chat App

Enjoy 💙