Forem: Abhirup Kumar Bhowmick

Building a Music Recommendation System using Emotion Detection

Abhirup Kumar Bhowmick — Tue, 06 May 2025 04:13:11 +0000

Music Recommendation Through the Lens of Emotion Detection

In today's digital age, personalized experiences are paramount. From tailored shopping suggestions to curated news feeds, we've come to expect technology to understand and cater to our individual preferences. Music is no exception. While traditional music recommendation systems often rely on listening history, genre preferences, or collaborative filtering, a more nuanced approach involves understanding the listener's current emotional state. This blog post explores the fascinating intersection of emotion detection and music recommendation, detailing how we built a system that recommends music based on how you're feeling.

Unveiling Emotions: The Foundation of Our System

The first crucial step in building an emotion-aware music recommendation system is accurately detecting human emotions. This is a complex task, as emotions are subtle and multifaceted. Our approach focused on analyzing facial expressions, a powerful indicator of a person's internal state. We utilized the FER2013 dataset, which is widely used for facial emotion recognition and contains images categorized into seven distinct emotions: angry, disgusted, fearful, happy, neutral, sad, and surprised.

We explored various methods for facial emotion recognition, primarily leveraging the power of Convolutional Neural Networks (CNNs). CNNs are a class of deep learning models particularly well-suited for analyzing visual data like images. We experimented with building custom CNN architectures from scratch, carefully designing layers and configurations to effectively learn features from facial images that correlate with different emotions.

Our initial attempts involved a VGG-inspired architecture. We carefully designed its layers and configurations to effectively learn features from facial images that correlate with different emotions. Through training on the FER2013 dataset, this model yielded an accuracy of 51.98%.

Building upon this, we then explored a custom ResNet-inspired model. This architecture, known for its deeper structure and residual connections, showed improved performance in learning complex facial features. Training this custom ResNet-inspired model on the FER2013 dataset resulted in a higher accuracy of 73.15%.

In addition to custom models, we also investigated the use of pre-trained models. These models, trained on massive datasets for image recognition tasks, have already learned to identify a wide range of visual patterns. We explored fine-tuning a pre-trained ResNet50 model, adapting its learned knowledge to the specific task of facial emotion recognition. This involved adjusting the model's later layers to classify emotions based on the features it had already learned to extract. This approach proved to be the most effective, resulting in a final accuracy of 92.8%. The fine-tuned pre-trained ResNet50 model consistently outperformed the custom CNN architectures, demonstrating its effectiveness in this task. This is likely due to the vast amount of data the pre-trained model was initially exposed to, allowing it to develop a robust understanding of visual hierarchies and features that are also relevant to facial expressions.

Crafting the Soundtrack to Your Mood: The Music Recommendation Engine

With a reliable emotion detection system in place, the next step was to build a music recommendation engine that could leverage this emotional understanding. Our goal was to provide music that aligns with or helps to enhance the detected emotion.

Our music recommendation system was built around a curated collection of songs categorized by emotion. We compiled lists of songs associated with various emotional states, such as happy, sad, angry, neutral, fearful, disgusted, and surprised. This categorization was based on a combination of factors, including lyrical content, musical style, and common associations.

To access and play music, we integrated with a music streaming service using the Spotipy library, a Python library for the Spotify Web API. This allowed us to programmatically search for and play songs from our categorized lists based on the emotion detected.

The Harmony of Emotion and Music: Bringing It All Together

The true innovation of our system lies in the seamless integration of emotion detection and music recommendation. The process unfolds as follows:

First, the system captures a facial image of the user. This image is then fed into the trained emotion detection model. The model analyzes the facial features and outputs a predicted emotional state.

Once the emotion is detected (e.g., happy, sad, calm), the system accesses the corresponding category of songs in our curated music collection. Using the Spotipy library, it then selects and plays a song from that category.

This creates a dynamic and personalized music listening experience. Instead of relying on static preferences, the system adapts to the user's current mood, offering a soundtrack that resonates with their feelings. Feeling down? The system might recommend uplifting tunes. Feeling stressed? Perhaps calming melodies are in order.

By combining the power of computer vision for emotion detection with a carefully curated music library and seamless integration with a music streaming service, we've created a system that goes beyond traditional recommendation methods, offering a truly emotionally intelligent music experience. This approach opens up exciting possibilities for more personalized and empathetic interactions between humans and technology.

How I Encountered the Problem and Built the Solution: PrepiQ

Abhirup Kumar Bhowmick — Mon, 29 Jul 2024 12:17:44 +0000

The Problem: A Personal Struggle with Confidence

For many of us, placement season is a really anxious time. As I prepared for my interviews, I became aware that, in spite of my thorough preparation, my confidence was lacking. It was unbearable to be asked difficult questions, especially ones that were customized to my credentials and the job description. I was aware that many of my friends felt the same way I did about this challenge. Even though we had the abilities and expertise needed for the position, we were all in the same situation — we lacked the confidence to shine during our interviews.

The Eureka Moment: An Idea to Solve the Problem

I had an idea one evening while watching a YouTube short: what if there was a way to mimic actual interview situations and get tailored feedback? What if we could use technology to create interview questions based on our job descriptions and resumes? This thought lit a fire under me. I was committed to developing a solution that would give self-conscious job seekers like myself the confidence they need to ace their interviews.

Building the Solution: The Birth of PrepiQ

I started my journey of developing, testing, and polishing with this aim in mind. PrepiQ was created after 2 weeks of unrelenting work and restless nights. PrepiQ is a SaaS mock interview driven by AI that aims to revolutionize interview preparation.

Why use PrepiQ

1. Personalized Interview Questions: PrepiQ creates interview questions based on your résumé, job description, firm name, and description using the Gemini 1.5 Flash (the most recent iteration of the Gemini Model). This gives you a major advantage over general interview preparation techniques as you get to practice with questions that are particularly relevant to the positions you are looking for.

2. AI Mock Interview: You may practice for actual interviews using PrepiQ. With the help of our immersive platform, you may rehearse answering questions in a setting that is scheduled just like an interview. This enhances your ability to respond appropriately and helps you become more at ease under pressure.

3. Comprehensive Feedback: One of the standout features of PrepiQ is its detailed feedback mechanism. After each mock interview, your video clip is transcribed to text, and then you receive personalized feedback highlighting your strengths and areas for improvement. Don’t worry, we don’t store your video. This feedback is crucial in helping you refine your answers and boost your confidence.

4. Credit Based Plans: Our plans are cheaper than any other interview tool present on the internet. On signup, you get 5 credits. 1 credit for generating 10 practice questions and 4 credits for creating an interview. No credits are charged for generating answers to the question and also for creating custom jobs. Even if you exhaust your credits, we have 3 paid plans to get you covered. The **Lite *plan offers 10 credits, the *Plus *plan offers 25 credits, and the *Pro **plan covers 50 credits.

Facing interviews with confidence is a game changer in the competitive job market. By providing personalized interview questions, AI mock interviews, and comprehensive feedback, PrepiQ equips you with the skills and confidence you need to ace your interviews.

So, what are you waiting for? Check out PrepiQ now.

Guys, if this blog was useful for you, please give it a clap and share it with your friends who also want to crack interviews. And if you want more articles like this, follow me on Dev. Thanks for reading!

Build a Mobile Search Engine using Next.js in 10 minutes.

Abhirup Kumar Bhowmick — Tue, 26 Dec 2023 07:24:25 +0000

A quick guide to building your own mobile search engine using Next.js

Have you gone through all of NextJS 14’s features? It has evolved significantly and is now better than ever. If you’re having trouble building a website using Next.js 14, you’ve come to the right spot. In this article, I’m going to show you how to use Next.js 14 with Tailwind CSS to create a completely responsive mobile search engine.

Project: https://mobwiki.vercel.app

Github: https://github.com/abhirupkumar/mobwiki

Getting Started with Next.Js 14

The first step will be to create a new project. The new project should be created in a directory, so open a terminal and create or go to that directory. Run the following command in a terminal once you’re there to start the project.

    npx create-next-app@latest mobwiki

Create the project in the following way:

Your project will look like this.

Now as you can see, open the terminal and run

npm run dev

Open your browser and search http://localhost:3000/

Run the follow command in the terminal.

    npm install @emotion/react @emotion/styled @mui/material react-alice-carousel react-icons

Now that the setup part is complete, let’s start building the website.

Let the game begin

First, delete all the contents of global.css and paste this code there.

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

    .prodimg-border{
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }

    .prod-sideimg{
      box-shadow: 0px 0px 2px;
      border-radius: 10px;
    }

    .prod-shadow {
      box-shadow: 0px 0px 2.5px;
      border-radius: 15px;
    }

    .lds-ripple {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ripple div {
      position: absolute;
      border: 4px solid #858585;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    .lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    @keyframes lds-ripple {
      0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
      }
      4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
      }
      5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
      }
      100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
      }
    }

Now create twofolders: utils, and components, just like mentioned in the below image.

And also create an assets folder inside the public folder. This folder will contain some images. And the utils folder will contain the data.json file, which contains all the data about different mobiles.

Download Link: https://github.com/abhirupkumar/mobwiki-starter-utils

Now set serverActions to true in next.config.js

    /** @type {import('next').NextConfig} */
    const nextConfig = {
        experimental: {
            serverActions: true,
        }
    }

    module.exports = nextConfig

Now create an action.js file in the app folder. It will contain all the server functions that we will be using, such as handleSearch and SortDataByTag. The function handleSearch will be used to redirect to the mentioned query, and SortDataByTag will be used to sort the data based on the tag given.

    "use server";

    import { redirect } from "next/navigation";

    export async function handleSearch(formData) {
        const value = formData.get("search");
        redirect(`/search?query=${value}`);
    }

    export async function handleData(dataJson, val, pageNos, order, tag) {
        const search_value = val.toLowerCase().split(" ");
        var newData = [];
        for (let i = 0; i < dataJson.length; i++) {
            let chk = true;
            for (let j = 0; j < search_value.length; j++) {
                if (!dataJson[i].name.toLowerCase().includes(search_value[j])) {
                    chk = false;
                    break;
                }
            }
            if (chk) {
                newData.push(dataJson[i]);
            }
        }

        if (order != null) {
            newData = await SortDataByTag(order, tag, newData);
        }

        let page = 1;
        if (pageNos != null) page = parseInt(pageNos);

        const productsPerPage = 15;
        const startIndex = (page - 1) * productsPerPage;
        const endIndex = startIndex + productsPerPage;
        const totalPages = Math.ceil(newData.length / productsPerPage);

        const data = newData.slice(startIndex, endIndex);

        return { data, page, totalPages }
    }

    export async function SortDataByTag(order, tag, data) {
        if (order === "asc") {
            data.sort((a, b) => {
                if (tag === "price") {
                    let pa = a.price.replace('.', "").replace(',', "").replace(' ', "")
                    let intpa = parseInt(pa);
                    let pb = b.price.replace('.', "").replace(',', "").replace(' ', "")
                    let intpb = parseInt(pb);
                    return intpa - intpb;
                }
                else {
                    let sa = parseFloat(a.stars)
                    let sb = parseFloat(b.stars)
                    return sa - sb;
                }
            })
        }
        else {
            data.sort((a, b) => {
                if (tag === "price") {
                    let pa = a.price.replace('.', "").replace(',', "").replace(' ', "")
                    let intpa = parseInt(pa);
                    let pb = b.price.replace('.', "").replace(',', "").replace(' ', "")
                    let intpb = parseInt(pb);
                    return intpb - intpa;
                }
                else {
                    let sa = parseFloat(a.stars)
                    let sb = parseFloat(b.stars)
                    return sb - sa;
                }
            })
        }

        return data;
    }

Now, create Header.js file in the components folder and paste the following code.

    "use client";
    import Link from "next/link";
    import React, { useState } from "react";

    export default function Header() {
        const [navbarOpen, setNavbarOpen] = useState(false);

        return (
            <div className="fixed top-0 w-full z-30 clearNav bg-opacity-90 transition duration-300 ease-in-out bg-white">
                <div className="flex flex-col max-w-6xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
                    <div className="flex flex-row items-center justify-between p-4">
                        <Link
                            href="/"
                            className="text-lg font-semibold rounded-lg tracking-widest focus:outline-none focus:shadow-outline"
                        >
                            <h1 className="text-4xl Avenir tracking-tighter text-gray-900 md:text-4x1 lg:text-3xl">
                                MOBWiKi
                            </h1>
                        </Link>
                        <button
                            className="text-white cursor-pointer leading-none px-3 py-1 md:hidden outline-none focus:outline-none "
                            type="button"
                            aria-label="button"
                            onClick={() => setNavbarOpen(!navbarOpen)}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="#191919"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="feather feather-menu"
                            >
                                <line x1="3" y1="12" x2="21" y2="12"></line>
                                <line x1="3" y1="6" x2="21" y2="6"></line>
                                <line x1="3" y1="18" x2="21" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                    <div
                        className={
                            "md:flex flex-grow items-center" +
                            (navbarOpen ? " flex" : " hidden")
                        }
                    >
                        <nav className="flex-col flex-grow ">
                            <ul className="flex flex-grow justify-end flex-wrap items-center">
                                <li>
                                    <Link
                                        href="/"
                                        className="font-medium text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out"
                                    >
                                        Mobiles
                                    </Link>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        );
    }

