Build and Deploy a Modern Next.js 13 Application | React, Next JS 13, TypeScript, Tailwind CSS

api-key

hrjavascript-mastery

constants.ts

export const manufacturers = [
  "Acura",
  "Alfa Romeo",
  "Aston Martin",
  "Audi",
  "Bentley",
  "BMW",
  "Buick",
  "Cadillac",
  "Chevrolet",
  "Chrysler",
  "Citroen",
  "Dodge",
  "Ferrari",
  "Fiat",
  "Ford",
  "GMC",
  "Honda",
  "Hyundai",
  "Infiniti",
  "Jaguar",
  "Jeep",
  "Kia",
  "Lamborghini",
  "Land Rover",
  "Lexus",
  "Lincoln",
  "Maserati",
  "Mazda",
  "McLaren",
  "Mercedes-Benz",
  "MINI",
  "Mitsubishi",
  "Nissan",
  "Porsche",
  "Ram",
  "Rolls-Royce",
  "Subaru",
  "Tesla",
  "Toyota",
  "Volkswagen",
  "Volvo",
];

export const yearsOfProduction = [
  { title: "Year", value: "" },
  { title: "2015", value: "2015" },
  { title: "2016", value: "2016" },
  { title: "2017", value: "2017" },
  { title: "2018", value: "2018" },
  { title: "2019", value: "2019" },
  { title: "2020", value: "2020" },
  { title: "2021", value: "2021" },
  { title: "2022", value: "2022" },
  { title: "2023", value: "2023" },
];

export const fuels = [
  {
    title: "Fuel",
    value: "",
  },
  {
    title: "Gas",
    value: "Gas",
  },
  {
    title: "Electricity",
    value: "Electricity",
  },
];

export const footerLinks = [
  {
    title: "About",
    links: [
      { title: "How it works", url: "/" },
      { title: "Featured", url: "/" },
      { title: "Partnership", url: "/" },
      { title: "Bussiness Relation", url: "/" },
    ],
  },
  {
    title: "Company",
    links: [
      { title: "Events", url: "/" },
      { title: "Blog", url: "/" },
      { title: "Podcast", url: "/" },
      { title: "Invite a friend", url: "/" },
    ],
  },
  {
    title: "Socials",
    links: [
      { title: "Discord", url: "/" },
      { title: "Instagram", url: "/" },
      { title: "Twitter", url: "/" },
      { title: "Facebook", url: "/" },
    ],
  },
];

globals.css

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

/* START: General styles */
.max-width {
  @apply max-w-[1440px] mx-auto;
}

.padding-x {
  @apply sm:px-16 px-6;
}

.padding-y {
  @apply py-4;
}

.flex-center {
  @apply flex items-center justify-center;
}

.flex-between {
  @apply flex justify-between items-center;
}

.custom-btn {
  @apply flex flex-row relative justify-center items-center py-3 px-6 outline-none;
}
/* END: General styles */

/* START: Hero styles */
.hero {
  @apply flex xl:flex-row flex-col gap-5 relative z-0 max-w-[1440px] mx-auto;
}

.hero__title {
  @apply 2xl:text-[72px] sm:text-[64px] text-[50px] font-extrabold;
}

.hero__subtitle {
  @apply text-[27px] text-black-100 font-light mt-5;
}

.hero__image-container {
  @apply xl:flex-[1.5] flex justify-end items-end w-full xl:h-screen;
}

.hero__image {
  @apply relative xl:w-full w-[90%] xl:h-full h-[590px] z-0;
}

.hero__image-overlay {
  @apply absolute xl:-top-24 xl:-right-1/2 -right-1/4 bg-hero-bg bg-repeat-round -z-10 w-full xl:h-screen h-[590px] overflow-hidden;
}
/* END: Hero styles */

/* START: Home styles */

.home__text-container {
  @apply flex flex-col items-start justify-start gap-y-2.5 text-black-100;
}

.home__filters {
  @apply mt-12 w-full flex-between items-center flex-wrap gap-5;
}

.home__filter-container {
  @apply flex justify-start flex-wrap items-center gap-2;
}

.home__cars-wrapper {
  @apply grid 2xl:grid-cols-4 xl:grid-cols-3 md:grid-cols-2 grid-cols-1 w-full gap-8 pt-14;
}

.home__error-container {
  @apply mt-16 flex justify-center items-center flex-col gap-2;
}
/* END: Home styles */

/* START: Car Card styles */
.car-card {
  @apply flex flex-col p-6 justify-center items-start text-black-100 bg-primary-blue-100 hover:bg-white hover:shadow-md rounded-3xl;
}

.car-card__content {
  @apply w-full flex justify-between items-start gap-2;
}

.car-card__content-title {
  @apply text-[22px] leading-[26px] font-bold capitalize;
}

.car-card__price {
  @apply flex mt-6 text-[32px] leading-[38px] font-extrabold;
}

.car-card__price-dollar {
  @apply self-start text-[14px] leading-[17px] font-semibold;
}

.car-card__price-day {
  @apply self-end text-[14px] leading-[17px] font-medium;
}

