DEV Community: Jagadeesh Koyya

OPENAI DALL-E AI IMAGE GENERATOR USING MERN STACK

Jagadeesh Koyya — Fri, 27 Jan 2023 06:16:18 +0000

Hello there! How do you do? I hope you are doing extremely well. Great!

Without further due let's jump into the amazing project that we're going to build today. It's built upon the great MERN stack.

Stack Used:

Express JS
React JS
MongoDB
Node JS
Tailwind CSS
OpenAI DALL-E API
Cloudinary

While doing this project, I can say that I got a feeling of zeel in driving through the process and it's levitating and I hope you feel the same zeel.

I can provide you with the file hierarchy in which this project is going to be built. We start with two folders namely client (frontend) and server (backend) in a root folder of your chosen name.

You can get access to every file listed in the above image in the below-provided links to my GitHub repo.

I would like to write the experience here that I've acquired during building this project.

Let's Get Started

Frontend (Client)

Beginning with the client folder we focus on building the UI for our project.

That's our homepage where we can see all the AI generated images shared by people.

You can generate your desired AI image with a prompt of yours and with your name in the checkboxes provided as shown in the below image.

You can share the image with the world if you want to. And furthur it will be stick in the community gallery where you can download any image you wish.

src client
Assets folder consists of some cool images that you need in making this UI look better.

App.jsx

import React from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

import { openai } from "./assets";
import { Home, CreatePost } from "./pages";

const App = () => {
  return (
    <BrowserRouter>
      {/* Header */}
      <header className="w-full flex justify-between items-center bg-[#FFCEFE] sm:px-8 px-4 py-4 border-b border-b-[#FFCEFE]">
        <Link to="/">
          <img src={openai} alt="logo" className="h-10 w-10 object-cover" />
        </Link>

        <Link
          to="/create-post"
          className="font-inter font-medium bg-[#a600ff] text-white px-4 py-2 rounded-md"
        >
          Create Post
        </Link>
      </header>

      {/* Body UI */}
      <main className="sm:px-8 px-4 py-8 w-full bg-[#EFEFEF] min-h-[calc(100vh-4.563rem)]">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/create-post" element={<CreatePost />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
};

export default App;

This is the main component which renders a header with an OpenAI logo and a "Create Post" button, and a main section where the different pages of the app are rendered based on the current URL.

The component has two routes: the default route ("/") which renders the Home component, and the "/create-post" route, which renders the CreatePost component.

The component also contains some styling classed which are used to customize the component layout and design.

The components folder provides Card.jsx, FormField.jsx, Loader.jsx.

Card.jsx

import React from "react";

import { download } from "../assets";
import { downloadImage } from "../utils";

const Card = ({ _id, name, prompt, photo }) => {
  return (
    <div className="rounded-xl group relative shadow-card hover:shadow-cardhover card">
      <img
        src={photo}
        alt={prompt}
        className="w-full h-auto object-cover rounded-xl"
      />
      <div className="group-hover:flex flex-col max-h-[94.5%] hidden absolute bottom-0 left-0 right-0 bg-[rgba(255,255,255,0.1)] m-2 p-4 rounded-md">
        <p className="text-white text-sm overflow-y-auto prompt">{prompt}</p>

        <div className="flex justify-between items-center mt-4 gap-2">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-full object-cover bg-green-700 flex justify-center items-center text-white text-xs font-bold">
              {name[0]}
            </div>
            <p className="text-white text-xs">{name}</p>
          </div>
          <button
            type="button"
            onClick={() => downloadImage(_id, photo)}
            classname="outline-none bg-transparent border-none"
          >
            <img
              src={download}
              alt="download"
              className="w-6 h-6 object-contain invert"
            />
          </button>
        </div>
      </div>
    </div>
  );
};

export default Card;

This code is a React component that renders a card with an image, prompt, and download button.

The component takes in props of _id, name, prompt, and photo.

It renders an image with the given photo prop as the source and the prompt prop as the alt text.

It also renders a div containing the name prop in a circle with a background color of green-700 and text color of white.

Lastly, it renders a download button which calls the downloadImage function when clicked and passes in _id and photo as arguments.

FormField.jsx

import React from "react";

const FormField = ({
  labelName,
  type,
  name,
  placeholder,
  value,
  handleChange,
  isSurpriseMe,
  handleSurpriseMe,
}) => {
  return (
    <div>
      <div className="flex items-center gap-2 mb-2">
        <label
          htmlFor={name}
          className="block text-sm font-medium text-gray-900"
        >
          {labelName}
        </label>

        {isSurpriseMe && (
          <button
            type="button"
            onClick={handleSurpriseMe}
            className="font-semibold text-xs bg-[#ECECF1] py-1 px-2 rounded-[5px] text-black"
          >
            Surprise me
          </button>
        )}
      </div>

      <input
        type={type}
        id={name}
        name={name}
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        required
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#4649ff] focus:border-[#4649ff] outline-none block w-full p-3"
      />
    </div>
  );
};

export default FormField;

This code renders a form field. It takes in several props, such as labelName, type, name, placeholder, value, handleChange, isSurpriseMe and handleSurpriseMe.

It then renders an input field with the given props and also renders a button if isSurpriseMe is true.

When the button is clicked it calls the handleSurpriseMe function. I'll tell you what this function does later.

Finally it exports the FormField component so it can be used in other components.

Loader.jsx

import React from "react";

const Loader = () => (
  <div role="status">
    <svg
      aria-hidden="true"
      className="inline w-10 h-10 mr-2 text-gray-200 animate-spin fill-[#6469ff]"
      viewBox="0 0 100 101"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
        fill="currentColor"
      />
      <path
        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
        fill="currentFill"
      />
    </svg>
  </div>
);

export default Loader;

This one got that nice cool loading effect when an image gets generated.

index.js

import Card from "./Card";
import FormField from "./FormField";
import Loader from "./Loader";

export { Card, FormField, Loader };

We used index.js file to export all these components.

Constant's index.js

export const surpriseMePrompts = [
  "an armchair in the shape of an avocado",
  "a surrealist dream-like oil painting by Salvador Dalí of a cat playing checkers",
  "teddy bears shopping for groceries in Japan, ukiyo-e",
  "an oil painting by Matisse of a humanoid robot playing chess",
  "panda mad scientist mixing sparkling chemicals, digital art",
  "a macro 35mm photograph of two mice in Hawaii, they're each wearing tiny swimsuits and are carrying tiny surf boards, digital art",
  "3D render of a cute tropical fish in an aquarium on a dark blue background, digital art",
  "an astronaut lounging in a tropical resort in space, vaporwave",
  "an oil painting portrait of a capybara wearing medieval royal robes and an ornate crown on a dark background",
  "a stained glass window depicting a hamburger and french fries",
  "a pencil and watercolor drawing of a bright city in the future with flying cars",
  "a sunlit indoor lounge area with a pool with clear water and another pool with translucent pastel pink water, next to a big window, digital art",
  "a fortune-telling shiba inu reading your fate in a giant hamburger, digital art",
  '"a sea otter with a pearl earring" by Johannes Vermeer',
  "an oil pastel drawing of an annoyed cat in a spaceship",
  "a painting of a fox in the style of Starry Night",
  "a bowl of soup that looks like a monster, knitted out of wool",
  "A plush toy robot sitting against a yellow wall",
  "A synthwave style sunset above the reflecting water of the sea, digital art",
  "Two futuristic towers with a skybridge covered in lush foliage, digital art",
  "A 3D render of a rainbow colored hot air balloon flying above a reflective lake",
  "A comic book cover of a superhero wearing headphones",
  "A centered explosion of colorful powder on a black background",
  "A photo of a Samoyed dog with its tongue out hugging a white Siamese cat",
  "A photo of a white fur monster standing in a purple room",
  "A photo of Michelangelo's sculpture of David wearing headphones djing",
  "A Samurai riding a Horse on Mars, lomography.",
  "A modern, sleek Cadillac drives along the Gardiner expressway with downtown Toronto in the background, with a lens flare, 50mm photography",
  "A realistic photograph of a young woman with blue eyes and blonde hair",
  "A man standing in front of a stargate to another dimension",
  "Spongebob Squarepants in the Blair Witch Project",
  "A velociraptor working at a hotdog stand, lomography",
  "A man walking through the bustling streets of Kowloon at night, lit by many bright neon shop signs, 50mm lens",
  "A BBQ that is alive, in the style of a Pixar animated movie",
  "A futuristic cyborg dance club, neon lights",
  "The long-lost Star Wars 1990 Japanese Anime",
  "A hamburger in the shape of a Rubik’s cube, professional food photography",
  "A Synthwave Hedgehog, Blade Runner Cyberpunk",
  "An astronaut encountering an alien life form on a distant planet, photography",
  "A Dinosaur exploring Cape Town, photography",
  "A Man falling in Love with his Computer, digital art",
  "A photograph of a cyborg exploring Tokyo at night, lomography",
  "Dracula walking down the street of New York City in the 1920s, black and white photography",
  "Synthwave aeroplane",
  "A man wanders through the rainy streets of Tokyo, with bright neon signs, 50mm",
  "A Space Shuttle flying above Cape Town, digital art",
];

This is a bunch of prompts in which one is randomly given to the person when they hit the SurpriseMe button.

PAGES

CreatePost.jsx

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

import { preview } from "../assets";
import { getRandomPrompt } from "../utils";
import { FormField, Loader } from "../components";

const CreatePost = () => {
  const navigate = useNavigate();
  const [form, setForm] = useState({
    name: "",
    prompt: "",
    photo: "",
  });
  const [generatingImg, setGeneratingImg] = useState(false);
  const [loading, setLoading] = useState(false);

  // Integrate with the backend
  const generateImage = async () => {
    if (form.prompt) {
      try {
        setGeneratingImg(true);
        const response = await fetch(
          "https://dall-e-4e72.onrender.com/api/v1/dalle",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ prompt: form.prompt }),
          }
        );

        const data = await response.json();

        setForm({ ...form, photo: `data:image/jpeg;base64,${data.photo}` });
      } catch (error) {
        alert("Something went wrong");
      } finally {
        setGeneratingImg(false);
      }
    } else {
      alert("Please enter a prompt");
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (form.prompt && form.photo) {
      setLoading(true);

      try {
        const response = await fetch(
          "https://dall-e-4e72.onrender.com/api/v1/post",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(form),
          }
        );

        await response.json();
        navigate("/");
      } catch (error) {
        alert("Something went wrong");
      } finally {
        setLoading(false);
      }
    } else {
      alert("Please enter a prompt and generate an image");
    }
  };

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSurpriseMe = () => {
    const randomPrompt = getRandomPrompt(form.prompt);
    setForm({ ...form, prompt: randomPrompt });
  };

  return (
    <section className="max-w-7xl mx-auto">
      <div>
        <h1 className="font-extrabold text-[#222328] text-[2rem]">
          Create Post
        </h1>

        <p className="mt-2 text-[#666e75] text-[1rem] max-w-[31.25rem]">
          Create imaginative and visually stunning images through DALL-E AI and
          share them with the world.
        </p>
      </div>

      <form className="mt-16 max-w-3xl" onSubmit={handleSubmit}>
        <div className="flex flex-col gap-5">
          <FormField
            labelName="Your Name"
            type="text"
            name="name"
            placeholder="Eg. Jagadeesh KJ"
            value={form.name}
            handleChange={handleChange}
          />

          <FormField
            labelName="Prompt"
            type="text"
            name="prompt"
            placeholder="Eg. An armchair in the shape of an avocado"
            value={form.prompt}
            handleChange={handleChange}
            isSurpriseMe
            handleSurpriseMe={handleSurpriseMe}
          />

          <div className="relative bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-64 p-3 h-64 flex justify-center items-center">
            {form.photo ? (
              <img
                src={form.photo}
                alt={form.prompt}
                className="w-full h-full object-contain"
              />
            ) : (
              <img
                src={preview}
                alt="preview"
                className="w-9/12 h-9/12 object-contain opacity-40"
              />
            )}

            {generatingImg && (
              <div className="absolute inset-0 z-0 flex justify-center items-center bg-[rgba(0,0,0,0.5)] rounded-lg">
                <Loader />
              </div>
            )}
          </div>
        </div>

        <div className="mt-5 flex gap-5">
          <button
            type="button"
            onClick={generateImage}
            className="text-white bg-green-700 font-medium rounded-md text-sm w-full sm:w-auto px-5 py-2.5 text-center"
          >
            {generatingImg ? "Generating..." : "Generate Image"}
          </button>
        </div>

        <div className="mt-10">
          <p className="mt-2 text-[#666e75] text-[0.875rem]">
            Once you have created the image, you can share it with the world.
          </p>
          <button
            type="submit"
            className="mt-3 text-white bg-[#6469ff] font-medium rounded-md text-sm w-full sm:w-auto px-5 py-2.5 text-center"
          >
            {loading ? "Sharing..." : "Share"}
          </button>
        </div>
      </form>
    </section>
  );
};