Create the MobileSlider.js file in the components folder. This will be our mobile slider. We will be using Alice Caraousel to build this slider.

    "use client";

    import React, { useEffect, useState } from 'react';
    import AliceCarousel from 'react-alice-carousel';
    import "react-alice-carousel/lib/alice-carousel.css";
    import dataJson from '../utils/data.json';
    import Link from 'next/link';
    import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri'
    import { AiFillStar } from 'react-icons/ai'

    const responsive = {
        2000: {
            items: 5,
        },
        1316: {
            items: 4,
        },
        880: {
            items: 3,
        },
        300: {
            items: 2,
        },
        0: {
            items: 1,
        }
    };

    const MobileSlider = () => {

        const [data, setData] = useState([])
        useEffect(() => {
            setData(dataJson)
        }, [])

        const renderNextButton = ({ isDisabled }) => {
            return <RiArrowRightSLine className="cursor-pointer h-10 w-10 absolute right-0 top-[45%]" />
        };

        const renderPrevButton = ({ isDisabled }) => {
            return <RiArrowLeftSLine className="cursor-pointer h-10 w-10 absolute left-0 top-[45%]" />
        };

        return (
            <div className="flex flex-wrap w-full my-20 flex-col items-center text-center">
                {data.length > 0 ? <AliceCarousel
                    responsive={responsive}
                    mouseTracking
                    infinite
                    controlsStrategy={"default"}
                    autoPlayStrategy='all'
                    autoPlayInterval={1000}
                    disableDotsControls
                    keyboardNavigation
                    style={{
                        width: "100%",
                        justifyContent: "center",
                    }}
                    renderPrevButton={renderPrevButton}
                    renderNextButton={renderNextButton}>
                    {data.length > 0 && data.map((index, item) => {
                        const rawstars = data[item]?.stars
                        const stars = rawstars.substring(0, rawstars.indexOf(" "));
                        return <div key={index} className="lg:w-[310px] md:w[250px] prod-shadow  lg:h-auto cursor-pointer m-2">
                            <Link href={data[item]?.url} rel="noopener noreferrer" target="_blank">
                                <div className="flex justify-center md:h-[380px] h-[200px] relative overflow-hidden">
                                    <img alt="ecommerce" className="m-auto md:m-0 md:h-[380px] h-[200px] prodimg-border block" src={data[item]?.image_src} loading='lazy' />
                                </div>
                                <div className="text-center mx-[10px] md:text-justify flex flex-col lg:h-[195px] h-[162px] justify-evenly">
                                    <h3 className="text-gray-500 mx-auto text-xs tracking-widest title-font">AMAZON</h3>
                                    <h2 className="text-gray-900 mx-auto text-left title-font lg:text-[15px] text-[0.63rem] font-medium">{data[item]?.name}</h2>
                                    <div className="mt-1 flex space-x-8">
                                        <p className="text-left text-black font-semibold md:text-base text-xs">₹ {data[item]?.price}</p>
                                        <div className="flex items-center space-x-2">
                                            <p className="text-black items-center flex font-semibold md:text-base text-xs">{stars} <AiFillStar className="text-yellow-400" /></p>
                                            <div className="text-sm font-medium text-gray-900 md:block hidden underline hover:no-underline dark:text-white">{data[item]?.rating}</div>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </div>
                    })}
                </AliceCarousel>
                    :
                    <div className="lds-ripple">
                        <div></div>
                        <div></div>
                    </div>}
            </div>
        )
    }

    export default MobileSlider

Create the SliderPage.js file in the components folder.

    "use client";

    import React from 'react';
    import AliceCarousel from 'react-alice-carousel';
    import "react-alice-carousel/lib/alice-carousel.css";
    import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';

    const SliderPage = () => {

        const renderNextButton = ({ isDisabled }) => {
            return <RiArrowRightSLine className="cursor-pointer h-12 w-12 absolute right-0 top-[45%]" />
        };

        const renderPrevButton = ({ isDisabled }) => {
            return <RiArrowLeftSLine className="cursor-pointer h-12 w-12 absolute left-0 top-[45%]" />
        };

        return (
            <div className='max-w-[1300px] w-full mx-auto'>
                <AliceCarousel
                    autoPlay={true}
                    playButtonEnabled={true}
                    infinite={true}
                    autoPlayInterval={4000}
                    renderPrevButton={renderPrevButton}
                    renderNextButton={renderNextButton}>
                    <img alt="banner1" src="./assets/img1.jpg" className='rounded-xl' loading="lazy" />
                    <img alt="banner2" src="./assets/img2.jpg" className='rounded-xl' loading="lazy" />
                    <img alt="banner3" src="./assets/img3.jpg" className='rounded-xl' loading="lazy" />
                    <img alt="banner4" src="./assets/img4.jpg" className='rounded-xl' loading="lazy" />
                </AliceCarousel>

            </div>
        )
    }

    export default SliderPage

Create the PagenationPart.js file in the components folder. This is only the pagination part.

    "use client";

    import { Pagination } from '@mui/material'
    import { useRouter } from 'next/navigation';
    import React from 'react'

    const PagenationPart = ({ query, page, totalPages }) => {

        const router = useRouter()

        const handlePageChange = (event, value) => {
            router.push(`/search?query=${query}&page=${value}`)
        }

        return (
            <div className='my-10'>
                <Pagination
                    count={totalPages}
                    page={page}
                    onChange={handlePageChange}
                    variant="outlined" color="primary"
                />
            </div>
        )
    }

    export default PagenationPart

Create the Table.js file in the components folder.

    "use client"

    import Link from 'next/link';
    import { useRouter } from 'next/navigation';
    import React, { useEffect, useState } from 'react'
    import { AiFillStar } from 'react-icons/ai';
    import { RiArrowDownSFill, RiArrowUpSFill } from 'react-icons/ri';

    const Table = ({ query, page, data }) => {

        const router = useRouter();

        const handleSort = (order, tag) => {
            var newlink = `/search?query=${query}`
            if (page != null)
                newlink += `&page=${page}`
            newlink += `&order=${order}&tag=${tag}`
            router.push(newlink);
        }

        return (
            <div className="overflow-x-auto md:px-12 px-2">
                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th scope="col" className="px-6 py-3 w-[10rem]">
                                Image
                            </th>
                            <th scope="col" className="px-6 py-3 w-[22rem]">
                                Product Name
                            </th>
                            <th scope="col" className="px-6 py-3">
                                Site
                            </th>
                            <th scope="col" className="px-6 py-3">
                                <div className="flex justify-center items-center">
                                    Star
                                    <div className='flex flex-col items-center'>
                                        <button className='text-[16px] -mb-[10px]' onClick={() => handleSort("asc", "star")}>
                                            <RiArrowUpSFill value="asc-price" />
                                        </button>
                                        <button className='text-[16px]' onClick={() => handleSort("desc", "star")} >
                                            <RiArrowDownSFill value="desc-price" />
                                        </button>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" className="px-6 py-3">
                                <div className="flex justify-center items-center">
                                    Price
                                    <div className='flex flex-col items-center'>
                                        <button className='text-[16px] -mb-[10px]' onClick={() => handleSort("asc", "price")}>
                                            <RiArrowUpSFill value="asc-price" />
                                        </button>
                                        <button className='text-[16px]' onClick={() => handleSort("desc", "price")} >
                                            <RiArrowDownSFill value="desc-price" />
                                        </button>
                                    </div>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.length > 0 && data.map((index, item) => {
                            const rawstars = data[item]?.stars
                            const stars = rawstars.substring(0, rawstars.indexOf(" "));
                            return <tr key={data[item]?.url} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                <td className="pr-6 py-2">
                                    <a href={data[item]?.url} rel="noopener noreferrer" target="_blank">
                                        <img alt={`image-${index + 1}`} className="" src={data[item]?.image_src} loading='lazy' />
                                    </a>
                                </td>
                                <td className="px-6 py-2 text-black font-semibold">
                                    <a href={data[item]?.url} rel="noopener noreferrer" target="_blank">
                                        {data[item]?.name}
                                    </a>
                                </td>
                                <td className="px-6 py-2 text-black font-semibold">
                                    AMAZON
                                </td>
                                <td className="px-6 py-2">
                                    <div className='flex items-center space-x-1 text-black font-semibold'>
                                        <p className='font-medium'>{stars}</p>
                                        <AiFillStar className="text-yellow-400" />
                                    </div>
                                </td>
                                <td className="px-6 py-2 text-black font-semibold">
                                    ₹ {data[item].price}
                                </td>
                            </tr>
                        })}
                    </tbody>
                </table>
            </div>
        )
    }

    export default Table

Wow! We have built a lot of components. Now let’s get onto assembling them by adding them to the page file in the app directory. Change the code of the page.js file to this.

    import MobileSlider from '@/components/MobileSlider'
    import SliderPage from '@/components/SliderPage'
    import { AiOutlineSearch } from 'react-icons/ai'
    import { handleSearch } from './action';

    export default function Home() {

      return (
        <>
          <form className="flex flex-1 mt-10 justify-end items-center lg:mx-10 mx-2" action={handleSearch}>
            <input className='border-2 border-gray-300 bg-white h-12 px-5 lg:w-[50vw] w-[80vw] pr-16 flex rounded-xl text-sm focus:outline-none' type="search" name="search" placeholder="Search for any mobile..." />
            <button type="submit" className="absolute mx-2 text-xl bg-blue-800 p-2 rounded-xl text-white flex">
              <AiOutlineSearch />
            </button>
          </form>
          <MobileSlider />
          <SliderPage />
        </>
      )
    }

And add this to your layout.js file.

    import MobileSlider from '@/components/MobileSlider'
    import SliderPage from '@/components/SliderPage'
    import { AiOutlineSearch } from 'react-icons/ai'
    import { handleSearch } from './action';

    export default function Home() {

      return (
        <>
          <form className="flex flex-1 mt-10 justify-end items-center lg:mx-10 mx-2" action={handleSearch}>
            <input className='border-2 border-gray-300 bg-white h-12 px-5 lg:w-[50vw] w-[80vw] pr-16 flex rounded-xl text-sm focus:outline-none' type="search" name="search" placeholder="Search for any mobile..." />
            <button type="submit" className="absolute mx-2 text-xl bg-blue-800 p-2 rounded-xl text-white flex">
              <AiOutlineSearch />
            </button>
          </form>
          <MobileSlider />
          <SliderPage />
        </>
      )
    }

Create a search folder in app directory and add loading.js in that folder.

    import React from 'react'

    const loading = () => {
        return (
            <div className="lds-ripple">
                <div></div>
                <div></div>
            </div>
        )
    }

    export default loading

Add page.js to the search file. When the user searches for something, this page is shown, where all the mobile phones as per his search are shown.

    import React from 'react'
    import { AiFillStar, AiOutlineSearch } from 'react-icons/ai';
    import { handleData, handleSearch } from '../action';
    import dataJson from '../../utils/data.json';
    import Table from '@/components/Table';
    import PagenationPart from '@/components/PagenationPart';

    const Search = async ({ searchParams }) => {
        const { data, page, totalPages } = await handleData(dataJson, searchParams.query ?? "", searchParams.page ?? null, searchParams.order ?? null, searchParams.tag ?? null)

        return (
            <div className='flex flex-col w-full justify-center items-center'>
                <form className="flex mt-10 justify-center items-center lg:mx-10 mx-2" action={handleSearch}>
                    <div className="flex justify-end items-center">
                        <input className='border-2 border-gray-300 bg-white h-12 md:w-[30rem] w-[20rem] px-5 flex-1 pr-16 flex rounded-xl text-sm focus:outline-none' type="search" name="search" placeholder="Search for any mobile..." />
                        <button type="submit" className="absolute mx-2 text-xl bg-blue-800 p-2 rounded-xl text-white flex">
                            <AiOutlineSearch />
                        </button>
                    </div>
                </form>
                {data.length > 0 && <PagenationPart query={searchParams.query ?? ""} page={page} totalPages={totalPages} />}
                <Table query={searchParams.query ?? ""} page={page} data={data} />
                {data.length > 0 && <PagenationPart page={page} totalPages={totalPages} />}

            </div>
        )
    }

    export default Search

