https://github.com/ladunjexa/nextjs13-carhub

"CarHub" Web - Easily find detailed specifications for any vehicle - a modern Next.js 13 Application using TypeScript 🏎
https://github.com/ladunjexa/nextjs13-carhub

carhub headless-ui nextjs13 react server-side-rendering tailwindcss typescript

Last synced: 18 days ago
JSON representation

"CarHub" Web - Easily find detailed specifications for any vehicle - a modern Next.js 13 Application using TypeScript 🏎

• Host: GitHub
• URL: https://github.com/ladunjexa/nextjs13-carhub
• Owner: ladunjexa
• License: mit
• Created: 2023-06-10T14:42:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-13T18:21:52.000Z (6 months ago)
• Last Synced: 2024-10-10T23:50:57.896Z (about 1 month ago)
• Topics: carhub, headless-ui, nextjs13, react, server-side-rendering, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://nextjs13-carhub.vercel.app
• Size: 6.47 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  ![Project Banner](@readme_assets/readme_banner.png#gh-dark-mode-only)

  ![Project Banner](@readme_assets/readme_banner-light.png#gh-light-mode-only)

  
CarHub

  

  


  Easily find detailed specifications for any vehicle - a modern Next.js 13 Application using TypeScript 🏎

  




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



   

 


    View Demo

   · 

    Documentation

   · 

    Report Bug

   · 

    Request Feature

  






# :notebook_with_decorative_cover: Table of Contents

- [About the Project](#star2-about-the-project)

  * [Folder Structure](#bangbang-folder-structure)

  * [Tech Stack](#space_invader-tech-stack)

- [Getting Started](#toolbox-getting-started)

  * [Environment Variables](#key-environment-variables)

  * [Installation](#gear-installation)

  * [Run Locally](#running-run-locally)

- [Contributing](#wave-contributing)

- [License](#warning-license)

- [Contact](#handshake-contact)

- [Acknowledgements](#gem-acknowledgements)

  

## :star2: About the Project



  






Discover the perfect ride for you with our advanced car search engine. Easily find detailed specifications for any brand, model, year, and fuel type.

### :bangbang: Folder Structure

Here is the folder structure of CarHub.

```bash

Nextjs-CarHub-Web/

|- app/

    |-- globals.css

    |-- layout.css

    |-- page.tsx

|- components/

    |-- CarCard.tsx

    |-- CardDetails.tsx

    |-- CustomButton.tsx

    |-- CustomFilter.tsx

    |-- Footer.tsx

    |-- Hero.tsx

    |-- Navbar.tsx

    |-- SearchBar.tsx

    |-- SearchManufacturer.tsx

    |-- ShowMore.tsx

    |-- index.ts

|- data/

    |-- index.ts

|- types/

    |-- index.ts

|- utils/

    |-- index.ts

|- public/

|- next-env.d.ts

|- next.config.js

|- postcss.config.js

|- tailwind.config.js

|- package.json

|- tscnofig.json

```




### :space_invader: Tech Stack

![My Skills](https://skillicons.dev/icons?i=nextjs,typescript,react,tailwindcss)

(back to top)


## :toolbox: Getting Started

### :key: Environment Variables

In order to use CarHub you have to create [Cars By Ninja-API](https://rapidapi.com/apininjas/api/cars-by-api-ninjas) api key, and [IMAGIN.studio](https://imagin.studio/) account, to run this webapp, you will need to add the following environment variables to your .env file, which need to be located in root directory.

```env

RAPID_API_KEY= // Cars By Ninja-API

RAPID_API_HOST= // Cars By Ninja-API

IMGIN_API_CUSTOMER=

```

### :gear: Installation

#### Step 1:

Download or clone this repo by using the command below:

```bash

 https://github.com/ladunjexa/Nextjs-CarHub-Web.git

```

#### Step 2:

This webapp using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in console:

```bash

  node -v

```

#### Step 3:

In root folder execute the following command to get the required packages:

```bash

  npm install

```

### :running: Run Locally

#### Step 1:

Go to root folder and execute the following command in order to run the webapp:

```bash

  npm run dev

```

(back to top)


## :wave: Contributing



  



Contributions are always welcome!

See [`contributing.md`](https://contributing.md/) for ways to get started.

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

(back to top)


## :warning: License

Distributed under the MIT License. See [LICENSE.txt](https://github.com/ladunjexa/Nextjs-CarHub-Web/blob/main/LICENSE) for more information.

(back to top)


## :handshake: Contact

Liron Abutbul - [@lironabutbul6](https://twitter.com/lironabutbul6) - [@ladunjexa](https://t.me/ladunjexa)

Project Link: [https://github.com/ladunjexa/Nextjs-CarHub-Web](https://github.com/ladunjexa/Nextjs-CarHub-Web)

(back to top)


## :gem: Acknowledgements

This section used to mention useful resources and libraries that used in CreativAI Webapp:

- [Next.js](https://nextjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [React.js](https://reactjs.org/)

- [Tailwind CSS](https://tailwindcss.com/)

- [Headless UI](https://headlessui.com/)

- #JSMastery

(back to top)