.car-card__image {
  @apply relative w-full h-40 my-3 object-contain;
}

.car-card__icon-container {
  @apply flex group-hover:invisible w-full justify-between text-grey;
}

.car-card__icon {
  @apply flex flex-col justify-center items-center gap-2;
}

.car-card__icon-text {
  @apply text-[14px] leading-[17px];
}

.car-card__btn-container {
  @apply hidden group-hover:flex absolute bottom-0 w-full z-10;
}
/* END: Car Card styles */

/* START: Car Details styles */
.car-details__dialog-panel {
  @apply relative w-full max-w-lg max-h-[90vh] overflow-y-auto transform rounded-2xl bg-white p-6 text-left shadow-xl transition-all flex flex-col gap-5;
}

.car-details__close-btn {
  @apply absolute top-2 right-2 z-10 w-fit p-2 bg-primary-blue-100 rounded-full;
}

.car-details__main-image {
  @apply relative w-full h-40 bg-pattern bg-cover bg-center rounded-lg;
}
/* END: Car Details styles */

/* START: Custom Filter styles */
.custom-filter__btn {
  @apply relative w-full min-w-[127px] flex justify-between items-center cursor-default rounded-lg bg-white py-2 px-3 text-left shadow-md sm:text-sm border;
}

.custom-filter__options {
  @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
}
/* END: Custom Filter styles */

/* START: Footer styles */
.footer {
  @apply flex flex-col text-black-100  mt-5 border-t border-gray-100;
}

.footer__links-container {
  @apply flex max-md:flex-col flex-wrap justify-between gap-5 sm:px-16 px-6 py-10;
}

.footer__rights {
  @apply flex flex-col justify-start items-start gap-6;
}

.footer__links {
  @apply flex-1 w-full flex md:justify-end flex-wrap max-md:mt-10 gap-20;
}

.footer__link {
  @apply flex flex-col gap-6 text-base min-w-[170px];
}

.footer__copyrights {
  @apply flex justify-between items-center flex-wrap mt-10 border-t border-gray-100 sm:px-16 px-6 py-10;
}

.footer__copyrights-link {
  @apply flex-1 flex sm:justify-end justify-center max-sm:mt-4 gap-10;
}
/* END: Footer styles */

/* START: searchbar styles */
.searchbar {
  @apply flex items-center justify-start max-sm:flex-col w-full relative max-sm:gap-4 max-w-3xl;
}

.searchbar__item {
  @apply flex-1 max-sm:w-full flex justify-start items-center relative;
}

.searchbar__input {
  @apply w-full h-[48px] pl-12 p-4 bg-light-white rounded-r-full max-sm:rounded-full outline-none cursor-pointer text-sm;
}
/* END: searchbar styles */

/* START: search manufacturer styles */
.search-manufacturer {
  @apply flex-1 max-sm:w-full flex justify-start items-center;
}

.search-manufacturer__input {
  @apply w-full h-[48px] pl-12 p-4 rounded-l-full max-sm:rounded-full bg-light-white outline-none cursor-pointer text-sm;
}

.search-manufacturer__options {
  @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
}

.search-manufacturer__option {
  @apply cursor-default select-none py-2 pl-10 pr-4;
}
/* END: search manufacturer styles */

tailwind.config.js