Congratulations your project is complete now. You can host your website for free on Netlify or Vercel. You may even host it on Hostinger, Digital Ocean, or any other premium service if you desire.

Conclusion

You may, of course, modify the code to make more unique websites. Next includes an extensive list of features that make frontend and backend development simple. I hope you enjoyed my blog and learned something new.

Guys, if you enjoyed this, please give it a clap and share it with your friends who also want to learn and implement Next.js. And if you want more articles like this, follow me on dev.to . If you missed anything or want to check out the full code here. Thanks for reading!

Typescript vs Javascript

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:48:04 +0000

Why choose typescript over javascript?

Are you a web developer or a web enthusiast who is using React.js, Vue.js, or Next.js for building web apps? If yes, then you should definitely check out TypeScript. In this blog, I will mostly talk about the difference between typescript and javascript and why you should prefer .ts (.tsx) over .js (.jsx).

Javascript

JavaScript is a versatile, high-level programming language primarily used for web development. It empowers browsers to dynamically update content, enhance user interactions, and create responsive interfaces. Its event-driven paradigm and ability to manipulate Document Object Model (DOM) elements make it a crucial tool for building interactive and engaging websites.

You can guarantee that JavaScript is used whenever a web page does anything more than just sit there and show you static data. Examples of such features include interactive maps, dynamic 2D and 3D visuals, scrolling video jukeboxes, and timely content updates. It is the third layer in the stack of common web technologies, the first two of which are HTML and CSS.

In the ever-evolving landscape of web development, the choice between TypeScript and JavaScript is a crucial decision that can significantly impact the quality and maintainability of your code. While both languages serve as the backbone of modern web applications, TypeScript emerges as a powerful contender, offering a plethora of advantages that go beyond the capabilities of its predecessor, JavaScript.

Typescript

TypeScript is a superset of JavaScript, introducing static typing to enhance code reliability and maintainability. Developed by Microsoft, it compiles to plain JavaScript and supports the latest ECMAScript features. TypeScript introduces interfaces, classes, and other object-oriented programming concepts, enabling developers to define and enforce clear data structures. Its static typing helps catch potential errors during development, leading to more robust applications. With a strong tooling ecosystem and wide industry adoption, TypeScript facilitates scalable and maintainable codebases, making it an excellent choice for large-scale web and server-side development projects, where type safety and code organization are crucial considerations.

Several Big Tech Companies like Google, Microsoft, Meta, Netflix, Airbnb have add Typescript to their tech stacks. TypeScript is used in all major applications which we usually use in our daily life such as Gmail, Google Search, Youtube, Visual Studio Code ( for developers), Office 365, Facebook, Instagram, etc.

Advantages of using TypeScript over JavaScript

Static Typing

Static Typing requires developers to explicitly specify variable types. Take the variable “num” in TypeScript, for instance. The code won’t execute without assigning a type, like Integer, Float, List, or another. TypeScript enforces static typing, offering benefits like early bug detection and quicker code completion.

// JavaScript (No Static Typing)

let str = "Hello, World!";

console.log(str);

// Attempting to assign a different type later is allowed

str = 42;

console.log(str); // This would execute without error in JS

// TypeScript (Static Typing)

let str: string = "Hello, World!";

console.log(str);

// Attempting to assign a different type results in a compile-time error

// Uncommenting the line below would result in a TypeScript compilation error

// str = 42;

// console.log(str);

Interchangeable

TypeScript is an extension of JavaScript, allowing seamless integration of JavaScript code and libraries. All legitimate TypeScript code is equivalent to valid JavaScript code. A JavaScript file saved in TypeScript with a.ts extension runs without any problems. TypeScript and JavaScript are essentially equivalent, thus you can progressively integrate TypeScript into an existing JavaScript codebase. All that’s required to convert a JavaScript file to TypeScript is to add types to each module. Although every line of JavaScript is also TypeScript, it’s important to remember that TypeScript has extra features for better development, such as static typing.

Typecasting

The reason to use TypeScript over JavaScript is that it also allows TypeCasting. It indicates the problem while writing, making it simple and quick to answer the inquiry. It also becomes simple to transform a variable from one type to another with TypeCasting. You may instantly modify a variable’s type with TypeCasting to suit your needs. For type castings, the <> operator or the “as” keyword work well. Additionally, it provides you with tips when you run into trouble creating code, making it simpler. The compilation error is shown by TypeScript during development.

// TypeScript example demonstrating Type Casting

// Example 1: Using "as" keyword

let stringValue: any = "42";

let numberValue1: number = stringValue as number;

console.log(Using "as" keyword: ${numberValue1});

// Example 2: Using < > operator

let anotherStringValue: any = "77";

let numberValue2: number = <number>anotherStringValue;

console.log(Using &lt; &gt; operator: ${numberValue2});

Interface Support

Unlike JavaScript, TypeScript allows types to be defined using interfaces. An interface specifies the methods and attributes that an object must have, but it does not actually implement them. This language construct is very useful when working with other developers.

The example shows how to use TypeScript’s capabilities to implement standard Object Oriented Progarmming patterns —

// Define an interface for a BankAccount

interface BankAccount {

  accountNumber: string;

  balance: number;

  deposit(amount: number): void;

  withdraw(amount: number): void;

}

// Implement a class for SavingsAccount that implements BankAccount

class SavingsAccount implements BankAccount {

  constructor(public accountNumber: string, public balance: number) {}

deposit(amount: number): void {

    this.balance += amount;

    console.log(Deposited ${amount}. New balance: ${this.balance});

  }

withdraw(amount: number): void {

    if (amount <= this.balance) {

      this.balance -= amount;

      console.log(Withdrawn ${amount}. New balance: ${this.balance});

    } else {

      console.log("Insufficient funds!");

    }

  }

}

// Implement a class for CurrentAccount that implements BankAccount

class CurrentAccount implements BankAccount {

  constructor(public accountNumber: string, public balance: number) {}

deposit(amount: number): void {

    this.balance += amount;

    console.log(Deposited ${amount}. New balance: ${this.balance});

  }

withdraw(amount: number): void {

    // Current accounts allow overdraft up to a certain limit

    const overdraftLimit = 1000;

    if (amount <= this.balance + overdraftLimit) {

      this.balance -= amount;

      console.log(Withdrawn ${amount}. New balance: ${this.balance});

    } else {

      console.log("Exceeds overdraft limit!");

    }

  }

}

// Example usage

const savingsAccount = new SavingsAccount("SA123", 1000);

savingsAccount.deposit(500);

savingsAccount.withdraw(200);

const currentAccount = new CurrentAccount("CA456", 2000);

currentAccount.deposit(1000);

currentAccount.withdraw(2500);

Conclusion

In conclusion, TypeScript stands out as a powerful superset of JavaScript, offering static typing and other features that enhance the development experience. Its capacity to detect errors early, improve code maintainability, and support modern ECMAScript features makes it a valuable tool for developers. The seamless interoperability with existing JavaScript codebases facilitates a smooth transition and adoption process. However, the choice between TypeScript and JavaScript ultimately depends on the specific needs and preferences of the development team and the company’s goals. The decision to embrace TypeScript or stick with JavaScript reflects the flexibility within the development landscape, allowing companies to choose the approach that best aligns with their project requirements and development philosophies.

Guys, if you enjoyed this, please give it a clap and share it with your friends who are about to begin learning web or android development. And if you want more articles like this, follow me on Medium.

Building Netflix Clone with NextJs 13.4: Part 2

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:23:35 +0000

Github Link: https://github.com/abhirupkumar/Netflix-Clone

Project Link: https://netflix-akb.vercel.app

Create a hooks folder in the root directory. The hooks folder will have two files, useAuth.tsx and useList.tsx. useAuth.tsx is for checking whether the user is authenticated and subscribed or not.

  import {
        createUserWithEmailAndPassword,
        onAuthStateChanged,
        signInWithEmailAndPassword,
        signOut,
        User,
      } from 'firebase/auth';
      import { useRouter } from 'next/navigation';
      import { createContext, useContext, useEffect, useMemo, useState } from 'react';
      import { auth, db } from '../firebase';
    import { doc, getDoc } from 'firebase/firestore';

    interface Props{
      id: string;
      name: string;
      amount: number;
      expiry: Date;
    }

      interface IAuth {
        user: User | null
        signUp: (email: string, password: string) => Promise<void>
        signIn: (email: string, password: string) => Promise<void>
        logout: () => Promise<void>
        planDetails: Props | null
        error: string | null
        loading: boolean
      }

      const AuthContext = createContext<IAuth>({
        user: null,
        signUp: async () => {},
        signIn: async () => {},
        logout: async () => {},
        planDetails: null,
        error: null,
        loading: false,
      })

      interface AuthProviderProps {
        children: React.ReactNode
      }

      export const AuthProvider = ({ children }: AuthProviderProps) => {
        const [loading, setLoading] = useState(false)
        const [user, setUser] = useState<User | null>(null)
        const [error, setError] = useState(null)
        const [planDetails, setPlanDetails] = useState<Props | null>(null)
        const [initialLoading, setInitialLoading] = useState(true)
        const router = useRouter()

        // Persisting the user
        useEffect(
          () =>
            onAuthStateChanged(auth, (user) => {
              if (user) {
                // Logged in...
                setUser(user)
                fetchSubs(user);
                setLoading(false)
              } else {
                // Not logged in...
                setUser(null)
                setLoading(false)
                router.push('/login')
              }

              setInitialLoading(false)
            }),
          [auth])

          useEffect(() => {
            if(error!=null){
              setLoading(false)
              setError(null);
            }
          }, [error])

        const fetchSubs = async (userD: User) : Promise<void> => {
          const isSub = await isSubscribed(userD);
        }

        const signUp = async (email: string, password: string) => {
          setLoading(true)

          await createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
              setUser(userCredential.user)
              router.push('/')
              setLoading(false)
            })
            .catch((err) => {
              alert(err.message)
              setError(err.message)
            })
            .finally(() => {
              setLoading(false)})
        }

        const signIn = async (email: string, password: string) => {
          setLoading(true)

          await signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
              setUser(userCredential.user)
              router.push('/')
              setLoading(false)
            })
            .catch((err) => {
              alert(err.message)
              setError(err.message)
            })
            .finally(() => {
              setLoading(false)})
        }

        const isSubscribed = async (user: User | null) : Promise<boolean | null> => {
          if(user == null) return null;
          const userRef =  doc(db, "subscriptions", user.uid);
          const docSnap = await getDoc(userRef);
          if(!docSnap.exists()) return false;
          else{
            const data = docSnap.data();
            const newdate = new Date().toISOString()
            const expiryDate = data.subscriptionExpiryDate
            if(newdate > expiryDate){
              return false;
            }
            else{
              setPlanDetails({id: data.subscriptionPlanId, name: data.subscriptionPlan, amount: data.subscriptionAmount, expiry: expiryDate})
              return true;
            }
          }
        }

        const logout = async () => {
          setLoading(true)

          signOut(auth)
            .then(() => {
              setUser(null)
            })
            .catch((err) => {
              alert(err.message)
              setError(err.message)
            })
            .finally(() => {
              setLoading(false)})
        }

        const memoedValue = useMemo(
          () => ({
            user,
            signUp,
            signIn,
            logout,
            planDetails,
            loading,
            error,
          }),
          [user, loading]
        )

        return (
          <AuthContext.Provider value={memoedValue}>
            {!initialLoading && children}
          </AuthContext.Provider>
        )
      }

      export default function useAuth() {
        return useContext(AuthContext)
      }

In useList.tsx, we add all the favourite movies to the user’s list.

    import { collection, DocumentData, onSnapshot } from 'firebase/firestore'
    import { useEffect, useState } from 'react'
    import { db } from '../firebase'
    import { Movie } from '../typings'

    function useList(uid: string | undefined) {
      const [list, setList] = useState<Movie[] | DocumentData[]>([])

      useEffect(() => {
        if (!uid) return

        return onSnapshot(
          collection(db, 'customers', uid, 'myList'),
          (snapshot) => {
            setList(
              snapshot.docs.map((doc) => ({
                id: doc.id,
                ...doc.data(),
              }))
            )
          }
        )
      }, [db, uid])

      return list
    }

    export default useList