export default CreatePost;

This component is really important as it takes the input from the person and gives them a chance to create a image by DALL-E.

The CreatePost component is defined, which uses the useNavigate and useState hooks to handle navigation and state management.

The initial state includes an empty form object, with properties for name, prompt, and photo. The component also has state variables for generatingImg and loading.

The generateImage function sends a POST request to the DALL-E API, which returns an image based on the prompt. The handleSubmit function sends a POST request to the backend to create a post.

The handleChange function updates the form state with the input values. The handleSurpriseMe function sets the prompt field to a random prompt, and the render method returns JSX that renders the form and other UI elements.

Home.jsx

import React, { useState, useEffect } from "react";

import { Loader, Card, FormField } from "../components";

const RenderCards = ({ data, title }) => {
  if (data?.length > 0) {
    return data.map((post) => <Card key={post._id} {...post} />);
  }

  return (
    <h2 className="mt-5 font-bold text-[#6449ff] text-xl uppercase">{title}</h2>
  );
};

const Home = () => {
  const [loading, setLoading] = useState(false);
  const [allPosts, setAllPosts] = useState(null);

  const [searchText, setSearchText] = useState("");
  const [searchedResults, setSearchedResults] = useState(null);
  const [searchTimeout, setSearchTimeout] = useState(null);

  // Integrate with the backend to fetch all posts
  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);

      try {
        const response = await fetch(
          "https://dall-e-4e72.onrender.com/api/v1/post",
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
            },
          }
        );

        if (response.ok) {
          const result = await response.json();
          setAllPosts(result.data.reverse());
        }
      } catch (error) {
        alert("Something went wrong");
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  // Search functionality
  const handleSearchChange = (e) => {
    clearTimeout(searchTimeout);

    setSearchText(e.target.value);

    setSearchTimeout(
      setTimeout(() => {
        const searchResults = allPosts.filter(
          (item) =>
            item.name.toLowerCase().includes(searchText.toLowerCase()) ||
            item.prompt.toLowerCase().includes(searchText.toLowerCase())
        );

        setSearchedResults(searchResults);
      }, 500)
    );
  };

  return (
    <section className="max-w-7xl mx-auto">
      <div>
        <h1 className="font-extrabold text-[#222328] text-[2rem]">
          DALL-E AI Gallery
        </h1>
        <p className="mt-2 text-[#666e75] text-[1rem]">
          Browse through the images generated by DALL-E AI. You can also create
          a new post and share your own images.
        </p>
      </div>

      <div className="mt-16">
        <FormField
          labelName="Search Posts"
          type="text"
          name="text"
          placeholder="Search by name or prompt"
          value={searchText}
          handleChange={handleSearchChange}
        />
      </div>

      <div className="mt-10">
        {loading ? (
          <div className="flex justify-center items-center">
            <Loader />
          </div>
        ) : (
          <>
            {searchText && (
              <h2 className="font-medium text-[#666e75] text-xl mb-3">
                Search Results for{" "}
                <span className="text-[#222328]">{searchText}</span>
              </h2>
            )}

            <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
              {searchText ? (
                <RenderCards data={searchedResults} title="No results found" />
              ) : (
                <RenderCards data={allPosts} title="No posts found" />
              )}
            </div>
          </>
        )}
      </div>
    </section>
  );
};

export default Home;

The "Home" component sets up several state variables, including "loading", "allPosts", "searchText", "searchedResults", and "searchTimeout", using the "useState" hook.

It also uses the "useEffect" hook to fetch all posts from an API when the component first renders and sets the state variables accordingly.

The component also includes a search functionality, where the "handleSearchChange" function is called when the user types into the search field.

The component then renders either the searched results or all posts, and includes a loading spinner if the data is still being fetched from the API.

PAGES index.js

import Home from "./Home";
import CreatePost from "./CreatePost";

export { Home, CreatePost };

UTILS index.js

import FileSaver from "file-saver";

import { surpriseMePrompts } from "../constant";

export function getRandomPrompt() {
  const randomIndex = Math.floor(Math.random() * surpriseMePrompts.length);
  const randomPrompt = surpriseMePrompts[randomIndex];

  //   To not get the same prompt twice in a row
  if (randomPrompt === prompt) return getRandomPrompt(prompt);

  return randomPrompt;
}

export async function downloadImage(_id, photo) {
  FileSaver.saveAs(photo, `download-${_id}.jpg`);
}

The code is importing the FileSaver library which is used to save a file to the user's device. It also imports an array of strings named "surpriseMePrompts" from a separate file.

The function "downloadImage" takes in two parameters, _id and photo. It then uses the FileSaver library to save the "photo" file to the user's device with the file name "download-_id.jpg".

I've used MongoDB for storing the images after retrieving from the Cloudinary after generating an image using OpenAI API.

Render is a great hosting cloud platform which we can use it for deploying the backend and I've used vercel for the frontend.

A tip I can leave which I've found useful while choosing a color palette for the website is Visme.

That's all to it, folks. I wanted to show my gratitude to JavaScript Mastery for making this wonderful MERN stack webapp possible. He's just awesome.

Repo ⚡
Live 🚀

I'm gonna wrap it up with links provided to my GitHub repo and to the live deployment. See you soon!

New Year Countdown

Jagadeesh Koyya — Sun, 01 Jan 2023 14:02:53 +0000

Hola! How're you doing? I'm hoping for the best. I wish you a lovely happy new year. This is gonna be my 1st post in this new year 2023 'Tis.

This is not a project but just a cool time pass with vanilla javascript. I've always wanted a countdown timer to catch up with seconds while capturing the moment Iron man snaps in the Avengers Endgame. Voila!

Repo ⚡
Live 🚀

Let's Start Building!

The boilerplate for this project is simple as it looks in this hierarchy of files.

.
├── index.html
├── script.js
└── style.css

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Happy New Year</title>
  </head>

  <body>
    <div id="year" class="year"></div>

    <h1>New Year Countdown</h1>

    <div id="countdown" class="countdown">
      <div class="time">
        <h2 id="days">00</h2>
        <small>days</small>
      </div>
      <div class="time">
        <h2 id="hours">00</h2>
        <small>hours</small>
      </div>
      <div class="time">
        <h2 id="minutes">00</h2>
        <small>minutes</small>
      </div>
      <div class="time">
        <h2 id="seconds">00</h2>
        <small>seconds</small>
      </div>
    </div>

    <img
      src="./img/spinner.gif"
      alt="Loading..."
      id="loading"
      class="loading"
    />

    <script src="script.js"></script>
  </body>
</html>

The

with the id of "year" and class of "year" will display the current year. The

tag displays the title of the countdown.

The

with the id of "countdown" and class of "countdown" contains four other s that each contain an

tag with an id of either days, hours, minutes, or seconds.

These will display the number of days, hours, minutes, and seconds until New Year's Day.

The tag displays a loading spinner while the script is running and the script itself is located in a file called "script.js".

Script.js

const days = document.getElementById('days');
const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const countdown = document.getElementById('countdown');
const year = document.getElementById('year');
const loading = document.getElementById('loading');

const currentYear = new Date().getFullYear();

const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);

// Set background year
year.innerText = currentYear + 1;

// Update countdown time
function updateCountdown() {
  const currentTime = new Date();
  const diff = newYearTime - currentTime;

  const d = Math.floor(diff / 1000 / 60 / 60 / 24);
  const h = Math.floor(diff / 1000 / 60 / 60) % 24;
  const m = Math.floor(diff / 1000 / 60) % 60;
  const s = Math.floor(diff / 1000) % 60;

  // Add values to DOM
  days.innerHTML = d;
  hours.innerHTML = h < 10 ? '0' + h : h;
  minutes.innerHTML = m < 10 ? '0' + m : m;
  seconds.innerHTML = s < 10 ? '0' + s : s;
}

// Show spinner before countdown
setTimeout(() => {
  loading.remove();
  countdown.style.display = 'flex';
}, 1000);

// Run every second
setInterval(updateCountdown, 1000);

This code is setting up a countdown timer for the new year. It starts by declaring variables for each of the elements in the HTML document that will be used in the countdown.

It then sets the current year and creates a new Date object for the new year. The updateCountdown() function is then declared which calculates the difference between the current time and the new year time, and stores it in days, hours, minutes, and seconds.

The values are then added to the DOM using innerHTML. A setTimeout() function is used to remove a loading spinner before displaying the countdown, and a setInterval() function is used to run updateCountdown() every second.

