Car NextJS 13

A car showcase application using Next.js 13

Setup

Create a Next.js 13 project using,

npx create-next-app@latest

• What is your project named? carhub
• Would you like to add TypeScript with this project? Yes
• Would you like to use ESLint with this project? No
• Would you like to use Tailwind CSS with this project? Yes
• Would you like to use the src/ directory with this project? No
• What import alias would you like configured? @*

Packages

We're using the headlessui to create combobox and dropdowns. To download the package,

npm install @headlessui/react

APIs

We're using two APIs:

1. Rapid API
   • Doc Link - Cars API by API Ninjas
2. Imagin Studio
   • Sign up Link - Imagin SignUp
   • Doc Link - Imagin Docs From the Menu, you can select "CDN Data Points" to see all the params the API accepts.

⚠️ Issue with Imagin - It doesn't seem to allow creating an account using normal email address. For it to work, it has to be a business account. I tried TempMail and it works. But no normal gmail accounts are working.

Things to know

To enable the functionality of dynamic images, we need to inform Next.js explicitly that we anticipate receiving dynamic image URLs from a particular source. This can be achieved by adjusting the configuration of Next.js as follows:

const nextConfig = {
  images: {
    domains: ["cdn.imagin.studio"],
  },
};

Setup ENV

NEXT_PUBLIC_RAPID_API_URL=<RAPID_API_URL> // Cars By Ninja-API
NEXT_PUBLIC_RAPID_API_HOST=<RAPID_API_HOST> // Cars By Ninja-API
NEXT_PUBLIC_RAPID_API_KEY=<RAPID_API_KEY> // Cars By Ninja-API