Now change the App.tsx page as we need to AuthContext for authentication.

    "use client";

    import { AuthProvider } from '@/hooks/useAuth';
    import React from 'react'
    import { RecoilRoot } from 'recoil'

    const App = ({
        children,
      }: {
        children: React.ReactNode
      }) => {
      return (
        <html lang="en">
          <body>
            <RecoilRoot>
            <AuthProvider>
              {children}
              </AuthProvider>
            </RecoilRoot>
          </body>
        </html>
      )
    }

    export default App

Lets create all the Apis required in this project. So, create a api folder in app folder. Within the api folder create create-razorpay-order folder and within it create route.ts file.

    import { NextRequest, NextResponse } from 'next/server';
    import razorpay from 'razorpay';

    export async function POST(req: NextRequest) {
        try {
            const { amount } = await req.json();
            const razorpayInstance = new razorpay({
              key_id: <string>process.env.RAZORPAY_KEY,
              key_secret: <string>process.env.RAZORPAY_SECRET,
            });

            const payment_capture = 1;
            const options = {
              amount: (amount * 100).toString(), // Amount in paise or smallest currency unit
              currency: 'INR',
              receipt: 'order_receipt',
              payment_capture,
            };

            const order = await razorpayInstance.orders.create(options);
            return NextResponse.json({ id: order.id });
        } catch (error) {
            return NextResponse.json({ error: 'Failed to create Razorpay order' });
        }
    };

Agin within the api folder create create-razorpay-subscription folder and within it create route.ts file.

    import { NextRequest, NextResponse } from 'next/server';
    import razorpay from 'razorpay';

    export async function POST(req: NextRequest) {
        try {
          const { orderId, planType, planId, email, userId, amount } = await req.json();
            const razorpayInstance = new razorpay({
              key_id: <string>process.env.RAZORPAY_KEY,
              key_secret: <string>process.env.RAZORPAY_SECRET,
            });

            razorpayInstance.subscriptions.create({
              plan_id: planId,
              total_count: 1,
              quantity: 1,
              customer_notify: 1,
              addons: [
                {
                  item: {
                    name: userId,
                    amount: amount*100,
                    currency: "INR"
                  }
                }
              ],
              notes: {
                planType,
                orderId,
              },
              notify_info: {
                notify_email: email,
              }
            })

            return NextResponse.json({ success: true });
        } catch (error) {
            return NextResponse.json({ success: false, error: 'Payment verification failed' });
        }
    };

Create a folder components in root directory. Create Banner.tsx file in components folder.

    "use client";

    import { modalState, movieState } from '@/atoms/modalAtom';
    import { baseUrl } from '@/constants/movie';
    import { Movie } from '@/typings'
    import Image from 'next/image'
    import React, { useEffect, useState } from 'react'
    import { FaPlay } from 'react-icons/fa'
    import { HiOutlineInformationCircle } from 'react-icons/hi'
    import { useRecoilState } from 'recoil';

    interface Props {
      netflixOriginals: Movie[]
    }

    const Banner = ({ netflixOriginals } : Props) => {
      const [movie, setMovie] = useState<Movie | null>(null)
      const [showModal, setShowModal] = useRecoilState(modalState)
      const [currentMovie, setCurrentMovie] = useRecoilState(movieState)

      const truncate = (str: string) => {
        return str.length > 250 ? str.substring(0, 250) + "..." : str;
      }

      useEffect(() => {
        setMovie(
          netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
        );
      }, [netflixOriginals])

      return (
        <div className="flex flex-col space-y-2 pt-16 md:space-y-4 lg:h-[65vh] lg:justify-end">
          <div className="absolute top-0 left-0 -z-10 h-[95vh] w-screen">
            {(movie?.backdrop_path || movie?.poster_path) && <Image
              src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`}
              fill={true}
              object-fit="cover"
              alt="banner-image"
              priority={true}
            />}
          </div>

          <h1 className="text-2xl font-bold md:text-4xl lg:text-6xl">
            {movie?.title || movie?.name || movie?.original_name}
          </h1>
          <p className="max-w-xs text-xs text-shadow-md md:max-w-lg md:text-lg lg:max-w-xl lg:text-lg">
            {movie?.overview && truncate(movie?.overview)}
          </p>

          <div className="flex space-x-3">
            <button className="bannerButton bg-white text-black" onClick={() => {
                setCurrentMovie(movie)
                setShowModal(true)
              }}>
              <FaPlay className="h-4 w-4 text-black md:h-7 md:w-7" onClick={() => {
                setCurrentMovie(movie)
                setShowModal(true)
              }} /> Play
            </button>
            <button
              className="bannerButton bg-[gray]/70"
              onClick={() => {
                setCurrentMovie(movie)
                setShowModal(true)
              }}
            >
              More Info <HiOutlineInformationCircle className="h-5 w-5 md:h-8 md:w-8" />
            </button>
          </div>
        </div>
      )
    }

    export default Banner

Create BasicMenu.tsx file in components folder.

    "use client";

    import Button from '@mui/material/Button'
    import Menu from '@mui/material/Menu'
    import MenuItem from '@mui/material/MenuItem'
    import { useState } from 'react'

    export default function BasicMenu() {
      const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
      const open = Boolean(anchorEl)

      const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget)
      }

      const handleClose = () => {
        setAnchorEl(null)
      }

      return (
        <div className="md:!hidden">
          <Button
            id="basic-button"
            aria-controls={open ? 'basic-menu' : undefined}
            aria-haspopup="true"
            aria-expanded={open ? 'true' : undefined}
            onClick={handleClick}
            className="!capitalize !text-white"
          >
            Browse
          </Button>
          <Menu
            id="basic-menu"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            className="menu"
            MenuListProps={{
              'aria-labelledby': 'basic-button',
            }}
          >
            <MenuItem onClick={handleClose}>Home</MenuItem>
            <MenuItem onClick={handleClose}>TV Shows</MenuItem>
            <MenuItem onClick={handleClose}>Movies</MenuItem>
            <MenuItem onClick={handleClose}>New & Popular</MenuItem>
            <MenuItem onClick={handleClose}>My List</MenuItem>
          </Menu>
        </div>
      )
    }

Now lets create Header.tsx file in components folder.

    "use client";

    import Link from 'next/link'
    import { useEffect, useState } from 'react'
    import useAuth from '@/hooks/useAuth'
    import { BiBell, BiSearch } from 'react-icons/bi'
    import BasicMenu from './BasicMenu';

    function Header() {
      const [isScrolled, setIsScrolled] = useState(false)
      const { logout } = useAuth()

      useEffect(() => {
        const handleScroll = () => {
          if (window.scrollY > 0) {
            setIsScrolled(true)
          } else {
            setIsScrolled(false)
          }
        }

        window.addEventListener('scroll', handleScroll)

        return () => {
          window.removeEventListener('scroll', handleScroll)
        }
      }, [])

      return (
        <header className={`${isScrolled && 'bg-[#141414]'}`}>
          <div className="flex items-center space-x-2 md:space-x-10">
            <img
              src="https://rb.gy/ulxxee"
              width={100}
              height={100}
              className="cursor-pointer object-contain"
            />

            <BasicMenu />

            <ul className="hidden space-x-4 md:flex">
              <li className="headerLink">Home</li>
              <li className="headerLink">TV Shows</li>
              <li className="headerLink">Movies</li>
              <li className="headerLink">New & Popular</li>
              <li className="headerLink">My List</li>
            </ul>
          </div>

          <div className="flex items-center space-x-4 text-sm font-light">
            <BiSearch className="hidden h-6 w-6 sm:inline" />
            <p className="hidden lg:inline">Kids</p>
            <BiBell className="h-6 w-6" />
            <Link href="/account">
              <img
                src="https://rb.gy/g1pwyx"
                alt="image"
                className="cursor-pointer rounded"
              />
            </Link>
          </div>
        </header>
      )
    }

    export default Header

Create Loader.tsx file in components folder.

    function Loader() {
        return (
          <div className="lds-ripple">
            <div></div>
            <div></div>
          </div>
        )
    }

    export default Loader;

Create Membership.tsx file in components folder.

    "use client";

    import React, { useState } from 'react'
    import useAuth from '../hooks/useAuth'
    import Loader from './Loader'
    import { useRouter } from 'next/navigation';
    import { deleteDoc, doc } from 'firebase/firestore';
    import { db } from '@/firebase';

    function Membership () {
        const { user } = useAuth();
        const [loading, setLoading] = useState<boolean>(false)
        const router = useRouter()

        const handleClick = async () : Promise<void> => {
            setLoading(true);
            if(user == null){
                setLoading(false);
                return;
            }
            const docRef = doc(db, "subscriptions", user.uid);
            await deleteDoc(docRef);
            router.push('/');
        }

        return (
            <div className="mt-6 grid grid-cols-1 gap-x-4 border px-4 md:grid-cols-4 md:border-x-0 md:border-t md:border-b-0 md:px-0">
                <div className="space-y-2 py-4">
                    <h4 className="text-lg text-[gray]">Membership & Billing</h4>
                    <button
                      disabled={loading}
                    className="h-10 w-3/5 whitespace-nowrap bg-gray-300 py-2 text-sm font-medium text-black shadow-md hover:bg-gray-200 md:w-4/5"
                      onClick={handleClick}
                    >
                    {loading ? (
                        <Loader />
                    ) : (
                        'Cancel Membership'
                    )}
                    </button>
                </div>

                <div className="col-span-3">
                    <div className="flex flex-col justify-between border-b border-white/10 py-4 md:flex-row">
                    <div>
                        <p className="font-medium">{user?.email}</p>
                    </div>
                    <div className="md:text-right">
                        <p className="membershipLink">Change email</p>
                        <p className="membershipLink">Change password</p>
                    </div>
                    </div>

                    <div className="flex flex-col justify-between pt-4 pb-4 md:flex-row md:pb-0">
                        <div className="flex flex-1 flex-col md:text-right">
                            <p className="membershipLink">Manage payment info</p>
                            <p className="membershipLink">Add backup payment method</p>
                            <p className="membershipLink">Billing Details</p>
                            <p className="membershipLink">Change billing day</p>
                        </div>
                    </div>
                </div>
          </div>
        );
    }

    export default Membership;

Create Model.tsx file in components folder.

    "use client";

      import MuiModal from '@mui/material/Modal'
      import {
        collection,
        deleteDoc,
        doc,
        DocumentData,
        onSnapshot,
        setDoc,
      } from 'firebase/firestore'
      import { useEffect, useState } from 'react'
      import toast, { Toaster } from 'react-hot-toast'
      import { FaPlay } from 'react-icons/fa'
      import ReactPlayer from 'react-player/lazy'
      import { useRecoilState } from 'recoil'
      import { modalState, movieState } from '../atoms/modalAtom'
      import { db } from '../firebase'
      import useAuth from '../hooks/useAuth'
      import { Element, Genre, Movie } from '../typings'
    import { AiOutlineCheck, AiOutlinePlus } from 'react-icons/ai';
    import { BsHandThumbsUp } from 'react-icons/bs';
    import { HiOutlineVolumeOff, HiOutlineVolumeUp } from 'react-icons/hi';
    import { RxCross1 } from 'react-icons/rx';

      function Modal() {
        const [showModal, setShowModal] = useRecoilState(modalState)
        const [movie, setMovie] = useRecoilState(movieState)
        const [trailer, setTrailer] = useState('')
        const [genres, setGenres] = useState<Genre[]>([])
        const [muted, setMuted] = useState(true)
        const { user } = useAuth()
        const [addedToList, setAddedToList] = useState(false)
        const [movies, setMovies] = useState<DocumentData[] | Movie[]>([])

        const toastStyle = {
          background: 'white',
          color: 'black',
          fontWeight: 'bold',
          fontSize: '16px',
          padding: '15px',
          borderRadius: '9999px',
          maxWidth: '1000px',
        }

        useEffect(() => {
          if (!movie) return

          async function fetchMovie() {
            const data = await fetch(
              `https://api.themoviedb.org/3/${
                movie?.media_type === 'tv' ? 'tv' : 'movie'
              }/${movie?.id}?api_key=${
                process.env.NEXT_PUBLIC_API_KEY
              }&language=en-IN&append_to_response=videos`
            )
              .then((response) => response.json())
              .catch((err) => console.log(err.message))

            if (data?.videos) {
              const index = data.videos.results.findIndex(
                (element: Element) => element.type === 'Trailer'
              )
              setTrailer(data.videos?.results[index]?.key)
            }
            if (data?.genres) {
              setGenres(data.genres)
            }
          }

          fetchMovie()
        }, [movie])

        // Find all the movies in the user's list
        useEffect(() => {
          if (user) {
            return onSnapshot(
              collection(db, 'customers', user.uid, 'myList'),
              (snapshot) => setMovies(snapshot.docs)
            )
          }
        }, [db, movie?.id])

        // Check if the movie is already in the user's list
        useEffect(
          () =>
            setAddedToList(
              movies.findIndex((result) => result.data().id === movie?.id) !== -1
            ),
          [movies]
        )

        const handleList = async () => {
          if (addedToList) {
            await deleteDoc(
              doc(db, 'customers', user!.uid, 'myList', movie?.id.toString()!)
            )

            toast(
              `${movie?.title || movie?.original_name} has been removed from My List`,
              {
                duration: 8000,
                style: toastStyle,
              }
            )
          } else {
            await setDoc(
              doc(db, 'customers', user!.uid, 'myList', movie?.id.toString()!),
              { ...movie }
            )

            toast(
              `${movie?.title || movie?.original_name} has been added to My List`,
              {
                duration: 8000,
                style: toastStyle,
              }
            )
          }
        }

        const handleClose = () => {
          setShowModal(false)
        }

        console.log(trailer)

        return (
          <MuiModal
            open={showModal}
            onClose={handleClose}
            className="fixex !top-7 left-0 right-0 z-50 mx-auto w-full max-w-5xl overflow-hidden overflow-y-scroll rounded-md scrollbar-hide"
          >
            <>
              <Toaster position="bottom-center" />
              <button
                onClick={handleClose}
                className="modalButton absolute right-5 top-5 !z-40 h-9 w-9 border-none bg-[#181818] hover:bg-[#181818]"
              >
                <RxCross1 className="h-6 w-6" />
              </button>

              <div className="relative pt-[56.25%]">
                <ReactPlayer
                  url={`https://www.youtube.com/watch?v=${trailer}`}
                  width="100%"
                  height="100%"
                  style={{ position: 'absolute', top: '0', left: '0' }}
                  playing
                  muted={muted}
                />
                <div className="absolute bottom-10 flex w-full items-center justify-between px-10">
                  <div className="flex space-x-2">
                    <button className="flex items-center gap-x-2 rounded bg-white px-8 text-xl font-bold text-black transition hover:bg-[#e6e6e6]">
                      <FaPlay className="h-7 w-7 text-black" />
                      Play
                    </button>

                    <button className="modalButton" onClick={handleList}>
                      {addedToList ? (
                        <AiOutlineCheck className="h-7 w-7" />
                      ) : (
                        <AiOutlinePlus className="h-7 w-7" />
                      )}
                    </button>

                    <button className="modalButton">
                      <BsHandThumbsUp className="h-7 w-7" />
                    </button>
                  </div>
                  <button className="modalButton" onClick={() => setMuted(!muted)}>
                    {muted ? (
                      <HiOutlineVolumeOff className="h-6 w-6" />
                    ) : (
                      <HiOutlineVolumeUp className="h-6 w-6" />
                    )}
                  </button>
                </div>
              </div>

              <div className="flex space-x-16 rounded-b-md bg-[#181818] px-10 py-8">
                <div className="space-y-6 text-lg">
                  <div className="flex items-center space-x-2 text-sm">
                    <p className="font-semibold text-green-400">
                      {movie!.vote_average * 10}% Match
                    </p>
                    <p className="font-light">
                      {movie?.release_date || movie?.first_air_date}
                    </p>
                    <div className="flex h-4 items-center justify-center rounded border border-white/40 px-1.5 text-xs">
                      HD
                    </div>
                  </div>

                  <div className="flex flex-col gap-x-10 gap-y-4 font-light md:flex-row">
                    <p className="w-5/6">{movie?.overview}</p>
                    <div className="flex flex-col space-y-3 text-sm">
                      <div>
                        <span className="text-[gray]">Genres: </span>
                        {genres.map((genre) => genre.name).join(', ')}
                      </div>

                      <div>
                        <span className="text-[gray]">Original language: </span>
                        {movie?.original_language}
                      </div>

                      <div>
                        <span className="text-[gray]">Total votes: </span>
                        {movie?.vote_count}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </>
          </MuiModal>
        )
      }

      export default Modal