Styles

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-image: url('https://images.unsplash.com/photo-1467810563316-b5476525c0f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  color: #fff;
  font-family: 'Muli';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  overflow: hidden;
}

/* Add a dark overlay */
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

body * {
  z-index: 1;
}

h1 {
  font-size: 60px;
  margin: -80px 0 40px;
}

.year {
  font-size: 200px;
  z-index: -1;
  opacity: 0.2;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.countdown {
  /* display: flex; */
  display: none;
  transform: scale(2);
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.time h2 {
  margin: 0 0 5px;
}

@media (max-width: 500px) {
  h1 {
    font-size: 45px;
  }

  .time {
    margin: 5px;
  }

  .time h2 {
    font-size: 12px;
    margin: 0;
  }

  .time small {
    font-size: 10px;
  }
}

The @import statement at the top of the code imports a font from Google Fonts called 'Muli'.

The rest of the code sets up styling for the body element, including background image, color, font family, and another styling.

It also sets up styling for elements within the body such as h1 and .year.

Finally, it includes a media query to adjust styling for smaller screens.

And the final output looks something like this.

That's it for the start of a year fellas. A wise man once said, "start small". I'll see you soon.

OpenAI CodeX ChatBot

Jagadeesh Koyya — Sun, 25 Dec 2022 16:20:53 +0000

Hey there! How's it going? It's been a while since we last had our interaction in dev. Here we build stuff, little but great and cool.

Today we're gonna build and deploy a live chatbot that can help you answer any question you have regarding to coding and stuff (and definitely not your relationship doubts, eh? Just kidding!).

Repo ⚡
Live 🚀

The final output looks something like this:

With that said, let's jump into action.

Stack used

HTML5
CSS3
JavaScript
Vite
NodeJS
Express
OpenAI API

Let's Start Building

We start with two folders named client and server in our project folder which looks in heirarchy like this.

.
├── client/
│ ├── assets
│ ├── index.html
│ ├── style.css
│ └── script.js
└── server/
└── server.js

You can checkout my GtHub repo provided above to see the files you need and how it actually structured.

The assets folder consists nothing but some images required for the project.

I hope you'd node js in your system. You're gonna need node js to run this project.

Create a template for our project in plain vanilla javascript.

npm create vite@latest client --template vanilla

CLIENT

Now we start with client side first. Assuming you'd know how to link styles and script files.

index.html

<body>
    <div id="app">
      <div id="chat_container">
        <!-- Main Portion -->
      </div>

      <form>
        <textarea name="prompt" placeholder="What questions do you have?" cols="1" rows="1"></textarea>
        <button type="submit"><img src="assets/send.svg" alt="send it"></button>
      </form>
    </div>

    <script type="module" src="script.js"></script>
  </body>

The

tag contains all of the content for the page. Inside of the body, there is a div with an id of "app" which contains two elements: a div with an id of "chat_container" and a form with a textarea and submit button. Finally, there is a script tag which links to an external JavaScript file.

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Alegreya Sans", sans-serif; */
  font-family: 'Muli';
}

body {
  background: #343541;
}

#app {
  width: 100vw;
  height: 100vh;
  background: #343541;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#chat_container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  gap: 10px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding-bottom: 20px;
  scroll-behavior: smooth;
}

/* hides scrollbar */
#chat_container::-webkit-scrollbar {
  display: none;
}

.wrapper {
  width: 100%;
  padding: 15px;
}

.ai {
  background: #40414F;
}

.chat {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.profile {
  width: 36px;
  height: 36px;
  border-radius: 5px;

  background: #5436DA;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ai .profile {
  background: #10a37f;
}

.profile img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.message {
  flex: 1;

  color: #dcdcdc;
  font-size: 20px;

  max-width: 100%;
  overflow-x: scroll;

  white-space: pre-wrap; 

  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hides scrollbar */
.message::-webkit-scrollbar {
  display: none;
}

form {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  background: #40414F;

  display: flex;
  flex-direction: row;
  gap: 10px;
}

textarea {
  width: 100%;

  color: #fff;
  font-size: 18px;

  padding: 10px;
  background: transparent;
  border-radius: 5px;
  border: none;
  outline: none;
}

button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
}

form img {
  width: 30px;
  height: 30px;
}

That's all the styling we need for making this project looking good with UI.

script.js

import bot from './assets/bot.svg';
import user from './assets/user.svg';

const form = document.querySelector('form');
const chatContainer = document.querySelector('#chat_container');

// AI Loading...
let loadInterval;

function loader(element) {
  element.textContent = '';

  loadInterval = setInterval(() => {
    element.textContent += '.';

    // reset 
    if(element.textContent === '....') {
      element.textContent = '';
    }
  }, 300)
}

// AI typing...
function typeText(element, text) {
  let index = 0;

  let interval = setInterval(() => {
    if(index < text.length) {
      element.innerHTML += text.charAt(index);
      index++;
    } else {
      clearInterval(interval);
    }
  }, 20)
}

function generateUniqueId() {
  const timestamp = Date.now();
  const randomNumber = Math.random();
  const hexaStr = randomNumber.toString(16);

  return `id-${timestamp}-${hexaStr}`;
}

// chat dark and light grey stripes
function chatStripe (isAI, value, uniqueId) {
  return (
    `
    <div class = "wrapper ${isAI && 'ai'}">
      <div class = "chat">
        <div class = "profile">
          <img
            src = "${isAI ? bot : user}"
            alt = "${isAI ? 'bot' : 'user'}"
          />
        </div>

        <div class = "message" id = ${uniqueId}>
          ${value}
        </div>
      </div>
    </div>
    `
  )
}

const handleSubmit = async(e) => {
  e.preventDefault();

  const data = new FormData(form);

  // user's chat stripe
  chatContainer.innerHTML += chatStripe(false, data.get('prompt'));

  form.reset();

  // bot's chat stripe
  const uniqueId = generateUniqueId();
  chatContainer.innerHTML += chatStripe(true, " ", uniqueId);
  chatContainer.scrollTop = chatContainer.scrollHeight;

  const messageDiv = document.getElementById(uniqueId);

  loader(messageDiv);

  // fetch data from server -> bot's response

  const response = await fetch('https://codex-djxd.onrender.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      prompt: data.get('prompt')
    })
  })

  clearInterval(loadInterval);
  messageDiv.innerHTML = '';

  if(response.ok) {
    const data = await response.json();
    const parsedData = data.bot.trim();

    typeText(messageDiv, parsedData);
  } else {
    const err = await response.text();

    messageDiv.innerHTML = "Something went wrong";

    alert(err);
  }
}

// Submit by pressing enter
form.addEventListener('submit', handleSubmit);
form.addEventListener('keyup', (e) => {
  if(e.keyCode === 13) {
    handleSubmit(e);
  }
})

This code is a chatbot program. It imports two images, one for the user and one for the bot. It then creates a form element and a chat container element. It then defines functions to load, type text, generate unique IDs, and create chat stripes.

The handleSubmit function is called when the user submits the form or presses enter. This function sends the user's message to the server and receives a response from the bot. The response is then displayed in the chat container with a unique ID.

SERVER

Let's make our project work by fetching and uploading data as in client-server architecture.

Generate a new package.json file inside your server folder by entering the command below.

npm init -y

Now we need to install a couple of dependencies to do our server side work properly.

npm install cors dotenv express nodemon openai

server.js

import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import { Configuration, OpenAIApi } from 'openai';

dotenv.config();

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

const app = express();
app.use(cors());
app.use(express.json());

app.get('/', async(req, res) => {
    res.status(200).send({
        message: 'Hello from CodeX',
    })
});

// fetches data from frontend body
app.post('/', async(req, res) => {
    try {
        const prompt = req.body.prompt;

        // used from openai examples
        const response = await openai.createCompletion({
            model: "text-davinci-003",
            prompt: `${prompt}`,
            temperature: 0,
            max_tokens: 3000,
            top_p: 1,
            frequency_penalty: 0.5,
            presence_penalty: 0,
        });

        res.status(200).send({
            bot: response.data.choices[0].text
        })
    } catch (error) {
        console.log(error);
        res.status(500).send({ error })
    }
})

app.listen(5000, () => console.log('Server is running on port http://localhost:5000'));

This code is setting up an Express server that will be used to communicate with the OpenAI API. It starts by importing the necessary packages and configuring the environment variables.

Then it sets up an Express server and adds a GET route that will return a message when called.

Finally, it adds a POST route that will take in data from the frontend, use it to call the OpenAI API, and return the response from OpenAI back to the frontend.

You can do deploy the server side in Render and client side using vercel after creating a git repository.

Checkout here for the complete tutorial. Helpful!

That's it for the day folks. See you next time!

Netflix Clone Build 2.0 With React-Redux and Firebase

Jagadeesh Koyya — Wed, 26 Oct 2022 13:51:45 +0000

Hello there! How do you do? I hope you're extremely doing well. Well, this time I've come up with a cloning project. And yes. It's the all time famous "netflix clone". What makes you a web developer without having atleast one clone webapp in your resume? A good one.

Tools we're going to use:

React JS
Redux
Firebase
TMDB API
HTML & CSS

Features:

Responsiveness
Dynamic
Realtime data fetching
Updated new list of movies and webseries
Authenticated users

Let's Start Building

Firstly we need to create a project folder and name it netflix-clone (anything you want) and open cmd in that directory.

Now, let's install react redux:
npx create-react-app netflix-clone --template redux

Open the directory with a code editor (I'd prefer vscode) and let's get started.

At the end of the project, we will have the directories heirarichy as shown below:
.
└── netflix-clone/
└── src/
├── app/
│ └── store.js
├── components/
│ ├── Banner.js
│ ├── Nav.js
│ ├── Row.js
│ ├── HomeScreen.js
│ ├── LoginScreen.js
│ ├── SignUpScreen.js
│ ├── ProfileScreen.js
│ └── Requests.js
├── features/counter/
│ └── userSlice.js
├── img/
│ └── logo.png
├── App.js
├── axios.js
├── firebase.js
├── index.css
└── index.js

Meanwhile, let's create a project in firebase console.

.
├── Firebase Console/
│ └── Add Project/
│ └── Project Name (Anything you wish)
└── Create a web app/
├── Give your webapp a name
├── Copy the script
└── Create a firebase.js and paste it there.

firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';


const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth };
export default db;

Do me a favour by creating this firebase configuration with your webapp script, would you?

You'll see something like this.

We do need authentication activated for our webapp and you can find it in the left side of your firebase website (Build).

Open it and enable Email and Password auth.

Now we're using TMDB API to fetch the latest movies and webseries data from it. Go to tmdb API and create a account. It's free. Now we need a API key for our project.

TMDB API/
└── Click on your profile /
└── Settings/
└── API (left navbar)

