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: [],
};

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

same problem here

I have same problem here, api key for imaginstudio wont work

I have same problem here, api key for imaginstudio wont work

same with u

I have same problem here, api key for imaginstudio wont work

same here............

Error: API key for imagine studio not works

we need a new api key

@luidev0 i have problems with tailwind the containerStyles seems to be getting overwrited by the tailwind styles

anyone having the issue where when theres nothing in the path it just shows 3 land rover cars instead of all of them?

this is the fetchCars function:

export async function fetchCars(filters: FilterProps){
const {manufacturer, year, fuel, limit, model} = filters

const headers = {
	'x-rapidapi-key': '94a48f3222mshc3059c5efdc4bf7p138582jsn2c7d6814baf0',
	'x-rapidapi-host': 'cars-by-api-ninjas.p.rapidapi.com'
}
const response = await fetch(`https://cars-by-api-ninjas.p.rapidapi.com/v1/cars?make=${manufacturer}&year=${year}&model=${model}&limit=${limit}&fuel_type=${fuel}`, {
    headers: headers
});

const result = await response.json();

return result;

}

@adrianhajdin please provide new API key for https://cdn.imagin.studio/getimage

anyone having the issue where when theres nothing in the path it just shows 3 land rover cars instead of all of them?

this is the fetchCars function:

export async function fetchCars(filters: FilterProps){ const {manufacturer, year, fuel, limit, model} = filters

const headers = {
	'x-rapidapi-key': '94a48f3222mshc3059c5efdc4bf7p138582jsn2c7d6814baf0',
	'x-rapidapi-host': 'cars-by-api-ninjas.p.rapidapi.com'
}
const response = await fetch(`https://cars-by-api-ninjas.p.rapidapi.com/v1/cars?make=${manufacturer}&year=${year}&model=${model}&limit=${limit}&fuel_type=${fuel}`, {
    headers: headers
});

const result = await response.json();

return result;

}

make sure to set a default value to the variable ( limit ) when u call the fetching function

fetchCars({
    manufacturer: searchParams.manufacturer || '',
    year: searchParams.year || 2022,
    fuel: searchParams.fuel || '',
    limit: searchParams.limit || 10,
    model: searchParams.model || ''
  })

@adrianhajdin please update the API for https://cdn.imagin.studio/getimage

const CarCard = ({car}:CarCardProps) => {
if (!car) {
return

Car data is not available

; // Handle the case where car is undefined or null
}
const {city_mpg,drive,make,model,transmission,year}=car;

const carRent = calculateCarRent(city_mpg,year);
const [isOpen,setIsOpen]=useState(false);

how to fix it

Hello, thanks a lot for the tutorial. @adrianhajdin It would be great to update the API Key for the car images, or just an other solution :)

I have the same problem with the imagin studio api key. It would be apreciated if you can update the key.

I have the same problem with the imagin studio api key. It would be apreciated if you can update the key.

Facing the same issue too

did anyone get imagin studio api key??

I sent an email to the support team, and I got this response "Sadly, the API code used in the video has been revoked since it has already passed a couple of months. Currently we are not aware of any alternatives which match the needs of the video, so please try creating an account for that API."

did anyone get imagin studio api key??

@kilelx @adrianhajdin @manuelist @
@ridvanarik @fcastillo18 @ivaylo-andonov @Sachin582002
Problem with the imagin studio api key. It would be apreciated if anyone can help me with the updated key pls.

hello guys pls can someone help with imagin studio api key

Hi everyone! I encountered the same issue with the Imagin.studio API key, but I found a solution. It does have their watermark, though. You can use "img" as the key, and it should work for you. Good luck!
Here a working example :

Hi everyone! I encountered the same issue with the Imagin.studio API key, but I found a solution. It does have their watermark, though. You can use "img" as the key, and it should work for you. Good luck! Here a working example :

Could you please explain it bit more ??
Where we need to use the key={img}

If you followed the tutorial till the end, you should definitly have this fetch function in your files.

here is the line where to put the img key : url.searchParams.append("customer", "img");

export const generateCarImageUrl = (car: CarProps, angle?: string) => { const url = new URL("https://cdn.imagin.studio/getimage"); const { make, model, year } = car; url.searchParams.append("customer", "img"); url.searchParams.append("make", make); url.searchParams.append("modelFamily", model.split(" ")[0]); url.searchParams.append("zoomType", "fullscreen"); url.searchParams.append("modelYear", ${year}); // url.searchParams.append('zoomLevel', zoomLevel); url.searchParams.append("angle", ${angle}`);

return ${url};
};`

I hope that will help you
Cheers

@bitardev As you mentioned here I made the change It's working Some how some car images are not rendering
Happy to see the images as expected, Thank You

you're welcome @YoosufAathil

Thanks @bitardev

you're welcome @MuhammadDanishKhan16259

If you followed the tutorial till the end, you should definitly have this fetch function in your files.

here is the line where to put the img key : url.searchParams.append("customer", "img");

export const generateCarImageUrl = (car: CarProps, angle?: string) => { const url = new URL("https://cdn.imagin.studio/getimage"); const { make, model, year } = car; url.searchParams.append("customer", "img"); url.searchParams.append("make", make); url.searchParams.append("modelFamily", model.split(" ")[0]); url.searchParams.append("zoomType", "fullscreen"); url.searchParams.append("modelYear", ${year}); // url.searchParams.append('zoomLevel', zoomLevel); url.searchParams.append("angle", ${angle}`);

return ${url}; };`

I hope that will help you Cheers

Thanks

you're welcome @Ahmeddeco