Create Page.tsx file in components folder. This will be our home page whcih will contain all the movies data.

    "use client";

    import React, { useEffect, useState } from 'react'
    import Header from './Header'
    import Banner from './Banner'
    import Row from './Row'
    import { Movie } from '@/typings'
    import useAuth from '@/hooks/useAuth'
    import { useRecoilValue } from 'recoil';
    import { modalState, movieState } from '@/atoms/modalAtom';
    import Modal from './Modal';
    import Plans from './Plan';
    import Loader from './Loader';
    import useList from '@/hooks/useList';
    import { doc, getDoc } from 'firebase/firestore';
    import { db } from '@/firebase';
    import { User } from 'firebase/auth';

    interface Props {
        netflixOriginals: Movie[]
        trendingNow: Movie[]
        topRated: Movie[]
        actionMovies: Movie[]
        comedyMovies: Movie[]
        horrorMovies: Movie[]
        romanceMovies: Movie[]
        documentaries: Movie[]
      }

    const Page = ({netflixOriginals,
        actionMovies,
        comedyMovies,
        documentaries,
        horrorMovies,
        romanceMovies,
        topRated,
        trendingNow,
    } : Props) => {

        const { loading, user } = useAuth();
        const [subscription, setSubscription] = useState<boolean | null>(null)
        const showModal = useRecoilValue(modalState);
        const movie = useRecoilValue(movieState);
        const list = useList(user?.uid)
        useEffect(() => {
          if(user != null)
            fetchSubscription()
        }, [user])

        const fetchSubscription = async () : Promise<void> => {
          const isSub = await isSubscribed(user);
          setSubscription(isSub)

          console.log(subscription)
        }

        const isSubscribed = async (user: User | null) : Promise<boolean | null> => {
          if(user == null) return null;
          const userRef =  doc(db, "subscriptions", user.uid);
          const docSnap = await getDoc(userRef);
          if(!docSnap.exists()) return false;
          else{
            const data = docSnap.data();
            const newdate = new Date().toISOString()
            const expiryDate = data.subscriptionExpiryDate
            if(newdate > expiryDate){
              return false
            }
            else{
              return true;
            }
          }
        }

        if(user == null) return <Loader />;
        if (loading || subscription === null) return <Loader />;

        if (!subscription) return <Plans />;
        console.log("subscription: ", subscription)

      return (
        <div className={`relative h-screen bg-gradient-to-b lg:h-[140vh] ${
            showModal && '!h-screen overflow-hidden'
          }`}>
             <Header />
             <main className="relative pl-4 pb-24 lg:space-y-24 lg:pl-16">
              <Banner netflixOriginals={netflixOriginals} />
              <section className="md:space-y-24">
              <Row title="Trending Now" movies={trendingNow} />
              <Row title="Top Rated" movies={topRated} />
              <Row title="Action Thrillers" movies={actionMovies} />
              {list.length > 0 && <Row title="My List" movies={list} />}
              <Row title="Comedies" movies={comedyMovies} />
              <Row title="Scary Movies" movies={horrorMovies} />
              <Row title="Romance Movies" movies={romanceMovies} />
              <Row title="Documentaries" movies={documentaries} />
              </section>
             </main>
             {showModal && <Modal />}
          </div>
      )
    }

    export default Page

Now create PaymentForm.tsx in components folder. This folder is very important for for payment and subcription.

    'use client';

    import React, { useEffect, useState } from 'react';
    import { Plan } from '@/typings';
    import { User } from 'firebase/auth';
    import { addDoc, collection, doc, getDoc, getDocs, query, setDoc, updateDoc } from 'firebase/firestore';
    import { db } from '@/firebase';
    import Razorpay from 'razorpay';
    import Loader from './Loader';
    import { useRouter } from 'next/navigation';
    import useAuth from '@/hooks/useAuth';

    declare global {
        interface Window {
          Razorpay: any;
        }
      }

    interface Props {
      selectedPlan: Plan;
      previousPlan: Plan | null;
      user: User | null,
      handleClose: () => void;
    }

    const initializeRazorpay = async (): Promise<any> => {
        return new Promise((resolve) => {
          const script = document.createElement("script");
          script.src = "https://checkout.razorpay.com/v1/checkout.js";

          script.onload = () => {
            resolve(true);
          };
          script.onerror = () => {
            resolve(false);
          };

          document.body.appendChild(script);
        });
      }

    const PaymentForm: React.FC<Props> = ({ selectedPlan, previousPlan, user, handleClose }) => {
      const [paymentCompleted, setPaymentCompleted] = useState(false);
      const [amount, setAmount] = useState(selectedPlan.amount);
      const [loading, setLoading] = useState(false);
      const router = useRouter()

      useEffect(() => {
        if(previousPlan != null) setAmount(selectedPlan.amount - previousPlan.amount);
      }, [])

      const handlePayment = async (e: any): Promise<void> => {
        setLoading(true)
        e.preventDefault();
        const currentUser = user;
        if(currentUser == null) return;
        const orderResponse = await createRazorpayOrder(amount);
        const orderId = orderResponse;

          try {
            const res = await initializeRazorpay();
            if (!res) {
                alert("Your are offline.... Razorpay SDK Failed to load");
                return;
              }

              const options = {
                key: process.env.RAZORPAY_KEY,
                amount: amount, // Amount in paise or smallest currency unit
                currency: 'INR',
                name: 'Netflix',
                description: 'Subscription Payment',
                order_id: orderId,
                image: "@/app/favicon.ico",
                handler: async function (response: any) {
                  // Verify the payment with Razorpay API
                    // Payment successful, update user's subscription status in Firestore
                  const expiryDate = calculateExpiryDate();

                  await updateSubscriptionStatus(currentUser.uid, selectedPlan, orderId, expiryDate)
                  setPaymentCompleted(true);
                  location.reload();
                },
                prefill: {
                  email: currentUser.email,
                },
                notes: {
                  planName: selectedPlan.name,
                  planId: selectedPlan.id,
                  userId: currentUser.uid,
                },
                theme: {
                  color: '#F37254',
                },
              }

            const razorpay = new window.Razorpay(options);
            razorpay.open();
          }
        catch (error) {
            // Handle errors during payment process
            console.log('Payment error:', error);
            handleClose(); // Close the payment form
          }
          setLoading(false);
      };

      const createRazorpayOrder = async (amount: number): Promise<any> => {
        const response = await fetch('/api/create-razorpay-order', {
            method: 'POST',
            body: JSON.stringify({ amount }),
            headers: {
              'Content-Type': 'application/json',
            },
          });
          const data = await response.json();
          return data.id;
      };

      const calculateExpiryDate = (): string => {
        const currentDate = new Date();
        const expiryDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
        return expiryDate.toISOString();
      };

      const updateSubscriptionStatus = async (
        userId: string,
        plan: Plan,
        subscriptionId: string,
        expiryDate: string
      ): Promise<void> => {
        try {
        //   const userRef = doc(db, 'subscriptions', userId);
          const userRef =  doc(db, "subscriptions", userId);
          const docSnap = await getDoc(userRef);
          //find userId in firestore and if present then update doc otherwise addDoc


          if(docSnap.exists()){
            await updateDoc(doc(db, 'subscriptions', userId), {
                subscriptionPlan: plan.name,
                subscriptionPlanId: plan.id,
                subscriptionAmount: plan.amount,
                subscriptionExpiryDate: expiryDate,
                subscriptionId,
              });
          }
          else{
            await setDoc(userRef, {
                subscriptionPlan: plan.name,
                subscriptionPlanId: plan.id,
                subscriptionAmount: plan.amount,
                subscriptionExpiryDate: expiryDate,
                subscriptionId,
              })
          }
          console.log('Subscription status updated successfully');
          // Add any further logic or redirection after successful subscription update
        } catch (error) {
          // Handle errors during subscription status update
          console.log('Subscription status update error:', error);
        }
      };

      return (
        <div className="bg-gray-900 text-white p-8 rounded-lg shadow-lg pt-28">
          {paymentCompleted ? (
            <div>
              <h2 className="text-3xl mb-4">Payment Completed!</h2>
              <p className="text-xl">Thank you for your subscription.</p>
              <p className="text-xl">Just wait your would be redirected to home.</p>
            </div>
          ) : (
            <div>
              <h2 className="text-3xl mb-4">Payment Form</h2>
              <p className="text-xl mb-4">Selected Plan: {selectedPlan.name}</p>
              <p className="text-xl mb-4">Video Quality: {selectedPlan.videoQuality}</p>
              <p className="text-xl mb-4">Resolution: {selectedPlan.resolution}</p>
              <p className="text-xl mb-4">Description: {selectedPlan.description}</p>
              <p className="text-xl mb-4">Price: INR {selectedPlan.amount}.00</p>
              <p className="text-xl mb-4">Amount Payable: INR {amount}.00</p>
              {!loading ? <>
                <button
                className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg mr-4"
                onClick={handlePayment}
              >
                Proceed to Pay
              </button>
              <button
                className="bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg"
                onClick={handleClose}
              >
                Cancel
              </button>
              </> : <Loader />}
            </div>
          )}
          </div>
      );
    };

    export default PaymentForm;