Now let's get back to our code editor and let's make some magic happen.

App.js

import { useEffect } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import HomeScreen from './components/HomeScreen';
import LoginScreen from './components/LoginScreen';
import { auth } from './firebase';
import { useDispatch, useSelector } from 'react-redux';
import { login, logout, selectUser } from './features/counter/userSlice';
import ProfileScreen from './components/ProfileScreen';

function App() {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(userAuth => {
      if(userAuth) {
        dispatch(login({
          uid: userAuth.uid,
          email: userAuth.email,
        }));
      } else {
        dispatch(logout());
      }
    });

    // cleanup
    return unsubscribe;
  }, [dispatch]);

  return (
    <div className="app">
      <Router>
        {
          !user ? (
            <LoginScreen />
          ) : (
            <Routes>
              <Route exact path='/' element = {<HomeScreen />} />
              <Route path = '/profile' element = {<ProfileScreen />} />
            </Routes>
          )
        }
      </Router>
    </div>
  );
}

export default App;

This is the root component for our project. Let's break it down.

It renders Login Screen if the user doesn't get signed in.
If the user is logged in then it renders the main home screen and profile screen.
The task of the useEffect is to dispatch the user details when signed in and reload the page when user gets signed out.

We're using the bueatiful react-render-dom here with the latest changes in the imports. No errors up to date.

userSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    }
  },
});

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

This component is pretty much simple. Think of yourself going to a market and you find there fruits like mango in a row, apples in another row and bananas in another.

Just like that we have slices for users. The state gets updated whenever user sign-in and sign-out. That's what we all need to listen to events for auth, thanks to redux and firebase auth.

axios.js
We need to install axios by using the command "npm i axios".

import axios from 'axios';

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3"
})

export default instance;

The baseURL given above is really helpful when we fetch movies and webseries data from the TMDB API.

Requests.js

const API_KEY = "your-API-key";

const requests = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
    fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,
};

export default requests;

Save this file in src > components.

Banner.js

import axios from '../axios';
import { useEffect, useState } from 'react';
import requests from './Requests';

function Banner() {
    const [movie, setMovie] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(requests.fetchNetflixOriginals);
            setMovie(
                request.data.results[
                    Math.floor(Math.random() * request.data.results.length - 1)
                ]
            );
            return request;
        }

        fetchData();
    }, []);

    const truncate = (str, n) => {
        return str?.length > n ? str.substr(0, n - 1) + '...' : str
    }

  return (
    <header 
        className='banner'
        style={{
            backgroundSize: "cover",
            backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie?.backdrop_path}")`,
            backgroundPosition: "center center",
        }}
    >
        <div className='banner-content'>
            <h1 className='banner-title'>
                {movie?.title || movie?.name || movie?.original_name}
            </h1>
            <div className='banner-buttons'>
                <button className='banner-button'>Play</button>
                <button className='banner-button'>My List</button>
            </div>
            <h1 className='banner-description'>
                {
                    truncate(
                        movie.overview, 150
                    )
                }
            </h1>
        </div>

        <div className='banner-fadeBottom' />
    </header>
  )
}

export default Banner;

Banner is what we see when the Netflix page get's loaded. The big main one on the top.

1) We're displaying the banner with the banner content.
2) We've added two buttons just like in Netflix.
3) When the movie description is huge, we truncate it short.

Row.js

import axios from "../axios";
import { useEffect, useState } from "react";

const Row = ({ title, fetchURL, isLargeRow = false }) => {
   const [movies, setMovies] = useState([]);

   const BASE_URL = "https://image.tmdb.org/t/p/original/";

   useEffect(() => {
    async function fetchData() {
        const request = await axios.get(fetchURL);
        setMovies(request.data.results);
        return request;
    }

    fetchData();
   }, [fetchURL]);

  return (
    <div className='row'>
        <h2>{ title }</h2>

        <div className="row-posters">
            {movies.map((movie) => (
                (isLargeRow && movie.poster_path) ||
                (!isLargeRow && movie.backdrop_path)) && (
                    <img key={movie.id}
                        className = {`row-poster ${isLargeRow && 'row-posterL'}`}
                        src={`${BASE_URL}${
                            isLargeRow ? movie.poster_path : movie.backdrop_path
                        }`}
                        alt = {movie.name} 
                    />
                )
            )}
        </div>
    </div>
  )
}

export default Row;

Those beautiful rows you see down on the main screen, down the banner are fetched using the TMDB API whenever the page loads.

Nav.js

import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';

const Nav = () => {
    const [show, handleShow] = useState(false);
    const navigate = useNavigate();

    const transitionNavBar = () => {
       (window.scrollY > 100) ? handleShow(true) : handleShow(false);
    }

    useEffect(() => {
        window.addEventListener("scroll", transitionNavBar);
        // clean-up
        return () => window.removeEventListener("scroll", transitionNavBar);
    }, []);

  return (
    <div className={`nav ${show && 'nav-black'}`}>
        <div className='nav-content'>
            <img
                onClick={() => navigate('/')}
src='https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png'
                alt='netflix-logo'
                className='navbar-logo'
            />

            <img 
                onClick={() => navigate('/profile')}
                src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png'
                alt = "avatar"
                className='navbar-avatar'
            />
        </div>

    </div>
  )
}

export default Nav;

I want to give a brief about this one.

1) That cool Netflix logo and Avatar you see on Nav bar.
2) When you click on Netflix logo, you'll be navigated to Homepage of netflix.
3) When you click on your Avatar you'll see a profile screen. That's the power of redux.

ProfileScreen.js

import React from 'react'
import { useSelector } from 'react-redux'
import { selectUser } from '../features/counter/userSlice'
import { auth } from '../firebase'
import Nav from './Nav'

const ProfileScreen = () => {
  const user = useSelector(selectUser);

  return (
    <div className='profileScreen'>
        <Nav />
        <div className='profile-body'>
            <h1>Your Profile</h1>
            <div className='profile-info'>
                <img 
                    src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png' 
                    alt='avatar' 
                />
                <div className='profile-details'>
                  <h2>{user.email}</h2>
                  <div className='profile-plan'>
                    <h3>Premium 4K + HDR</h3>
                    <button 
                      className='profile-signOut'
                      onClick={() => auth.signOut()}
                    >
                        Sign Out
                    </button>
                  </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default ProfileScreen;

We're fetching the user's email and displaying it with the plan details. Thanks to the useSelector.

LoginScreen.js

import { useState } from 'react'
import SignUpScreen from './SignUpScreen';
import logo from '../img/login-screen-logo.png'

const LoginScreen = () => {
    const [signIn, setSignIn] = useState(false);

  return (
    <div className='loginScreen'>
        <div className='login-bg'>
            <img 
                className='login-logo'
                src={logo}
                alt='login-screen-logo' 
            />
            <button 
                className='login-btn'
                onClick={() => setSignIn(true)}
            >
                Sign In
            </button>

            <div className='login-gradient' />
        </div>

        <div className='login-body'>
            {signIn ? (
                <SignUpScreen />
            ) : (
               <>
                <h1>Unlimited movies, TV shows and more.</h1>
                <h2>Watch anywhere. Cancel anytime.</h2>
                <h3>Ready to watch? Enter your email to create or restart your membership.</h3>

                <div className='login-input'>
                    <form>
                        <input 
                            type='email' 
                            placeholder='Email address'
                        />
                        <button 
                            className='login-getStarted'
                            onClick={() => setSignIn(true)}
                        >
                            {`Get Started >`} 
                        </button>
                    </form>
                </div>
               </>
            )}
        </div>
    </div>
  )
}

export default LoginScreen;

We build the login screen page for the user as it is shown in the original netflix.

1) If the user is new, sign up now will be an option.
2) If the user already exists, the user can sign in with their email and password.

SignUpScreen.js

import React, { useRef } from 'react'
import { auth } from '../firebase';

const SignUpScreen = () => {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const register = (e) => {
    e.preventDefault();

    auth.createUserWithEmailAndPassword(
      emailRef.current.value,
      passwordRef.current.value
    ).then((authUser) => {
      console.log(authUser)
    }).catch((err) => {
      alert(err.message);
    });
  };

  const signIn = (e) => {
    e.preventDefault();
    auth.signInWithEmailAndPassword(
      emailRef.current.value,
      passwordRef.current.value
    ).then((authUser) => {
      console.log(authUser)
    }).catch((err) => {
      alert(err.message)
    });
  };


  return (
    <div className='signUp'>
        <form>
          <h1>Sign In</h1>
          <input 
            type="email"
            placeholder='Email address'
            ref={emailRef}
          />
          <input 
            placeholder='Password'
            type="password"
            ref={passwordRef}
          />
          <button 
            type='submit'
            onClick={signIn}
          >
            Sign In
          </button>

          <h4>
            <span className='signUp-gray'>New to Netflix? </span>
            <span className='signUp-link' onClick={register}>Sign Up now.</span>
          </h4>
        </form>
    </div>
  )
}

export default SignUpScreen;

Here we use the firebase auth to provide the authentication to our users. When a new user is signed up, their data is stored for login availability.

Styling Portion

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  font-family: 'Readex Pro';
}

/* NavBar */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px;
  height: 30px;
  z-index: 1;
  transition-timing-function: ease-in;
  transition: all 0.5s;
}



.nav-content {
  display: flex;
  justify-content: space-between;
}

.nav-black {
  background-color: #111;
}

.navbar-logo {
  position: fixed;
  top: 10px;
  left: 0px;
  width: 80px;
  object-fit: contain;
  padding-left: 20px;
  cursor: pointer;
}

.navbar-avatar {
  position: fixed;
  right: 20px;
  width: 30px;
  cursor: pointer;
}

/* Banner */
.banner {
  height: 448px;
  position: relative;
  object-fit: contain;
  color: white;
}

.banner-content {
  margin-left: 30px;
  padding-top: 140px;
  height: 190px;
}

.banner-title {
  font-size: 3rem;
  font-weight: 800;
  padding-bottom: 0.3rem;
}

.banner-description {
  width: 45rem;
  line-height: 1.3;
  padding-top: 1rem;
  font-size: 0.8rem;
  max-width: 360px;
  height: 80px;
}

.banner-fadeBottom {
  height: 7.4rem;
  background-image: linear-gradient(
    100deg,
    transparent,
    rgba(37, 37, 37, 0.61),
    #111
  );
}

.banner-button {
  cursor: pointer;
  color: #fff;
  outline: none;
  border: none;
  font-weight: 700;
  border-radius: 0.2vw;
  margin-right: 1rem;
  background-color: rgba(51, 51, 51, 0.5);
  padding: 0.5rem 2rem;
}

