🚗 NextJs Car Gallery with Advanced Search

Introduction

An enhanced version of a Next.js project built by following a YouTube tutorial. This project showcases a dynamic car gallery integrated with two APIs from RapidAPI and features advanced search capabilities.

Features

📸 Dynamic Car Gallery 🔍 Advanced Search using the API-Ninjas and imagin.studio APIs from RapidAPI ⚛️ Built with Next.js, React, and TypeScript 🎨 Styled with TailwindCSS 🚀 Server-side rendering for optimal performance

What I have Learned:

• Use Next.js 13 App Router and Server Side Rendering
• Implement Advanced Search Functionality
• Create Filtering Capabilities
• Optimize Metadata and SEO
• Create custom filter, combobox, and modal elements
• Maintain a well-organized file and folder structure.
• Embrace the principles of writing clean code.
• TypeScript
• TailswindCss

Getting Started

Clone the repository Copy code git clone https://github.com/YOUR_GITHUB_USERNAME/your-repo-name.git cd your-repo-name

Install dependencies

If you are using npm: Copy code npm install

For yarn users: Copy code yarn

Set up your environment variables Rename the .env.example file to .env.local and update the placeholders with your own RapidAPI keys: env Copy code RAPIDAPI_KEY=your_rapidapi_key

Run the development server

bash Copy code npm run dev

or

yarn dev Open http://localhost:3000 with your browser to see the result.

Built With

• Next.js
• React
• TypeScript
• TailwindCSS
• API-Ninjas on RapidAPI
• imagin.studio on RapidAPI

Acknowledgments

This project is open-source and available under the MIT License.