Create Plan.tsx file in components folder.

    "use client";

    import Link from 'next/link'
    import { useEffect, useState } from 'react'
    import useAuth from '../hooks/useAuth'
    import Loader from './Loader'
    import { AiOutlineCheck } from 'react-icons/ai'
    import Table from './Table';
    import { Plan } from '@/typings';
    import PaymentForm from './PaymentForm';
    import { doc, getDoc } from 'firebase/firestore';
    import { db } from '@/firebase';
    import plans from '@/utils/data'

    function Plans() {
      const { logout, user, planDetails } = useAuth()
      const [selectedPlan, setSelectedPlan] = useState<Plan>(plans[2])
      const [isBillingLoading, setBillingLoading] = useState(false)
      const [showPaymentForm, setShowPaymentForm] = useState(false);
      const [previousPlan, setPreviousPlan] = useState<Plan | null>(null)
      const [loading, setLoading] = useState<boolean>(false)

      useEffect(() => {
        setLoading(true)
        fetchSubscribes()
        setLoading(false)
      }, [planDetails])

      const fetchSubscribes = async (): Promise<void> => {
        if (!user) return;
        const userRef =  doc(db, "subscriptions", user.uid);
        const docSnap = await getDoc(userRef);
        if(docSnap.exists()){
          if(!docSnap.data().subscriptionPlanId) return;
            for(let i=0; i<plans.length; i++){
              if(plans[i].id == docSnap.data().subscriptionPlanId){
                setPreviousPlan(plans[i])
                setSelectedPlan(plans[i])
                break;
              }
            }
        }
      }

      const subscribeToPlan = async () => {
        if (!user) return

        setBillingLoading(true)
        setShowPaymentForm(true);
        setBillingLoading(false)
      }

      const handlePaymentFormClose = () => {
        setShowPaymentForm(false);
      };

      if(loading) return <Loader />

      return (
        <div>
          <header className="border-b border-white/10 bg-[#141414]">
            <Link href="/">
              <img
                src="https://rb.gy/ulxxee"
                alt="Netflix"
                width={150}
                height={90}
                className="cursor-pointer object-contain"
              />
            </Link>
            <button
              className="text-lg font-medium hover:underline"
              onClick={logout}
            >
              Sign Out
            </button>
          </header>
          {!showPaymentForm ?
          <main className="mx-auto max-w-5xl px-5 pt-28 pb-12 transition-all md:px-10">
            <h1 className="mb-3 text-3xl font-medium">
              Choose the plan that's right for you
            </h1>
            <ul>
              <li className="flex items-center gap-x-2 text-lg">
                <AiOutlineCheck className="h-7 w-7 text-[#E50914]" /> Watch all you want.
                Ad-free.
              </li>
              <li className="flex items-center gap-x-2 text-lg">
                <AiOutlineCheck className="h-7 w-7 text-[#E50914]" /> Recommendations
                just for you.
              </li>
              <li className="flex items-center gap-x-2 text-lg">
                <AiOutlineCheck className="h-7 w-7 text-[#E50914]" /> Upgrade or cancel
                your plan anytime.
              </li>
            </ul>

            <div className="mt-4 flex flex-col space-y-5">
              <div className="flex w-full items-center justify-center self-end md:w-3/5">
                {plans.map((item) => (
                    <button
                    key={item.id}
                    className={`planBox cursor-pointer ${
                        selectedPlan?.id === item.id ? 'opacity-100' : 'opacity-60'
                      }`}
                      onClick={() => setSelectedPlan(item)}
                  >
                    {item.name}
                    </button>
                ))}
              </div>

              <Table plans={plans} selectedPlan={selectedPlan}  />

              {(previousPlan ==null || previousPlan.amount < selectedPlan.amount) && <button
                disabled={!selectedPlan || isBillingLoading}
                className={`mx-auto w-11/12 rounded bg-[#E50914] py-4 text-xl shadow hover:bg-[#f6121d] md:w-[420px] ${
                  isBillingLoading && 'opacity-60'
                }`}
                onClick={subscribeToPlan}
              >
                {isBillingLoading ? (
                  <Loader />
                ) : (
                  'Subscribe'
                )}
              </button>}
            </div>
          </main>
          :
            <PaymentForm selectedPlan={selectedPlan} previousPlan={previousPlan} user={user} handleClose={handlePaymentFormClose} />
          }
        </div>
      )
    }

    export default Plans

Create Row.tsx in components folder.

    "use client";

    import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai';
    import { DocumentData } from 'firebase/firestore'
    import { useRef, useState } from 'react'
    import { Movie } from '../typings'
    import Thumbnail from './Thumbnail'

    interface Props {
      title: string
      movies: Movie[] | DocumentData[]
    }

    function Row({ title, movies }: Props) {
      const rowRef = useRef<HTMLDivElement>(null)
      const [isMoved, setIsMoved] = useState(false)

      const handleClick = (direction: string) => {
        setIsMoved(true)

        if (rowRef.current) {
          const { scrollLeft, clientWidth } = rowRef.current;

          const scrollTo = direction === 'left' ? scrollLeft - clientWidth : scrollLeft + clientWidth;

          rowRef.current.scrollTo({ left: scrollTo, behavior: 'smooth' });
        }
      }

      return (
        <div className="h-40 space-y-0.5 md:space-y-2">
          <h2 className="w-56 cursor-pointer text-sm font-semibold text-[#e5e5e5] transition duration-200 hover:text-white md:text-2xl">
            {title}
          </h2>
          <div className="group relative md:-ml-2">
            <AiOutlineLeft
              className={`absolute top-0 bottom-0 left-2 z-40 m-auto h-9 w-9 cursor-pointer opacity-0 transition hover:scale-125 group-hover:opacity-100 ${
                !isMoved && 'hidden'
              }`}
              onClick={() => handleClick('left')}
            />

            <div
              ref={rowRef}
              className="flex items-center space-x-0.5 overflow-x-scroll no-scrollbar md:space-x-2.5 md:p-2"
            >
              {movies.map((movie) => (
                <Thumbnail key={movie.id} movie={movie} />
              ))}
            </div>

            <AiOutlineRight
              className={`absolute top-0 bottom-0 right-2 z-40 m-auto h-9 w-9 cursor-pointer opacity-0 transition hover:scale-125 group-hover:opacity-100`}
              onClick={() => handleClick('right')}
            />
          </div>
        </div>
      )
    }

    export default Row

Create Table.tsx in components folder.

    import { Plan } from '@/typings'
    import { AiOutlineCheck } from 'react-icons/ai'

    interface Props {
        plans: Plan[]
        selectedPlan: Plan | null
    }

    function Table({ plans, selectedPlan }: Props) {
      return (
        <table>
          <tbody className="divide-y divide-[gray]">
            <tr className="tableRow">
              <td className="tableDataTitle">Monthly price</td>

              {plans.map((item) => (
                <td
                  key={item.id}
                  className={`tableDataFeature ${
                    selectedPlan?.id === item.id
                      ? 'text-[#e50914]'
                      : 'text-[gray]'
                  }`}
                >
                  INR {item.amount}
                </td>
              ))}
            </tr>

            <tr className="tableRow">
              <td className="tableDataTitle">Video quality</td>

              {plans.map((item) => (
                <td
                  key={item.id}
                  className={`tableDataFeature ${
                    selectedPlan?.id === item.id
                      ? 'text-[#e50914]'
                      : 'text-[gray]'
                  }`}
                >
                  {item.videoQuality}
                </td>
              ))}
            </tr>

            <tr className="tableRow">
              <td className="tableDataTitle">Resolution</td>
              {plans.map((item) => (
                <td
                  key={item.id}
                  className={`tableDataFeature ${
                    selectedPlan?.id === item.id
                      ? 'text-[#e50914]'
                      : 'text-[gray]'
                  }`}
                >
                  {item.resolution}
                </td>
              ))}
            </tr>

            <tr className="tableRow">
              <td className="tableDataTitle">
                Availability
              </td>
              {plans.map((item) => (
                <td
                  key={item.id}
                  className={`tableDataFeature ${
                    selectedPlan?.id === item.id
                      ? 'text-[#e50914]'
                      : 'text-[gray]'
                  }`}
                >
                  {item.description}
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      )
    }

    export default Table

Create Thumbnail.tsx file in components folder.

    "use client";

    import React from 'react';
    import { Movie } from '../typings';
    import Image from 'next/image';
    import { DocumentData } from 'firebase/firestore';
    import { useRecoilState } from 'recoil';
    import { modalState, movieState } from '@/atoms/modalAtom';

    interface Props {
        movie: Movie | DocumentData
      }

    const Thumbnail = ({ movie }: Props) => {

      const [showModal, setShowModal] = useRecoilState(modalState)
      const [currentMovie, setCurrentMovie] = useRecoilState(movieState)

      return (
        <div
          className="relative h-28 min-w-[180px] cursor-pointer transition duration-200 ease-out md:h-36 md:min-w-[260px] md:hover:scale-105"
          onClick={() => {
            setCurrentMovie(movie)
            setShowModal(true)
          }}
        >
          <Image
            src={`https://image.tmdb.org/t/p/w500${
              movie.backdrop_path || movie.poster_path
            }`}
            className="rounded-sm object-cover md:rounded"
            fill={true}
            alt={`thumbnail-${movie.id}`}
          />
        </div>
      )
    }

    export default Thumbnail

Now, lets code the page.tsx file. In page.tsx we will just fetch the movies data and sent it to the Page component.

    import { fetchAllData } from '@/actions/actions'
    import { Movie } from '../typings'
    import Page from '@/components/Page';

    interface Props {
      netflixOriginals: Movie[]
      trendingNow: Movie[]
      topRated: Movie[]
      actionMovies: Movie[]
      comedyMovies: Movie[]
      horrorMovies: Movie[]
      romanceMovies: Movie[]
      documentaries: Movie[]
    }

    export default async function Home() {
      const {netflixOriginals,
        actionMovies,
        comedyMovies,
        documentaries,
        horrorMovies,
        romanceMovies,
        topRated,
        trendingNow} : Props = await fetchAllData();

        return (
          <Page {...{netflixOriginals,
            actionMovies,
            comedyMovies,
            documentaries,
            horrorMovies,
            romanceMovies,
            topRated,
            trendingNow,}} />
        );

    }

Now, lets create the login page. Create a login folder in app directory. Within the folder create layout.tsx, loading.tsx and *page.tsx *files. Below are the code for all the files.

    // page.tsx
    import { fetchAllData } from '@/actions/actions'
    import { Movie } from '../typings'
    import Page from '@/components/Page';

    interface Props {
      netflixOriginals: Movie[]
      trendingNow: Movie[]
      topRated: Movie[]
      actionMovies: Movie[]
      comedyMovies: Movie[]
      horrorMovies: Movie[]
      romanceMovies: Movie[]
      documentaries: Movie[]
    }

    export default async function Home() {
      const {netflixOriginals,
        actionMovies,
        comedyMovies,
        documentaries,
        horrorMovies,
        romanceMovies,
        topRated,
        trendingNow} : Props = await fetchAllData();

        return (
          <Page {...{netflixOriginals,
            actionMovies,
            comedyMovies,
            documentaries,
            horrorMovies,
            romanceMovies,
            topRated,
            trendingNow,}} />
        );

    }

    // layout.tsx
    import type { Metadata } from 'next'

    export const metadata: Metadata = {
      title: 'NETFLIX - Login',
      description: 'Watch your favorite movies and TV shows on Netflix.',
    }

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode
    }) {
      return (
          <section className="flex flex-col items-center">
              {children}
          </section>
      )
    }

    // loading.tsx
    import Loader from '@/components/Loader'
    import React from 'react'

    const loading = () => {
      return (
        <div className='pt-36'>
        <Loader />
        </div>
      )
    }

    export default loading

Finally create a account folder in app directory. Within the folder create layout.tsx, loading.tsx and *page.tsx *files. Below are the code for all the files.

    // layout.tsx
    import type { Metadata } from 'next'

    export const metadata: Metadata = {
      title: 'Account Settings - Netflix',
      description: 'Watch your favorite movies and TV shows on Netflix.',
    }

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode
    }) {
      return (
          <section className="flex flex-col items-center">
              {children}
          </section>
      )
    }

    // loading.tsx
    import Loader from '@/components/Loader'
    import React from 'react'

    const loading = () => {
      return (
        <div className='pt-36'>
        <Loader />
        </div>
      )
    }

    export default loading

    // page.tsx
    "use client";

    import React, { useEffect, useState } from 'react';
    import Link from 'next/link';
    import useAuth from '@/hooks/useAuth';
    import Membership from '@/components/Membership';
    import { useRouter } from 'next/navigation';
    import Loader from '@/components/Loader';
    import Plans from '@/components/Plan';
    import { doc, getDoc } from 'firebase/firestore';
    import { db } from '@/firebase';
    import { User } from 'firebase/auth';

    interface Props{
      id: string;
      name: string;
      amount: number;
      expiry: Date;
    }

    const Page = () => {
        const { user, logout } = useAuth()
        const [showPlan, setShowPlan] = useState<boolean>(false)
        const [plan, setPlan] = useState<Props | null>(null)

        const router = useRouter()
        const [loading, setLoading] = useState<boolean>(false);

        useEffect(() => {
          isSubscribed(user);
        }, [])

          const isSubscribed = async (user: User | null) : Promise<void> => {
            setLoading(true);
            if(user == null){
              setLoading(false);
              return;
            }
            const userRef =  doc(db, "subscriptions", user.uid);
            const docSnap = await getDoc(userRef);
            if(!docSnap.exists()) return;
            else{
              const data = docSnap.data();
              const newdate = new Date().toISOString()
              const expiryDate = data.subscriptionExpiryDate
              if(newdate > expiryDate){
                setPlan(null)
              }
              else{
                setPlan({id: data.subscriptionPlanId, name: data.subscriptionPlan, amount: data.subscriptionAmount, expiry: expiryDate})
              }
            }
            setLoading(false);
          }

        if(showPlan) return <div className='pt-32 space-y-2'>
          <button onClick={() => setShowPlan(false)} className='cursor-pointer hover:underline -mb-28 font-bold text-xl'>Cancel</button>
            <Plans />
          </div>

        if(loading) return <div className="flex pt-32 items-center"><Loader /></div>

      return (
        <div>
          <header className={`bg-[#141414]`}>
            <Link href="/">
              <img
                src="https://rb.gy/ulxxee"
                width={120}
                height={120}
                className="cursor-pointer object-contain"
                alt="image"
              />
            </Link>
            <Link href="/account">
              <img
                src="https://rb.gy/g1pwyx"
                alt="new-image"
                className="cursor-pointer rounded"
              />
            </Link>
          </header>

          <main className="mx-auto max-w-6xl px-5 pt-24 pb-12 transition-all md:px-10">
            <div className="flex flex-col gap-x-4 md:flex-row md:items-center">
              <h1 className="text-3xl md:text-4xl">Account</h1>
              <div className="-ml-0.5 flex items-center gap-x-1.5">
                <img src="https://rb.gy/4vfk4r" alt="" className="h-7 w-7" />
                <p className="text-xs font-semibold text-[#555]">
                  {plan!=null ? `Membership will expire on ${(new Date(plan.expiry)).toDateString()}` : 'Membership Expired!'}
                </p>
              </div>
            </div>

            {plan!=null && <Membership />}

            <div className="mt-6 grid grid-cols-1 gap-x-4 border px-4 py-4 md:grid-cols-4 md:border-x-0 md:border-t md:border-b-0 md:px-0 md:pb-0 items-center">
              {plan!=null && <h4 className="text-lg text-[gray]">Plan Name:</h4>}
              {/* Find the current plan */}
              {plan!=null && <div className="col-span-2 font-medium">
                {plan.name}
              </div>}
              <button onClick={() => setShowPlan(true)} className="cursor-pointer flex flex-1 text-blue-500 hover:underline md:text-right">
                Change plan
              </button>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-x-4 border px-4 py-4 md:grid-cols-4 md:border-x-0 md:border-t md:border-b-0 md:px-0">
              <h4 className="text-lg text-[gray]">Settings</h4>
              <p
                className="col-span-3 cursor-pointer text-blue-500 hover:underline"
                onClick={logout}
              >
                Sign out
              </p>
            </div>
          </main>
        </div>
      )
    }

    export default Page