/** @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}",
  ],
  mode: "jit",
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        "black-100": "#2B2C35",
        "primary-blue": {
          DEFAULT: "#2B59FF",
          100: "#F5F8FF",
        },
        "secondary-orange": "#f79761",
        "light-white": {
          DEFAULT: "rgba(59,60,152,0.03)",
          100: "rgba(59,60,152,0.02)",
        },
        grey: "#747A88",
      },
      backgroundImage: {
        'pattern': "url('/pattern.png')",
        'hero-bg': "url('/hero-bg.png')"
      }
    },
  },
  plugins: [],
};

define angle "1" and key "hrjavascript-mastery" but face this problem.

define angle "1" and key "hrjavascript-mastery" but face this problem.

@Sachin582002 Could you post an image of your code?

"use client"
import Image from 'next/image'
import { Fragment } from 'react';

import { Dialog, Transition } from '@headlessui/react'

import { CarProps } from '@/types';
import React from 'react'
import { generateCarImageUrl } from '@/utils';

interface CarDetailsProps {
isOpen: boolean;
closeModal: () => void;
car: CarProps;
}

const CarDetails = ({isOpen, closeModal, car}: CarDetailsProps) => {
return (
<>

    <Transition.Child
      as={Fragment}
      enter="ease-out duration-300"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="ease-in duration-200"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
    >
      <div className="fixed inset-0 bg-black bg-opacity-25" />
    </Transition.Child>

    <div className="fixed inset-0 overflow-y-auto">

      <div className="flex min-h-full items-center justify-center p-4 text-center">
      <Transition.Child
      as={Fragment}
      enter="ease-out duration-300"
      enterFrom="opacity-0 scale-95"
      enterTo="opacity-100 scale-100"
      leave="ease-in duration-200"
      leaveFrom="opacity-100 scale-100"
      leaveTo="opacity-0 scale-95"
   >
    <Dialog.Panel className="relative w-full max-w-lg max-h-[90vh] overflow-y-auto transform rounded-2xl bg-white p-6 text-left shadow-xl transition-all flex flex-col gap-5">
    <button
              type='button'
              className='absolute top-2 right-2 z-10 w-fit p-2 bg-primary-blue-100 rounded-full'
              onClick={closeModal}
            >
              <Image
                src='/close.svg'
                alt='close'
                width={20}
                height={20}
                className='object-contain'
              />
            </button>
            <div className='flex-1 flex flex-col gap-3'>
              <div className='relative w-full h-40 bg-pattern bg-cover bg-center rounded-lg'>
                <Image
                  src={generateCarImageUrl(car,"01")}
                  alt='car model'
                  fill
                  priority
                  className='object-contain'
                />
              </div>

              <div className='flex gap-3'>
                <div className='flex-1 relative w-full h-40 bg-primary-blue-100 rounded-lg'>
                  <Image
                    src={generateCarImageUrl(car,"29")}
                    alt='car model'
                    fill
                    priority
                    className='object-contain'
                  />
                </div>
                <div className='flex-1 relative w-full h-40 bg-primary-blue-100 rounded-lg'>
                  <Image
                    src={generateCarImageUrl(car,"33")}
                    alt='car model'
                    fill
                    priority
                    className='object-contain'
                  />
                </div>
                <div className='flex-1 relative w-full h-40 bg-primary-blue-100 rounded-lg'>
                  <Image
                    src={generateCarImageUrl(car,"13")}
                    alt='car model'
                    fill
                    priority
                    className='object-contain'
                  />
                </div>
              </div>
            </div>

            <div className="flex-1 flex flex-col gap-2">
              <h2 className="font-semibold text-xl capitalize">
                {car.make} {car.model}
              </h2>

              <div className='mt-3 flex flex-wrap gap-4'>
                {Object.entries(car).map(([key, value]) => (
                  <div className='flex justify-between gap-5 w-full text-right' key={key}>
                    <h4 className='text-gray-400 capitalize'>
                      {key.split('_').join(' ')}
                    </h4>
                    <p className='text-black-100 font-semibold'>
                      {value}
                    </p>
                  </div>
                ))}

              </div>
            </div>
    </Dialog.Panel>

    </Transition.Child>
      </div>
    </div>

  </Dialog>

</Transition>
</>

)
}

export default CarDetails

@everyones,should we do client side rendering in nextjs 14.1 or not?

my card image is not shown?

my card image is not shown?

@Sachin582002 Did you replace the angle as well on you CarCard group?

Ooh! I forget to replace the angle in carcard folder.

It working,thnx

Facing some problem while deployed the project

Searchparams related error

Getting invalid api key.how to fix it

@Sachin582002

You must declare the type of "searchParams" in Home function. like this:

`export default async function Home({ searchParams }: HomeProps) {
  const allCars = await fetchCars({
    manufacturer: searchParams.manufacturer || "",
    year: searchParams.year || 2022,
    fuel: searchParams.fuel || "",
    limit: searchParams.limit || 10,
    model: searchParams.model || "",
  });`

Also, create the HomeProps Interface in the Types folder declaring searchParams : FilterProps

Facing invalid api key problem

I actually push the code with secret key in my GitHub account forget That I must store in env file.right now they showing invalid key

Also get a message in my email that your rapid api key has been exposed in GitHub account .gitguardian has detected that problem.so how can I fix it

@luidev0 can you help me

@Sachin582002

In your utils->index.ts in fetchCars arrow function you must change the headers like this:

`const headers: HeadersInit = {
    "X-RapidAPI-Key": process.env.NEXT_PUBLIC_RAPID_API_KEY || "",
    "X-RapidAPI-Host": "cars-by-api-ninjas.p.rapidapi.com",
  };`

You must add the API KEY as a variable in your .env file and name "NEXT_PUBLIC_RAPID_API_KEY=APIKEY".
In your generateCarUrl arrow function in the first append you must change like this:
url.searchParams.append('customer', process.env.NEXT_PUBLIC_IMAGIN_API_KEY || '');

Another way, is setting the variable in the dependencies on your host.

still facing the same error.

what are the changes i need if i use axios rapidapi instead of javascript fetch

https://github.com/Sachin582002/car-store

@luidev0 can you see my code and give some solution to my invalid key error.

@Sachin582002 have you created your .env file in the root folder?

I am facing the similar issue. How to resolve this?

@luidev0 yes i create .env file in root folder

@Sachin582002 Link the Github guardian app with you GitHub account, then change the "javascript" KEY and replace here 'process.env.NEXT_PUBLIC_RAPID_API_KEY || ""'

yeah key " hrjavascript-mastery" still work ... its just need any angle .. can be 1 and it will work .. thanks guys so much

if " hrjavascript-mastery" key is not working what i do?

I just get the red chunk, and not the cars. what do I do?

same problem here