Car Showcasing Project

A web application for showcasing cars, built with Typescript and NextAuth.js by using Next, Tailwind CSS, Headless UI, and integrated with an existing Cars API.

Table of Contents

• Features
• Technologies Used
• Getting Started

Features

• Car Showcase: Display a list of cars with details like make, model, year, and images.
• Authentication: User Have to sign in using Github or Google Authentication.
• Search Functionality: Allow users to search for cars based on various criteria.
• Responsive Design: Ensure the application is usable on both desktop and mobile devices.
• Pagination: Implement pagination for the list of cars.
• Integration with Cars API: Fetch car data from an existing Cars API.

Technologies Used

• Next.js: A React framework for building server-rendered React applications.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Headless UI: A set of completely unstyled, fully accessible UI components.
• Cars API: The existing API used to fetch car data.

Getting Started

Follow these steps to get the project up and running on your local machine:

1. Clone the Repository:

   git clone https://github.com/your-username/car-showcasing-project.git
   cd car-showcasing-project

2. Install Dependencies and Run The Development Server:

   npm install
   npm run dev

3. Create an Environment Variable File named ".env.local" And Store in It:

      GOOGLE_CLIENT_ID,
      GOOGLE_CLIENT_SECRET,
      GITHUB_SECRET,
      GITHUB_ID,
      NEXTAUTH_ID ( which is a randomly generated code of your choice)