.banner-button:hover {
  color: #000;
  background-color: #e6e6e6;
  transition: all 0.2s;
}

.app {
  background-color: #111;
}

/* Row */
.row {
  color: #fff;
  margin-left: 20px;
}

.row-posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row-posters::-webkit-scrollbar {
  display: none;
}

.row-poster {
  max-height: 100px;
  object-fit: contain;
  margin-right: 10px;
  width: 100%;
  transition: transform 450ms;
}

.row-poster:hover {
  transform: scale(1.08);
  opacity: 1;
}

.row-posterL {
  max-height: 250px;
}

/* LoginScreen */
.loginScreen {
  position: relative;
  height: 100%;
  background: url('https://assets.nflxext.com/ffe/siteui/vlv3/79fe83d4-7ef6-4181-9439-46db72599559/bd05b4ed-7e37-4be9-85c8-078f067bd150/IN-en-20221017-popsignuptwoweeks-perspective_alpha_website_medium.jpg') center no-repeat;
  background-size: cover;
}

.login-logo {
  position: fixed;
  left: 0;
  width: 150px;
  object-fit: contain;
  padding-left: 20px;
}

.login-btn {
  position: fixed;
  right: 20px;
  top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background-color: #e50914;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.login-body {
  position: absolute;
  z-index: 1;
  top: 30%;
  color: #fff;
  padding: 20px;
  text-align: center;
  /* centering a absolute element */
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.login-gradient {
  width: 100%;
  z-index: 1;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.login-body > h1 {
  font-size: 3.125rem;
  margin-bottom: 20px;
}

.login-body > h2 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 30px;
}

.login-body > h3 {
  font-size: 1.3rem;
  font-weight: 400;
}

.login-input > form > input {
  padding: 10px;
  outline-width: 0;
  height: 30px;
  width: 30%;
  border: none;
  max-width: 600px;
}

.login-getStarted {
  padding: 15px 20px;
  font-size: 1rem;
  color: #fff;
  background-color: #e50914;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.login-input {
  margin: 20px;
}


/* Sign-Up Screen */
.signUp{
  max-width: 300px;
  padding: 70px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.85);
}

.signUp > form {
  display: grid;
}

.signUp > form > h1 {
  text-align: left;
  margin-bottom: 25px;
}

.signUp > form > input {
  padding: 5px 15px;
  outline-width: 0;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 5px;
  border: none;
}

.signUp > form > button {
  padding: 16px 20px;
  font-size: 1rem;
  color: #fff;
  border-radius: 5px;
  background-color: #e50914;
  border: none;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
}


.signUp > form > h4 {
  text-align: left;
  margin-top: 30px;
}

.signUp-gray {
  color: gray;
}

.signUp-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* Profile Screen */
.profileScreen {
  height: 100vh;
  color: #fff;
}

.profile-body {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8%;
  max-width: 800px;
}

.profile-body > h1 {
  font-size: 60px;
  font-weight: 400;
  border-bottom: 1px solid #282c2d;
  margin-bottom: 20px;
}

.profile-info {
  display: flex;
}

.profile-info > img {
  height: 100px;
}

.profile-details {
  color: #fff;
  margin-left: 25px;
  flex: 1;
}

.profile-details > h2 {
  background-color: gray;
  padding: 15px;
  font-size: 15px;
  padding-left: 20px;
}

.profile-signOut {
  padding: 10px 20px;
  font-size: 1rem;
  margin-top: 5%;
  width: 100%;
  color: #fff;
  background-color: #e50914;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.profile-plan {
  margin-top: 20px;
}

.profile-plan > h3 {
  border-bottom: 1px solid #282c2d;
  padding-bottom: 10px;
}

@media(max-width: 900px) {
  .profileScreen {
    height: 100vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-body > h1 {
    font-size: 1.9rem;
    font-weight: 400;
    border-bottom: 1px solid #282c2d;
    margin-bottom: 20px;
  }

  .profile-info > img {
    height: 50px;
    display: none;
  }

  .login-body > h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .login-body > h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
  }

  .login-body > h3 {
    font-size: 0.9rem;
    font-weight: 400;
  }

  .login-input > form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .login-input > form > input {
    width: 80%;
  }

  .login-getStarted{
    margin-top: 10px;
  }

}

The Final Outlook

That's pretty much up to it. Let's wrap it up with the deployment.

Deployment

We're going to host our webapp in firebase itself with a few commands.

npm i -g firebase-tools
npm run build
firebase login
firebase init
firebase deploy

The steps are to generate build first, then login using your google account to the firebase and init the firebase by choosing already existing project (here, netflix-clone) and deploy.

Choose "build" as your firebase public folder.

Code ⚡
Live 🚀

Firebase React PhotoGallery

Jagadeesh Koyya — Sun, 16 Oct 2022 16:16:29 +0000

Hello there! How do you do? I hope you're extremely well. I'm about to dive you into some mind-blowing project but for doing that I need the next 5 minutes in your life if you'd allow me. That's great!

The idea of this webapp is to build a photo gallery to display our images wherever you go. Yes, the images can stay in there forever. What a nice way to keep all your memories together as images!

You can use it as a mini social media to share some great pictures or moments of your acheivements with your groups and your friends can share some cool stuff too. Sounds fun? Oh, Yeah.

Let's Start Building
You need to install react for creating this project and also the firebase using node js.

Let's install react js by creating our project folder named "firegram"
```
npx create-react-app firegram
```
After that, install firebase using the command given below
```
npm i firebase
```
We'll be using framer-motion for some cool animations, let's install it and keep it in our project pockets.
```
npm i framer-motion
```

Now open the project folder in your favourite code editor (I'd recommend vs code for this project).

Delete the files App.test.js, logo.svg, reportWebVitals.js, setupTests.js as we're not testing for now and clear the code in App.js

The boiler plate looks something like this.

App.js

import ImageGrid from './components/ImageGrid';
import Modal from './components/Modal';
import Title from './components/Title';
import UploadForm from './components/UploadForm';
import { useState } from 'react';


const App = () => {
  const [selectedImg, setSelectedImg] = useState(null);

  return (
    <div className='App'>
        <Title />
        <UploadForm />
        <ImageGrid setSelectedImg = {setSelectedImg} />
        {
          selectedImg && <Modal setSelectedImg = { setSelectedImg }selectedImg = {selectedImg} />
        }
    </div>
  )
}

export default App

This is the root component for our project. Just clean out App.js with the code above and I'm going to demonstrate you the components used in App.js

Title.js

import React from 'react'

const Title = () => {
  return (
    <div className='title'>
      <h1>Photo Gallery</h1>
      <h2>Your Pictures</h2>
      <p>Let the pictures showcase your memories.</p>
    </div>
  )
}

export default Title;

This is the starter file for our project. Pretty much what you see on UI before any images are uploaded.

ImageGrid.js

import { motion } from 'framer-motion';
import useFirestore from '../hooks/useFirestore'

const ImageGrid = ({ setSelectedImg }) => {
  const { docs } = useFirestore('images');
  const unique = [...new Map(docs.map((m) => [m.url, m])).values()];

  return (
    <div className='img-grid'>
      { 
        unique && unique.map(doc => (
          <motion.div 
            className='img-wrap' 
            key = {doc.id} 
            onClick = {() => setSelectedImg(doc.url)}
            whileHover = {{ opacity: 1 }}
            layout
          >
            <motion.img 
              src={doc.url} 
              alt="uploaded-img" 
              initial = {{ opacity: 0 }}
              animate = {{ opacity: 1 }}
              transition = {{ delay: 1 }}
            />
          </motion.div>
        )) 
      }
    </div>
  )
}

export default ImageGrid;

Pretty much what PhotoGrid component does is that it renders each and every image into the UI by collecting the images from firebase firestore database.

FirebaseConfig.js

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'; 
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};


const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);

This is the linking file to our project and firebase. You need to get the firebaseConfig data by creating a project in firebase. I'll show you how.

Firebase

Open firebase in your browser and click on 'Get started'
Create a new project by selecting 'Add Project'
Name your project and you're good to go. (It's your wish to enable or disable google analytics, for this project it's not needed)

Continue and now we need to create a web app by choosing web

Name your webapp.

Copy the code and save it in your project folder as firebaseConfig.js and the connection is established.

We'll be using the firestore database and storage services of firebase. For that, I've created two hooks for each of them. Let me enlighten you.

useFirestore.js

import { db } from "../firebase/config";
import { useEffect, useState } from 'react';
import { collection, onSnapshot, query, orderBy } from "firebase/firestore";

const useFirestore = (col) => {
  const [docs, setDocs] = useState([]);
  const collectionRef = collection(db, col);
  const q = query(collectionRef, orderBy("createdAt", "desc"));


    useEffect(() => {
        const unsub = onSnapshot(q, (snap) => {
            let documents = [];
            snap.forEach(doc => {
                documents.push({...doc.data(), id: doc.id})
            });
            setDocs(documents);
        })

        return () => unsub(); 

    }, [collection])

  return { docs };
}

export default useFirestore;

We're using the useEffect hook to fetch the docs (images) from the firestore database (db) every time there's a change in the firestore database. Given a query, we pass it as a parameter to onSnapshot, which takes a snapshot of the firestore db every time a change occurs.

useStorage.js

import { useEffect, useState } from 'react';
import { storage, db } from '../firebase/config';
import { 
    ref, 
    uploadBytesResumable, 
    getDownloadURL 
} from "firebase/storage";
import { 
    collection, 
    addDoc, 
    serverTimestamp
  } from 'firebase/firestore';

const useStorage = (file) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

  const collectionRef = collection(db, "images");

    useEffect(() => {
        const storageRef = ref(storage, file.name);
        const uploadTask = uploadBytesResumable(storageRef, file);

        uploadTask.on('state_changed', (snapshot) => {
            let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            setProgress(percentage);
        }, (err) => {
            setError(err);
        }, async () => {
            const url = await getDownloadURL(uploadTask.snapshot.ref);
            setUrl(url);
            addDoc(collectionRef, { url, createdAt: serverTimestamp() });
        })

    }, [file]);

  return { progress, url, error }
}

export default useStorage;

Oh, don't be worried by the above code. It's pretty much easy. What this component does is that it'll create a collection in firestore database by uploading the url of the image.

We can get the image url after uploading it to the firebase storage by using uploadTask and getDownloadURL.

That progress bar you see above is the upload rate of the image to the firebase storage.

Modal.js

import React from 'react';
import { motion } from 'framer-motion';

const Modal = ({ selectedImg, setSelectedImg }) => {
    const handleClick = (e) => {
        if(e.target.classList.contains('backdrop')) {
            setSelectedImg(null);
        }
    }

  return (
    <motion.div 
      className='backdrop' 
      onClick={handleClick}
      initial = {{ opacity: 0 }}
      animate = {{ opacity: 1 }}
    >
        <motion.img 
          src={selectedImg} 
          alt='modal-img'
          initial = {{ y: "-100vh" }}
          animate = {{ y: 0 }}
        />
    </motion.div>
  )
}