One thing I missed in my last article was that the tailwind.config.js file needed to be changed.

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
      ],
      theme: {
        extend: {
          backgroundImage: {
            'gradient-to-b':
              'linear-gradient(to bottom,rgba(20,20,20,0) 0,rgba(20,20,20,.15) 15%,rgba(20,20,20,.35) 29%,rgba(20,20,20,.58) 44%,#141414 68%,#141414 100%);',
          },
        },
      },
      plugins: [],
    }

Conclusion

You may now host your website using free services like vercel or commercial ones like Hostinger, Digitalocean, and more. The subscription is completely working, and you can get subscriptions using razorpay test cards.

Guys, if you enjoyed this, please give it a clap and share it with your friends who also want to learn and implement Next.js 13. And if you want more articles like this, follow me on dev.to . If you missed anything or want to check out the full code here. Here is the part 1 of the blog.Thanks for reading!

Building Netflix Clone with NextJs 13.4: Part 1

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:19:57 +0000

NextJs 13, React, Tailwind CSS, Firebase, Razorpay.

OTT platforms are the latest craze right now! With 238.39 million paid subscribers in 2023, Netflix is a fairly well-known OTT platform. This is the part 1 of the blog, where I’ll demonstrate how I created a Netflix clone using NextJs 13.4.

Github Link: https://github.com/abhirupkumar/Netflix-Clone

Project Link: https://netflix-akb.vercel.app

Prerequisites

Knowledge of Html, Css, Js ,React and Nextjs.

Getting started

Open your terminal and paste the below command to create the project.

npx create-next-app@latest

Follow these steps for installation:

What is your project named? netflix-clone
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No

After successfully creating the project, open the project in VScode and open it’s terminal. To install all the libraries needed for developing this project, start by typing the following command.

npx install @emotion/react @emotion/styled @mui/material firebase razorpay react-hook-form react-hot-toast react-
icons react-player recoil

Now go to https://www.themoviedb.org/ **and Login/Sign Up. We will be using the TMDB API to get all the movies. Then go to **https://www.themoviedb.org/settings/api and get your API key. Create a .env.local file and paste your API key their.

NEXT_PUBLIC_API_KEY=**********************

Now open a merchant account in Razorpay, get the merchant key and secret from your dashboard, and paste them in the .env.local.

RAZORPAY_KEY=****************
RAZORPAY_SECRET=****************

Before diving in Typescript code, write the following in global.css file.

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

/* :root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
} */

@media (prefers-color-scheme: dark) {
  /* :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  } */
}

body {
  overflow-x: hidden;
  /* color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); */
}

::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #222222;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #363636;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@layer base {
  body {
    @apply bg-[#141414] text-white;
  }

  header {
    @apply fixed top-0 z-50 flex w-full items-center justify-between px-4 py-4 transition-all lg:px-10 lg:py-6;
  }
}

