logo
Sign in

CarHub - Demo

Sep 9, 2023


CarHub is a simple frontend application demo built with latest React and Next.js. This project simulates a car rental application in real business settings. User can search, filter and browse car information and calculate rental prices based on their selections. The purpose of this app is to showcase the ability to use new Next 13 app router to create a hybrid frontend with both SSR and CSR.


URL: https://auto-lab-gamma.vercel.app/

GitHub: https://github.com/siranchao/auto_lab


typescriptreactnexttwcss
demo-pic-1demo-pic-2

Tech stack

This is an purely frontend application built on React and Next.js with Tailwind CSS. It is a demo project to showcase the ability to levage modern React + TypeScript and relevant tools to construct a hybrid rendering framework.


Here are the tech stacks and tools used in this project:

  • Framework: React, Next.13, TypeScript, Next-Auth
  • CSS library: Headless UI
  • Deployment: Vercel

Features

Here are some of the highlights:

  • - Fully mobile responsive
  • - Custom signIn/signUp modal
  • - Connected and able to query from massive market data
  • - User can filter cars by various criteria
  • - Able to access detailed information and photos

Additional info

This app take advantage of the public APIs provided by Rapid API, you can discover and connect to thousands of APIs on its website.


All car images are fetching from API provided by Imagin Studio. This is a paid service which only allow limit number of requests per day and watermarks may be included.