export default Modal;

When you click on any image on the UI, it'll be enlarged and displayed as a modal on our UI.

UploadForm.js

import { useState } from 'react';
import ProgressBar from './ProgressBar';

const UploadForm = () => {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);
    const types = ['image/png', 'image/jpeg'];

    const changeHandler = (e) => {
        let selected = e.target.files[0];

        if(selected && types.includes(selected.type)) {
            setFile(selected);
            setError('');
        } else {
            setError('Please choose an image (jpeg or png)');
            setFile(null);
        }
    }

  return (
    <form>
        <label>
            <input 
                type = 'file'
                onChange={changeHandler}
            />
            <span>+</span>
        </label>
        <div className='output'>
            { error && <div className='error'>{ error }</div>}
            { file && <div> {file.name} </div> }
            { file && <ProgressBar file = {file} setFile = {setFile} /> }
        </div>
    </form>
  )
}

export default UploadForm;

The imput tag you see on UI with a "+" is rendered by this component. We accept images of types jpeg or png otherwise it'll display an error.

That's pretty much up to it. I'll wrap up here. I want to thank Brad Traversy and Net Ninja for making this project possible. It's cool as this is my very first webapp.

The final UI looks like this with loaded images using some cool framer-motion animations.

Firebase Hosting

We're going to host our webapp in firebase itself with a few commands.

npm i -g firebase-tools
npm run build
firebase login
firebase init
firebase deploy

The steps are to generate build first, then login using your google account to the firebase and init the firebase by choosing already existing project (here firegram) and deploy.

When you enter "firebase init" you need to choose something like ">() Hosting: Config...firebase...Github" by pressing space button.

Choose your firebase project for your webapp and enter "build" as the public directory.

Cool. See you next week. Keep smiling!

Repo ⚡
Live ⚡

Task Tracker with React

Jagadeesh Koyya — Sun, 09 Oct 2022 06:40:02 +0000

How's your weekend going? I hope it's fruitful and lovely! Here comes a cool react project which is the "task tracker". Let me steel the next 3 minutes of your perfectly managed time to make your weekend a little bit more interesting with this cool project.

As for the boiler plate, you need to install react JS in prior to work on this project. You can get the prerequisites fulfilled in my previous post. I'll provide the link at the end, don't worry about it.

Thanks to Brad Traversy for making this possible. Here is a picture of showing that every highlighted one is a unique and reusable component in react.

Let's Start Building

The idea is to make a track of our tasks as you see the usecase in Notes or Tasks in your mobile devices. Yes, but this is gonna be a webapp. Here we add some tasks and make some tasks as reminders and then let the react manage them.

App.js

import { useState } from "react";
import AddTask from "./components/AddTask";
import Header from "./components/Header";
import Tasks from "./components/Tasks";


function App() {
  const [showAddTask, setShowAddTask] = useState(false);
  const [tasks, setTasks] = useState([
    {
        id: 1, 
        text: 'Marvels Appointment',
        day: 'Oct 15th at 2:30pm',
        reminder: true,
    },
    {
        id: 2, 
        text: 'Meeting at School',
        day: 'Nov 5th at 1:30pm',
        reminder: true,
    },
    {
        id: 3, 
        text: 'Grocery Shopping',
        day: 'Nov 6th at 4:30pm',
        reminder: false,
    },
  ])

  const addTask = (task) => {
    const id = Math.floor(Math.random() * 10000) + 1
    const newTask = {id, ...task}
    setTasks([...tasks, newTask])
  }

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id))
  }

  const toggleReminder = (id) => {
    setTasks(
      tasks.map((task) => 
        task.id === id ? {...task, reminder: !task.reminder} : task
      )
    )
  }


  return (
    <div className="container">
      <Header 
        onAdd = {() => setShowAddTask(!showAddTask)} 
        showAdd = {showAddTask}
      />
      {
        showAddTask && <AddTask onAdd = {addTask} />
      }
      {
        tasks.length > 0 ? 
          <Tasks tasks = {tasks} onDelete = {deleteTask} onToggle = {toggleReminder} /> :
          'No Tasks To Show'
      }
    </div>
  );
}

export default App;

Oh, don't worry looking at this code. Let me make it easy for you. In brief, what this code exactly does is that we take a bunch of tasks in prior and then we write functions to add or remove tasks by using the useful map and filter methods in JS. We have created a state called tasks (array) consisting each and every task (object).

Tasks.js

import Task from "./Task"
const Tasks = ({ tasks, onDelete, onToggle }) => {
  return (
    <>
        {tasks.map((task) => (
            <Task key = {task.id} task = {task} onDelete = {onDelete} onToggle = {onToggle}/>
        ))}
    </>
  )
}

export default Tasks

Here comes the next component Tasks.js (remember that we've created every part of this UI as a component) used to render the tasks one by one by calling another component called Task.js

Task.js

import { FaTimes } from 'react-icons/fa';

const Task = ({ task, onDelete, onToggle }) => {
  return (
    <div className = {`task ${task.reminder && 'reminder'}`}
    onDoubleClick = {() => onToggle(task.id)}
    >
        <h3> 
          {task.text} 
          <FaTimes style={{ color: 'red', cursor: 'pointer' }} 
          onClick = {() => onDelete(task.id)}
          /> 
        </h3>

        <p> {task.day} </p> 
    </div>
  )
}

export default Task

Each and every task is a unique and reusable component in our project and we make it to seperate the code for reusablity and better management. I'll add a image to make you understand of all the components created and used.

Styles.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

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

body {
  font-family: 'Poppins', sans-serif;
}

.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}

.task {
  background-color: #f4f4f4;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

.reminder {
  border-left: 5px solid green;
}

.task h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-form {
  margin-bottom: 40px;
}

.form-control {
  margin: 20px 0;
}

.form-control label {
  display: block;
}

.form-control input {
  width: 100%;
  height: 40px;
  margin: 5px;
  padding: 3px 7px;
  font-size: 17px;
}

.form-control-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-control-check label {
  flex: 1;
}

.form-control-check input {
  flex: 2;
  height: 20px;
}

footer {
  margin-top: 30px;
  text-align: center;
}

Styling is what makes UI looks more cooler and better. These are all the styling we've used in the code to add beauty to this project.

I'll wrap up here. Pretty cool, right? Oh and for the deployment part, I've discussed about that in my previous post. I'll leave the links to my repo and the live running of this project.

Previous Post 🚀
Repo ⚡
Live ⚡

See you soon!

React Tailwind Gallery

Jagadeesh Koyya — Fri, 07 Oct 2022 17:34:03 +0000

Hello there! How do you do? I hope you're doing extremely awesome! Just here to steal 5 minutes of your time (barely) if you'd allow me.

Here comes my first react app with tailwind css. I'll give you a breif idea about this cool project.

I have used an API from Pixabay to fetch some beautiful set of images and render them on the screen. Based on the user's input, this project will re-render the images matching the user's query. Pretty simple, right?

Let's Start Building

Creating a react app

First things first, we need to install react into our project. I'm assuming you've installed node in your pc.

1) Create a project

Create a folder named "react-tailwind-gallery" and open vs code editor and then open a terminal.

npx create-react-app . (coommand for windows)

2) Install Tailwind CSS

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

3) Configure tailwind.config.js file.

Create a file named "tailwind.config.js" and just copy paste the code below.

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

4) Add the Tailwind directives to your CSS

Add the below code to your ./src/index.css file.

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

5) Start your build process

npm start run

Now we've created a react project and integrated tailwind to our project. Cool. I'll make sure my root component App.js is up and running error free.

App.js

import { useState, useEffect } from "react";
import ImageCard from "./components/ImageCard";
import ImageSearch from "./components/ImageSearch";

function App() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [term, setTerm] = useState('');

  useEffect(() => {
    fetch(`https://pixabay.com/api/?key={your-pixabay-key}&q=${term}&image_type=photo&pretty=true`)
    .then(response => response.json())
    .then(data => {
      setImages(data.hits);
      setIsLoading(false);
    })
    .catch(err => console.log(err));
  }, [term]);

  return (
    <div className="container mx-auto">
      <ImageSearch searchText = {(text) => setTerm(text)} />

      {!isLoading && images.length === 0 && <h1 className="text-5xl text-center mx-auto mt-32">No Images Found</h1>}

      {isLoading ? <h1 className="text-6xl text-center mx-auto mt-32">Loading...</h1> 
      : <div className="grid grid-cols-3 gap-4">
        {images.map(image => (
          <ImageCard key = {image.id} image = {image} />
        ))}
      </div>}
    </div>
  );
}

export default App;

Don't be worried by the code. It's pretty simple. We're trying to render an array of images using an API pixabay using a key given by pixabay. Then we store the response and load the data into an array called images as soon as the page renders (with the help of useEffect hook it's made possible).

ImageCard.js

import React from 'react'

const ImageCard = (props) => {
    const tags = props.image.tags.split(',');

  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img src={props.image.webformatURL} alt="random" className="w-full" />
      <div className="px-6 py-4">
        <div className="font-bold text-red-500 text-xl mb-2">
          Photo by {props.image.user}
        </div>
        <ul>
          <li>
            <strong>Views: </strong>
            {props.image.views}
          </li>
          <li>
            <strong>Downloads: </strong>
            {props.image.downloads}
          </li>
          <li>
            <strong>Likes: </strong>
            {props.image.likes}
          </li>
        </ul>
      </div>
      <div className="px-6 py-4">
        {tags.map((tag,index) => (
            <span key = {index} className="inline-block bg-gray-200 rounded-full px-3 
            py-1 text-sm font-semibold text-gray-700 mr-2">
              #{tag}
            </span>
        ))}
      </div>
    </div>
  )
}

export default ImageCard;

This is the component we use for rendering each and every image card. Here I used the grid alignment to make sure that the image cards are rendered as 3 in coloumn and as many rows as they wish.
It's all basics of react (I'm hoping you'd know them).

ImageSearch.js

import React, { useState } from 'react';

const ImageSearch = (props) => {
  const [text, setText] = useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    props.searchText(text);
  }

  return (
    <div className='max-w-sm rounded overflow-hidden my-10 mx-auto'>
      <form onSubmit={onSubmit} className="w-full max-w-sm">
        <div className="flex items-center border-b border-b-2 border-teal-500 py-2">
            <input onChange={e => setText(e.target.value)} className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Image Term..." />
            <button className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
                Search
            </button>
        </div>
      </form>
    </div>
  )
}