/* custom classNames */
@layer components {
  .headerLink {
    @apply cursor-pointer text-sm font-semibold text-white transition duration-[.4s] hover:text-[#d6d6d6];
  }

  .bannerButton {
    @apply flex items-center gap-x-2 rounded px-5 py-1.5 text-sm font-semibold transition hover:opacity-75 md:py-2.5 md:px-8 md:text-xl;
  }

  .input {
    @apply w-full rounded bg-[#333] px-5 py-3.5 placeholder-[gray] outline-none focus:bg-[#454545];
  }

  .modalButton {
    @apply flex h-11 w-11 items-center justify-center rounded-full border-2 border-[gray] bg-[#2a2a2a]/60 transition hover:border-white hover:bg-white/10;
  }

  .planBox {
    @apply relative mx-1.5 flex h-20 w-[calc(100%/4)] cursor-default items-center justify-center rounded-sm bg-[#e50914] font-semibold shadow after:absolute after:top-full after:left-1/2 after:block after:-translate-x-1/2 after:border-8 after:border-b-0 after:border-transparent after:border-t-[#e50914] after:content-[""] md:h-32 lg:mx-8;
  }

  /* Table */
  .tableRow {
    @apply flex flex-wrap items-center font-medium;
  }

  .tableDataTitle {
    @apply w-full p-2.5 text-center text-sm font-normal text-white md:w-[40%] md:p-3.5 md:text-left md:text-base;
  }

  .tableDataFeature {
    @apply w-[calc(100%/4)] p-2.5 text-center md:w-[calc(60%/4)] md:p-3.5;
  }

  .membershipLink {
    @apply cursor-pointer text-blue-500 hover:underline;
  }

  /* MUI Menu */
  .menu {
    @apply md:hidden;
  }

  .menu .MuiPaper-root {
    @apply !absolute !left-0 !rounded-none !border !border-[gray] !bg-black !text-white;
  }

  .menu .MuiList-root {
    @apply !p-0;
  }

  .menu .MuiMenuItem-root {
    @apply !block !w-72 !py-3.5 !text-center !text-sm !font-light !text-[#b3b3b3] !transition !duration-200 first:cursor-default first:!font-normal first:!text-white hover:!bg-[#11100F];
  }
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #ffffff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

Now create an action folder outside of the app directory. The folder will contain an actions.ts file. In action.ts, we will fetch all the movie data from the TMDB APIT.

"use server";

import requests from "@/utils/requests";

export const fetchAllData = async () => {
  const [
    netflixOriginals,
    trendingNow,
    topRated,
    actionMovies,
    comedyMovies,
    horrorMovies,
    romanceMovies,
    documentaries,
  ] = await Promise.all([
    fetch(requests.fetchNetflixOriginals).then((res) => res.json()),
    fetch(requests.fetchTrending).then((res) => res.json()),
    fetch(requests.fetchTopRated).then((res) => res.json()),
    fetch(requests.fetchActionMovies).then((res) => res.json()),
    fetch(requests.fetchComedyMovies).then((res) => res.json()),
    fetch(requests.fetchHorrorMovies).then((res) => res.json()),
    fetch(requests.fetchRomanceMovies).then((res) => res.json()),
    fetch(requests.fetchDocumentaries).then((res) => res.json()),
  ]);

  return {
    netflixOriginals: netflixOriginals.results,
    trendingNow: trendingNow.results,
    topRated: topRated.results,
    actionMovies: actionMovies.results,
    comedyMovies: comedyMovies.results,
    horrorMovies: horrorMovies.results,
    romanceMovies: romanceMovies.results,
    documentaries: documentaries.results,
  };
};

Before going any further, Login to Firebase and create a project. Give any project a name, and after creating the project, click on the web app, give the app a nickname, and click on Register the app. The following type of code will appear. Copy the code from their and click on done.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "**************************************",
  authDomain: "*******************.firebaseapp.com",
  projectId: "*******************",
  storageBucket: "*******************.appspot.com",
  messagingSenderId: "*************",
  appId: "*:*************:web:*****************"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Create a firebase.ts file outside of the app folder and paste the copied code. Again, go back to Firebase, click on Authentication, and turn on ‘Email/Password’ Authentication. Click on Firestore Database and create a database in production mode. Now we are all set to proceed with our hooks.

Create a constants folder outside of the app directory and create an app.tsx file and a movie.ts file in that folder.

// movie.ts

export const baseUrl = 'https://image.tmdb.org/t/p/original/';

//App.tsx

"use client";

import React from 'react'
import { RecoilRoot } from 'recoil'

const App = ({
    children,
  }: {
    children: React.ReactNode
  }) => {
  return (
    <html lang="en">
      <body>
        <RecoilRoot>
          {children}
        </RecoilRoot>
      </body>
    </html>
  )
}

export default App;

In the app folder, change the code for layout.tsx to the following:

import './globals.css'
import type { Metadata } from 'next'
import App from '@/constants/App';

export const metadata: Metadata = {
  title: 'NETFLIX',
  description: 'Watch your favorite movies and TV shows on Netflix.',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <App children={children} />
  )
}

Outside of app firectory create typings.d.ts file.

// typings.d.ts

export interface Genre {
    id: number
    name: string
  }

  export interface Plan {
    id: string
    name: string
    amount: number
    description: string
    videoQuality: string
    resolution: string
  }

  export interface Movie {
    title: string
    backdrop_path: string
    media_type?: string
    release_date?: string
    first_air_date: string
    genre_ids: number[]
    id: number
    name: string
    origin_country: string[]
    original_language: string
    original_name: string
    overview: string
    popularity: number
    poster_path: string
    vote_average: number
    vote_count: number
  }

  export interface Element {
    type:
      | 'Bloopers'
      | 'Featurette'
      | 'Behind the Scenes'
      | 'Clip'
      | 'Trailer'
      | 'Teaser'
  }

Now create an atoms folder outside of the app directory. The atoms folder will contain only one file, modalAtom.ts, which contains the following:

import { DocumentData } from 'firebase/firestore'
import { atom } from 'recoil'
import { Movie } from '../typings'

export const modalState = atom({
  key: 'modalState',
  default: false,
})

export const movieState = atom<Movie | DocumentData | null>({
  key: 'movieState',
  default: null,
})

Create a utils folder outside of the app folder. In the utils folder, create data.ts and requests.ts files. The first file data.ts will contain our custom plan data. Feel free to change any items in the plan. And requests.ts file will contain all the API endpoints that we will be using in our application.

// data.ts

const plan = [
    {
        id: "netflix-plan-1-mobile",
        name: "Mobile",
        amount: 149,
        description: "Watch on your mobile phone and tablet",
        videoQuality: "Average",
        resolution: "480p"
    },
    {
        id: "netflix-plan-2-basic",
        name: "Basic",
        amount: 199,
        description: "Watch on your TV, computer, mobile phone and tablet",
        videoQuality: "Good",
        resolution: "720p"
    },
    {
        id: "netflix-plan-3-standard",
        name: "Standard",
        amount: 499,
        description: "Watch on your TV, computer, mobile phone and tablet",
        videoQuality: "Great",
        resolution: "720p"
    },
    {
        id: "netflix-plan-4-premium",
        name: "Premium",
        amount: 649,
        description: "Watch on your TV, computer, mobile phone and tablet",
        videoQuality: "Best",
        resolution: "720p"
    },
]

export default plan

// requests.ts

const API_KEY = process.env.NEXT_PUBLIC_API_KEY
const BASE_URL = 'https://api.themoviedb.org/3'

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

export default requests

Hence, we have set up all the utility files for our projects. In the next part, we will continue with the frontend and backend of our website.

Guys, if you enjoyed this, please give it a clap and share it with your friends who also want to learn and implement Next.js 13. If you missed anything or want to check out the full code here. And if you want more articles like this, follow me on dev.to. Link for Part 2.
Guys, I have some good news for those who are preparing for interviews. Checkout PrepiQ (https://prepiq.vercel.app/), your comprehensive interview prep guide.
Thanks for reading!

Important Subjects For Placement Preparation

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:16:42 +0000

Important Subjects For Placement

If you also aspire to be a good Software Engineer, you should learn all these subjects. In this blog, I will discuss all of the subjects necessary to land off-campus interviews. I hope you like it.

DSA or Development alone will not earn you a position in Product Based Company.Yes, Yes, DSA is necessary, but it will not get you a job as you must also understand OOPs concepts, DBMS, Computer Networks, Operating Systems, and, most importantly, System Design.

Important Subjects

Data Structures And Algorithms (DSA)

DSA is a must to crack any SDE role. It helps you solve real-world problems. For example, sets are of great use to store distinct elements in sorted order. For sorting any data, there are several algorithms available. Depending on the type of data, a sorting algorithm is chosen. There are several factors that make an algorithm efficient, such as Time complexity and Space complexity. So, it is very important to learn and understand when and how to implement an algorithm based on the given problem statements.

Object Oriented Programming (OOP)

OOPs play an important role in deciding how a code should be structured and in any interview. C++ and Java are popular languages that support object-oriented programming. Concepts like Class, Object, Inheritance, Encapsulation, Polymorphism, Data Abstraction, etc. are very important.

Operating System

An operating system can be accurately defined as a program that manages the hardware and software applications on a computer. When you switch on the target device, the operating system is activated. It comprises all of the processes that help us gain access to the technology and control it. And hence, it is very important to learn.

Database Management System

Databases are used in almost every application to store data. There are several databases available now, and different databases have different benefits. A few such databases are MongoDB, SQL databases, Firebase Firestore, Firebase Realtime Database, etc. In interviews, SQL queries and good knowledge of databases are very important.

Computer Networks

Well, not all companies ask networking-based questions. Companies like Cisco, Juniper Networks, etc. mostly ask questions about Computer Networks. To get jobs like network engineer, network consultant, and cloud engineer, computer networks is essential to learn and understand.

System Design

It is a very important subject asked by most product based companies. System design is the process of defining the components, architecture, and data for a system to meet specific requirements, such as scalability, performance, and availability.

Conclusion

If you want to succeed in interviews for product-based companies, you must know these subjects. Nowadays, many people like working for product-based companies since they provide exciting perks and salary packages. However, this does not imply that working for startups, service-based companies, or other organisations is not cool. Every job has benefits and drawbacks. These subjects are needed if you want to land a job at a product-based company.

Guys, if you enjoyed this, please give it a clap and share it with your friends who also aspire to become software engineers just like you. And if you want more articles like this, follow me on Medium.

Projects I’ve made that you can try.

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:13:11 +0000

Web & Android App Development Projects

If you are a computer science engineering student or a web and Android development enthusiast, this post is for you. In this blog, I will share most of the projects that I have completed to date. I hope you enjoy it.

Web Projects

Soldier Game

This is a simple game in which there is a soldier in the field and you must move left, right, up or down to save him from the bombs and gather as many first aid kits as possible. As time passes, the bombs become more frequent, and the difficulty level rises. This game was my very first project after learning Kaboom Js. You can built similar project like this just to kickstart your journey in web development.
Soldier Game

Pixelwear

This is an ecommerce store that primarily sells four categories of products: T-shirts, Hoodies, Jeans, and Trousers. This site was built with Next Js, Tailwind CSS, and a MongoDb database. It had several current ecommerce functions such as add to cart and checkout. Users may actually pay for what they purchase. Razorpay is used as payment integration. This website’s dashboard was designed with Material UI.
Pixelwear - Wear The Trend

Portfolio Website

A portfolio website is essential for every web developer since it displays his skills, prior projects, and experience in this field. My portfolio website was built with React Js and Sanity as a Content Management System. Sanity has several advantages, including the ability to store dynamic data.
Abhirup

Linkedin Clone

This is just a basic implementation of Linkedin. It was created using Next.js, Tailwind CSS, Material icons, MongoDB as a database, and Firebase for Google Authentication. Users must first log in so that they can publish articles and images. Users may also provide thumbs up to other people’s posts.
LinkedIn - Log In or Sign Up

Crypto Tracker

This website is built using React, Material UI, ChartJS, and Coingeko Api. You can get all the information you need regarding your favourite crypto currencies. This website gives a live update on the top 100 cryptocurrencies.
Crypto Tracker

Projects Built using React Native

Deliveroo Clone

This was my very first app, developed using Expo, React Native, Tailwind CSS, React Redux and Sanity as a Content Management System. This app includes a list of restaurants and their food offerings. Users may add items of their choice and order food in no time. To use this app, you must have the Expo app installed (only for Android devices) and scan the QR code. Here is the link to the app.

Signal Clone

This is a Group Chatting Application in which users can share messages with one another and even form groups for added amusement. This app was made using Expo, React-Native, React, TailwindCSS, and Firebase Firestore as a database. To use this app, you must have the Expo app installed (only for Android devices) and scan the QR code. Here is the link to the app.

Instagram Clone

This is one of the best projects I’ve worked on so far. This app was created using Expo, React Native, and Firebase v9. The user interface is similar to Instagram’s dark mode. Users must first Login or Signup. They may then view their feed and write posts. They may also Like and Comment on other people’s posts. A profile feature is also provided, where individuals may update their name and profile photo. To use this app, you must have the Expo app installed (only for Android devices) and scan the QR code. Here is the link to the app.

Instant

This is the best project I have built so far. This is a WhatsApp-like chatting app that allows users to chat with each other in real time. Users can create groups and add or remove other users. In addition to creating groups, starring messages, copying text, and replying to messages, this app also allows you to send images. This app was made using Expo, React Native, React Redux, Firebase, and the Realtime Database. This is my favourite project, and you guys must see this one. To use this app, you must have the Expo app installed (only for Android devices) and scan the QR code. Here is the link to the app.

Conclusion

These are most of the projects that I have built so far. While learning Web and Android Development, I continued to apply these skills and build new projects to strengthen my resume. If you are just beginning your development journey, let me assure you that it will be fascinating.

My Experience with Solving DSA Problems on Leetcode.

Abhirup Kumar Bhowmick — Tue, 19 Dec 2023 04:04:01 +0000

Mastering the Art of Problem Solving on Leetcode

Hello everybody, my name is Abhirup Kumar Bhowmick. This is my first blog. I recently finished my second year of college and am currently in my pre-final year, so I thought I’d share some of my past experiences. I’ll be sharing how I started solving questions on Leetcode.

How it all started?

Let’s start with my first semester in college. I was already familiar with Java programming, having studied it from Class 9 to Class 12. Variables, loops, if statements, single and multi-dimensional arrays, stacks, and queues were all familiar to me. But I was curious as what questions were asked in job interviews. So I went to YouTube and searched for “Roadmap for a Second Year Student for Placemnet.” I learned that DSA (Data Structures And Algorithms) is a critical subject that is questioned in the technical interviews and that C++ and Java are the most frequent languages used by product-based companies. After knowing that C++ is faster than Java increased my curiosity in learning it. But now I know that good problem-solving skills are a necessity regardless of whether you choose C++ or Java.

I therefore began learning C++ on YouTube. And because my foundation was strong, I found it simple to master the fundamentals of C++. But after studying C++, I didn’t begin to practise DSA questions until almost the end of my second year. Up until almost the end of my second year, I continued to learn web and Android development. I’ve made several fantastic projects with it, which I’ll share later. I began really pursuing DSA around the middle of March 2023. I started to solve the DSA sheet seriously that had 450+ problems from Leetcode. I set a goal for myself to solve 5 problems every day. I tried to be consistent at all times. I would solve five questions some days, but other days I would only solve two or three. But each day I would have solved at least one Leetcode question.

First, I went over all of the fundamental concepts, including as arrays, loops, basic recursion, sorting and searching. Sorting problems seemed too easy to me at first, but as I proceeded to increasingly harder topics, I understood this was only the beginning. So, Leetcode contains three categories of problems: easy, medium, and hard. Most simple problems can be solved swiftly, while medium and hard problems are difficult to solve.

I used to understand a concept first, then solve problems based on it. For instance, I would first understand the fundamentals of stacks and queues before attempting to tackle problems using them. I wasn’t always able tosolve every problem at once. Most of the time, I would just try to understand the situation and correctly apply the data structure. But it wasn’t always successful. I would spent maximum 15 to 20 minutes on a problem then I would see the solution provided on Leetcode. I could code independently if I were able to understand the approach. If not, I will watch a video solution to the problem to help me understand it better before continuing to code on my own. Once every one to two weeks, I used to review the concepts that were challenging or that I couldn’t seem to understand at once. I felt demotivated when I couldn’t figure out a problem on my own, but I refused to give up.

I have covered a wide range of DSA topics in this manner, including arrays, strings, sorting, searching, recursion, backtracking, stacks and queues, linked lists, trees, graphs and dynamic programming. I haven’t touched Tries yet. I’m currently revising the concepts I covered earlier. After finishing my revision in the upcoming three to four weeks, I intend to start learning graph data structure.

Conclusion

I have already solved 450+ questions on Leetcode. If you look at my Leetcode profile, you can see that I maintained consistency in the months of April and May. I had my semester examinations in June from 1 through 15. But I began studying for the semesters after resolving at least 1 problem every single day. I don’t always feel like solving problems everyday, and there are times when being stuck on the same problem for more than an hour without finding a solution feel really aggravating. Any Software Engineer who wishes to work in an MNC must learn DSA. I hope to ace DSA and also start my Competitive coding journey on Leetcode. After all, as a tier 3 college student, you must fulfil your desire on your own; there are many resources available, but the work must be done solely by you.

So, this is my experience of solving questions from Leetcode. This is my very first blog. I hope you found this information interesting. Please share it and leave a comment below to let me know what you enjoyed and how I can improve my future blogs.