Google Map Clone- Travel Companion | NextJs Chakra UI

Build your own Google Travel Map Companion Using Modern UI & Google API’s

Learn how build a react project from the scratch, and configure the Google Cloud API Services in your project. Build the project and deploy it. In this course you will learn about NextJs, Chakra UI & Google Cloud Services.

What you’ll learn

  • How to create modern UI.
  • learn how to use Google API & Services.
  • Learn how to implement Chara UI.
  • Learn how to convert modern UI into live website.
  • Learn how to use Hooks in Reactjs.

Course Content

  • Introduction –> 1 lecture • 5min.
  • UI components –> 2 lectures • 59min.
  • API Integrations –> 3 lectures • 1hr 10min.
  • Loading Details over the Google Map –> 2 lectures • 18min.

Auto Draft

Requirements

  • Need some programming knowledge about core fundamentals.

Learn how build a react project from the scratch, and configure the Google Cloud API Services in your project. Build the project and deploy it. In this course you will learn about NextJs, Chakra UI & Google Cloud Services.

 

NextJs : The React Framework for Production

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

 

  • Image Component and Image Optimization
  • Internationalized Routing
  • Real Data. Real Performance.
  • Built-In CSS Support
  • API Routes

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Before we continue, note that Hooks are:

  • Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to.
  • 100% backwards-compatible. Hooks don’t contain any breaking changes.
  • Available now. Hooks are now available with the release of v16.8.0.

Google Cloud Platform

Google Cloud Platform, offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search, Gmail, Google Drive, and YouTube.

 

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

 

Chapters Covered?

  1. Creating & Configuring NextJs Project
  2. Integrating Chakra UI
  3. Cloning Google Map UI
  4. Integrating Google Map API
  5. Integrating Travel advisor API from Rapid API Services
  6. Integrating Google Places API
  7. Customizing every sing pin over the Map
Get Tutorial