export default ImageSearch;

This is the heart to our project. We provide an input field for the user to enter the query. For example, user entered "cats" so that we render only the images related to cats.

For each and every time, based on the user's query, this project renders the related image cards using the useEffect hook by fetching the API's data from Pixabay.

That's pretty much up to it. I don't wanna brag in or go deep. You can have my github repo and the live deployed link to experience the fun!

Repo ⚡
Live ⚡

You can end here as the project is over. I just wanted to talk about the deployment part. Here I've deployed this project in GitHub Pages.

Deployment

1) Firstly create a repo in github with your project name

2) Enter the commands in your terminal as given below

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/JagadeeshKJ/gallery.git
git push -u origin main

3) Add GitHub Pages dependency package using this command

npm install --save gh-pages

4) Add homepage property to package.json file

"homepage": "https://{username}.github.io/{your-repo-name}/"

5) Add deploy scripts to package.json file

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

6) Deploy the Application to GitHub Pages

Now run the below command to deploy your react application to GitHub Pages.

npm run deploy

That's it. You'll get something like this, in your terminal (vs code).

gh-pages -d build
Published
Done in 18.14s

Now, you can access the live deployed link using the homepage link which you've added to your package.json

(Looks like this) "https://JagadeeshKJ.github.io/react-tailwind-gallery/"

See you soon!

Eyes Watching Mouse

Jagadeesh Koyya — Sun, 25 Sep 2022 15:24:07 +0000

Hey there! How do you do? I hope you're doing superb! I hope the very best for you.

Here comes a tiny cool thing called "Eyes Watching Mouse" (wait a min...what's that?) let's talk about it, shall we?

We have a boiler plate for starters with index.html, style.css and script.js and the final outcome looks like this.

Let's Start Building

We start with the html which is really easy and all it has are some div tags.

Html

<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>

That's pretty simple, cool? The main div with a class "face" holds a face with two eyes and that's what you saw in the earlier image.

CSS

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #333;
    cursor: pointer;
}

.face {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
}

.face::before {
    content: '';
    position: absolute;
    top: 180px;
    width: 150px;
    height: 70px;
    background-color: #b57700;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: 0.5s;
}

.face:hover::before {
    top: 210px;
    width: 150px;
    height: 20px;
    background-color: #b57700;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.eyes {
    position: relative;
    top: -40px;
    display: flex;
}

.eyes .eye {
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
    background-color: #fff;
    margin: 0 15px;
    border-radius: 50%;
}

.eyes .eye::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #333;
    border-radius: 50%;
}

I'll try to give you a brief of this code. So we had a background to highlight the face and we displayed it using flex. It holds another div, if you saw the html code earlier. We have a div with class "eyes" in it. That would be the main portion.

So when we hover over the face, we have this smile effect goes numb. That's when you hover inside the face. When the region of cursor gets over the face, you'll see the face smile.

Script

document.querySelector('body').addEventListener('mousemove', eyeball);

function eyeball() {
    var eye = document.querySelectorAll('.eye');
    eye.forEach(function(eye){
        let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
        let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
        let radian = Math.atan2(event.pageX - x, event.pageY - y);
        let rot = (radian * (180 / Math.PI) * -1) + 270;
        eye.style.transform = "rotate("+ rot + "deg)";
    })
}

To understand this, I strongly recommend you to have a knowledge hunch on querySelectorAll, getBoundingClientRect, atan2, pageX, pageY.

The querySelectorAll will select all the queries having in common like all p tags or all h1 tags. The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

I don't want to go for longer explainations, that wouldn't be so cool. See you next week! I just wanna wrap up here with the links to my Github repo and the live deployment of this whatever you can name-it-and-call-it.

Repo ⚡
Live ⚡

Slider Sign-In/Sign-Up

Jagadeesh Koyya — Sun, 18 Sep 2022 16:09:51 +0000

Hello there! I hope you're living your best life now. Just another weekend. Another cool project. This time it's the login page.

Let's Start Building

For the boiler plate, we have index.html, style.css and script.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
    crossorigin="anonymous"
    >
    <link rel="icon" href="https://www.simplyhealth.co.uk/shcore/sh/furniture/images/svgs/top-nav-account-icon.svg">
    <link rel="stylesheet" href="style.css">
    <title>Slider Sign In/Sign Up Form</title>
</head>
<body>
    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>Create Account</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your email for registration</span>
                <input type="text" placeholder="Name" />
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <button>Sign Up</button>
            </form>
        </div>

        <div class="form-container sign-in-container">
            <form action="#">
                <h1>Sign in</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your account</span>
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <a href="#">Forgot your password?</a>
                <button>Sign In</button>
            </form>
        </div>

        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To keep connected with us please login with your personal info</p>
                    <button class="ghost" id="signIn">Sign In</button>
                </div>

                <div class="overlay-panel overlay-right">
                    <h1>Hello, Friend!</h1>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Here we have a form and it consists of two variants. One is the sign-in form and the another one is the sign-up form. Respective one of those will have a overlay content of greetings.

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f6f5f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: -20px 0 50px;
}

h1 {
    font-weight: bold;
    margin: 0;
}

p {
    font-size: 14px;
    letter-spacing: 0.5px;
    font-weight: 100;
    line-height: 20px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    text-decoration: none;
    margin: 15px 0;
    font-size: 14px;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
    0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container form {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    margin: 0 5px;
}

.form-container input {
    background-color: #eee;
    border: none;
    margin: 8px 0;
    padding: 12px 15px;
    width: 100%;
}


button {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background-color: #ff4b2b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button.ghost {
    background: transparent;
    border-color: #fff;
}


.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.overlay {
    background-color: #ff416c;
    background: linear-gradient(to right, #FF4B2B, #FF416C) no-repeat 0 0 / cover; 
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.container.container.right-panel-active .sign-up-container{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

The styling will take up the huge portion in making this project possible. It includes transitions, transformations and pretty much the basics of css.

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
    container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
    container.classList.remove("right-panel-active");
});

Here's to the manipulative portion of DOM. Thanks to the event listeners, we can now slide between sign-in and sign-up forms.

Repo ⚡
Live ⚡

That's pretty much up to it, my fellow avid reader. See you in the next weekend!

Gallery Grid

Jagadeesh Koyya — Sun, 11 Sep 2022 16:17:31 +0000

Hey there! I hope you're doing extremely well. Here's to this week's mini project.

Let's Start Building

The concept is simple. We're planning on to build a static website hosting a bunch of pictures. This idea is derived from photo gallery which is cool.

The boiler plate consists of html, css, js pages. The root file is index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://assets.materialup.com/uploads/5f78aab4-7fbc-4eb8-8ac2-755948f9c89d/preview.jpg">
    <title>Grid Gallery</title>
</head>
<body>

    <div class="full-img" id="fullImgBox">
        <img src="img/img1.jpg" id="fullImg" alt="full-img">
        <span onClick = "closeFullImg()">X</span>
    </div>

    <div class="img-gallery">
        <img src="img/img1.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img2.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img3.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img4.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img5.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img6.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img7.jpg" onClick = "openFullImg(this.src)" alt="img">
        <img src="img/img8.jpg" onClick = "openFullImg(this.src)" alt="img">
        <!-- this.src is passed to the f() when full img is clicked -->
    </div>


    <script src="script.js"></script>
</body>
</html>

The html code is pretty simple. All we did was created a div for holding 8 images which will be hosted on our webpage when rendered. Prior to that div, we have another div for full image, which will pop up when any small img is viewed.

CSS

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body{
    background-color: #ecf4fb;
}

.img-gallery{
    width: 80%;
    margin: 6em auto 3em; /* 16px = 1em */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 2em;
}

.img-gallery img{
    width: 100%;
    cursor: pointer;
    transition: 0.4s;
}

.img-gallery img:hover{
    transform: scale(0.8) rotate(-15deg); 
    border-radius: 20px;
    box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2); 
}

.full-img{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100; 
}

.full-img img{
    width: 90%;
    max-width: 30em;
}

.full-img span{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

I believe that the styles I've used here is self-explanatory so I'm gonna go to the script part now.

Script.js

var fullImgBox = document.getElementById('fullImgBox')
var fullImg = document.getElementById('fullImg')

function openFullImg (pic) {
    fullImgBox.style.display = "flex";
    fullImg.src = pic;
}

function closeFullImg() {
    fullImgBox.style.display = "none";
}

Here comes the heart to this gallery grid. So what this script file does is, it has two functions in it, as you can see ofcourse.

openFullImg triggers the clicked image to scale up with the respective styles applied.

closeFullImg when triggered hides the full image by simply mainpulating the display attribute set to none.

Repo ⚡
Live ⚡

That's it for the day my fellow developer. The next time I'll be coming up with real-time webapp where this gallery grid is gonna be customisable to everyone. You can render your own images online! Till then, bye-bye!

Hoverboard

Jagadeesh Koyya — Sun, 04 Sep 2022 15:29:27 +0000

Hello there! How're you doing? Hope you're well and sound.

This is just an article on a side-project which I'd made with @traversymedia tutorial. That guy is just awesome in making cool projects.

Let's Start Building!

We'll start with a new folder named Hoverboard (anything you wish) and will add index.html, style.css and script.js

Html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://designshack.net/wp-content/uploads/hover-effects.png">
    <title>Hoverboard</title>
</head>
<body>
    <div class="container" id = "container">
        <!-- Squares are inserted by JS -->
    </div>
    <script src="script.js"></script>
</body>
</html>

I'll try to keep it short and brief as it doesn't demand it. Here's the thing, we created a container and gave it an id with the same class name in a div.

Inside the container, we'll generate some cool square boxes with the help of script.js.

JS :

const container = document.getElementById('container');
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'];
const SQUARES = 500;
for(let i = 0; i < SQUARES; i++) {
    const square = document.createElement('div');
    square.classList.add('square');

    square.addEventListener('mouseover', () => setColor(square));

    square.addEventListener('mouseout', () => removeColor(square));

    container.appendChild(square);
}

function setColor(element) {
    const color = getRandomColor()
    element.style.background = color
    element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element) {
    element.style.background = '#1d1d1d';
    element.style.boxShadow = '0 0 2px #000';
}

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
}

That's pretty much up to it. What this code does is that it'll generate the SQUARES using an iterative loop (say upto 500 for now).

We got an array of different colors for the color effect when we hover over the square boxes to make it look just awesome.

Using the event listeners, we're able to make it possible and we made changes to the styles based on the actions of mouse over and out.

Styles :

*{
    box-sizing: border-box;
}

body{
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 400px;
}

.square{
    background-color: #1d1d1d;
    box-shadow: 0 0 2px #000;
    height: 16px;
    width: 16px;
    margin: 2px;
    transition: 2s ease;
}

.square:hover{
    transition-duration: 0s;
}

The beauty of transitions is exhibited here. All we need is the power of flexbox and that's it. Box-shadow is a way to go.

Repo ⚡
Live ⚡

I think that's it, my fellow developer. Thank you for your time!

A Digital Resume

Jagadeesh Koyya — Tue, 30 Aug 2022 13:18:04 +0000

If you have a resume in hand, let's make it fly over the web.

A resume is a brief summary of personal and professional experiences, skills, and education history. Its main purpose is to show off your best self to potential. And you should carefully prepare your resume.

Let start building

I've started this project by creating a folder with index.html, style.css and script.js

index.html is the root file for your project. All the styling part is seperated into style.css and the script.js file handles the events.

Repo ⚡
Live ⚡

HTML Setup
Let's get some boiler plate HTML setup and build out everything up.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://st3.depositphotos.com/27847728/36434/v/950/depositphotos_364349646-stock-illustration-initial-letter-logo-design-vector.jpg?forcejpeg=true">
    <script src="script.js"></script>
    <title>Jagadeesh Koyya</title>
</head>
<body>

    <!-- Button -->
    <input type="checkbox" id="checkbox" onclick="myFunction()">

    <div id="container">

        <section id="wrapper--hero" class="section--page">
            <div>
                <h1 id="username">Jagadeesh Koyya</h1>
                <p id="bio">Software developer, programmer in c and c++. Enthusiastic in full stack development. Blogger in dev, hashnode.</p>
                <p id="email">👉 jagadeesh10th@gmail.com</p>
            </div>
        </section>

        <section class="section--page">
            <div id="social--links">
                <a href="https://dev.to/jagadeeshkj" target="_blank">Dev</a>
                <a href="https://twitter.com/jagadeesh_kj" target="_blank">Twitter</a>
                <a href="https://www.linkedin.com/in/jagadeesh-kj/" target="_blank">Linkedin</a>
                <a href="https://github.com/JagadeeshKJ" target="_blank">GitHub</a>
                <a href="./assets/Jagadeesh Koyya.pdf" target="_blank">Download Resume</a>
            </div>
        </section>

        <section class="section--page">
            <h2>Skills & Qualifications</h2>
            <ul id="qualifications--list">
                <li>✔️ HackerRank with 20205 Hackos in C & C++
                </li>
                <li>✔️ Selected as Campus Ambassador of E-Cell, IIT Bombay (2021-22)</li>
                <li>✔️ Experienced content writer on Dev community, Hashnode </li>
                <li>✔️ CEFR B2 Upper Intermediate 499 EnglishScore</li>
            </ul>
        </section>

        <section class="section--page">
            <h2>Tech Stack</h2>

            <div id="wrapper--techstack--items">
                <div class="card--techstack">
                    <span>Python, Javascript, Node JS</span>
                </div>

                <div class="card--techstack">
                    <span>Django, FastAPI</span>
                </div>

                <div class="card--techstack">
                    <span>React, Next JS</span>
                </div>

                <div class="card--techstack">
                    <span>MangoDB, MySQL</span>
                </div>

            </div>
        </section>

        <section id = "work-history-wrapper class="section--page">
            <h2>Work History</h2>

            <div class="line-break"></div>
            <div class="card--work-history">
                <strong>🚧 Software Developer, Blog writter at Dev.io</strong>
                <p>01/2021 - Present</p>
                <p>Worked on building useful tools for real-time problem solving. Learning trending tech and teaching people via blog writing is helpful and enjoyable.</p>
                <ul>
                    <li>Produced educational blog content which resulted in 300k+ views on Dev</li>
                    <li>Produced SE campaigns and content to gain market share for related keywords.</li>
                </ul>
            </div>
            <div class="line-break"></div>

            <div class="card--work-history">
                <strong>🚧 Campus Ambassador of E-Cell, IIT Bombay</strong>
                <p>05/2021 - Present</p>
                <p>Interacted with people of different mindsets and from various cultural backgrounds.</p>
                <ul>
                    <li>Made regular contributions to the CA program (work from home)</li>
                    <li>Incentives, real-time learning, entrepreneurship and more </li>
                </ul>
            </div>
            <div class="line-break"></div>
        </section>

        <!-- Projects -->
        <section class="section--page">
            <h2>Projects & Accomplishments</h2>

            <div class="card--project">
                <a href="project1.html"><span>🏆 </span>QR Code Generator - For Any Website
                </a>
            </div>

            <div class="card--project">
                <a href="project5.html"><span>🏆 </span>Password Generator - Authentic
                </a>
            </div>

            <div class="card--project">
                <a href="project2.html" ><span>🏆 </span>Whatsapp Anonymous Messanger</a>
            </div>

            <div class="card--project">
                <a href="project3.html" ><span>🏆 </span>Starbucks Clone - An art of cool work</a>
            </div>

            <div class="card--project">
                <a href="project4.html"><span>🏆 </span>Restaurant Website - A Working Prototype</a>
            </div>

        </section>

    </div>

</body>
</html>

I've included sections for Skills, Tech Stack, Work History and Projects and wrapped all of 'em in a container.

A boiler plate for a project page would be like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Jagadeesh Koyya</title>
</head>
<body>
    <div id="container">
        <a href="index.html">&#x2190; Go Back</a>
        <h1>Built a tool to generate QR Code for handling business websites</h1>

        <ul>
            <li><a href="https://qr-code-generator-eight.vercel.app/" target="_blank">Live Demo</a></li>
            <li><a href="https://github.com/JagadeeshKJ/QR-Code-Generator" target="_blank">Source code</a></li>
        </ul>
        <p>Why remember long websites when you can just click-scan-hit in one go. That's where the cool work of this tool is projected. This tool generates a QR Code for the entered website and it can be saved to access the website 24x7.</p>

        <ul>
            <li>QR Codes are portable and comes in handy.</li>
            <li>Build using qrcode.js, a library of JS.</li>
            <li>QR Code comes in any size and takes little storage.</li>
        </ul>
    </div>
</body>
</html>

Styling what we have so far

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root{
    --mainTextColor-light:#000;
    --secondaryTextColor-light:rgb(51 51 51);
    --mainLinkColor-light:#0da2b8;
    --mainBorderColor-light:rgb(218, 218, 218);
    --mainBgColor-light:rgb(249, 250,251);

    --mainTextColor-dark:#fff;
    --secondaryTextColor-dark:#adb0b1;
    --mainLinkColor-dark:rgb(30, 190,214);
    --mainBorderColor-dark:#2b3031;
    --mainBgColor-dark:#131415;

    --mainTextColor:var(--mainTextColor-light);
    --secondaryTextColor:var(--secondaryTextColor-light);
    --mainLinkColor:var(--mainLinkColor-light);
    --mainBorderColor:var(--mainBorderColor-light);
    --mainBgColor:var(--mainBgColor-light);
}

*{
    font-family: 'Readex Pro';
    line-height: 1.5em;
    box-sizing: border-box;
    color: var(--mainTextColor);
}

body{
    background-color: var(--mainBgColor);
}

p, span, li{
    color: var(--secondaryTextColor);
    font-size: 1em;
}

a{
    text-decoration: none;
    color: var(--mainLinkColor);
    font-size: 500;
}

li{
    line-height: 1.9em;
}

#container{
    max-width: 700px;
    margin: 0 auto;
}

.section--page{
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Wrapper-Hero */
#wrapper--hero{
    display: flex;
    align-items: center;
    gap: 4em;
}

#username{
    font-size: 3em;
    line-height: 1em;
}

#bio, a{
    font-weight: 300;
}

/* #pic{
    border-radius: 50%;
    width: 200px;
    height: 150px;
    object-fit: cover;
} */

#email{
    color: var(--mainTextColor);
}

/* Social Media Links */
#social--links{
    display: flex;
    column-gap: 1em;
    justify-content: space-between;
    flex-wrap: wrap;
}

#social--links a{
    font-size: 0.9em;
    color: var(--secondaryTextColor);
    transition: 0.3s;
}

#social--links a:hover{
    color: var(--mainLinkColor);
}

#qualifications--list{
    list-style: none;
}

/* Tech Stack */
#wrapper--techstack--items{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    font-size: 0.9em;
}

.card--techstack{
    border: 1px solid var(--mainBorderColor);
    border-radius: 5px;
    padding: 0.5em 1em;
}

/* Work History */
.card--work-history{
    margin: 3em 0;
    padding-left: 2em;
    border-left: 1px solid var(--mainBorderColor);
}

.line-break{
    background-color: var(--mainBorderColor);
    height: 1px;
}

/* Projects */
.card--project{
    padding: 1em 0;
    border-top: 1px solid var(--mainBorderColor);
}

.card--project a{
    color: var(--mainTextColor);
    transition: .3s;
}

.card--project a:hover{
    color: var(--mainLinkColor);
}

@media(max-width: 600px){
    #wrapper--hero{
        flex-direction: column;
        gap: 1em;
    }

    .section--page{
        padding: 1em 0;
    }

    .card--work-history{
        border-left: none;
        padding-left: 0;
    }

    #qualifications--list{
        padding: 0;
    }
}


/* Dark Mode */
.dark-mode {
    background-color: var(--mainBgColor-dark);
}

/* Styling the checkbox input */
#checkbox{
    position: absolute;
    top: 20px;
    right: 20px;
    appearance: none;
    -webkit-appearance : none;
    -moz-appearance : none;
    -o-appearance : none;
    width: 60px;
    height: 30px;
    background: black;
    border-radius: 22px;
    cursor: pointer;
    outline: none;
}
/* styling the circle inside the checkbox input */
#checkbox::before{
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background-color:white;
    border-radius: 35px;
    top: 2px;
    left: 2px;
    cursor: pointer;
    transition: .3s linear;
}
/* moving the checkbox circle when it's toggled by the user */
#checkbox:checked::before{
    left: 35px;
}
/* changing the color of the checkbox when it's toggled */
#checkbox:checked{
    background: rgb(12, 177, 81);
}

#checkbox:checked ~ #container{
    --mainTextColor:var(--mainTextColor-dark);
    --secondaryTextColor:var(--secondaryTextColor-dark);
    --mainLinkColor:var(--mainLinkColor-dark);
    --mainBorderColor:var(--mainBorderColor-dark);
    --mainBgColor:var(--mainBgColor-dark);
}

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
 }

That's pretty much up to it. I've provided the links to live deployment and the GitHub repo where you can access the source code.🔝

This project is entirely based on a tutorial I've recently come across in @traversymedia. They do really make some awesome content. @dennisivy11 is such a nice guy with skills. 🙌🏻

An extension which I've added in my project is the dark mode feature. You can switch to light/dark mode in just one click and it's cool I guess.