Welcome

LIVE Classes

Courses

Practice Platforms

Leaderboard

Rewards

Referral

Profile

Finish

Welcome LIVE Classes Courses Practice Platforms Leaderboard Rewards Referral Profile Finish

Welcome to HCL GUVI

Hey there! Welcome to HCL GUVI—Grab Your Vernacular Imprint—where tech learning is easy, fun, and curated specially for you. Incubated by IIT Madras & IIM Ahmedabad in 2014 and now part of HCL Group, we're making quality tech education accessible to all.

Join 3M+ learners breaking barriers and upskilling for a brighter future. We're here to guide you every step of the way! 🚀

LIVE Classes

Zen Classes are HCL GUVI's most refined and flagship product—live, expert-led tech programs for beginners and pros. With IITM Pravartak affiliations, master Full-Stack, Data Science, DevOps, UI/UX, and more in multiple languages!

Explore More

Courses

Looking for flexibility? HCL GUVI's 200+ self-paced courses let you learn anytime, anywhere! From free lessons to IIT-M & Autodesk-certified programs, gain in-demand skills in your preferred language.

Explore More

Practice Platforms

Enhance your coding skills with HCL GUVI's Practice Platforms—interactive, structured, and designed to help you master programming effortlessly.

CodeKata:

A structured coding practice platform with 1500+ coding problems designed by industry experts. Ideal for beginners and professionals preparing for tech interviews with real-world coding challenges.

Try Now >

WebKata:

An interactive platform to master HTML, CSS, JavaScript, and Bootstrap with a live coding environment. Perfect for hands-on web development practice without any setup.

Try Now >

SQLKata:

A practice ground for mastering SQL queries used in real-world applications. Write, optimize, and refine your queries to build strong database skills.

Try Now >

FixTheCode:

Hone your bug-fixing skills with real-world debugging challenges in Python, C++, JavaScript, and Golang. More languages coming soon!

Try Now >

IDE:

A free online compiler supporting 20+ programming languages with auto-complete, debugging, and AI-powered code generation—all in the cloud!

Try Now >

Leaderboard

Climb the leaderboard as you earn Geekoins by learning and practicing! The top scorers get featured, making learning competitive and rewarding. Keep going—you could be next!

Explore More

Rewards

Earn Geekoins by watching videos and practicing problems, then redeem them for exciting rewards. The more you engage, the more you win!

Explore More

Referral

Love learning with HCL GUVI? Share it with friends! Invite them using your unique link or code and unlock exciting rewards—Amazon vouchers, iPhones, and more. A Win-Win.

Explore More

Profile

Your HCL GUVI profile is your digital portfolio! Track progress, showcase skills, add projects, and build a resume. Keep it updated—opportunities await!

Explore More

That's It! You Are Ready!

You're all set to dive into your learning journey with HCL GUVI. Explore, upskill, and make each step count—exciting possibilities awaits!

Home
Javascript
Rendering the Pages in App with Routing

Rendering the Pages in App with Routing

Finally, everything comes together in App.jsx, which acts as the root of the entire application and decides which page to show based on the URL:

File Path: ProductFeedbackApp\src\App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import CustomerSide from './pages/CustomerSide'

import AdminSide from './pages/AdminSide'



import './App.css'



function App() {

  return (

    <>

      <BrowserRouter>

        <Routes>

          <Route path="/" element={<CustomerSide />} />

          <Route path="/admin" element={<AdminSide />} />

        </Routes>

      </BrowserRouter>

    </>

  )

}



export default App

Here, CustomerSide and AdminSide are imported from the pages folder, and the whole app is wrapped inside BrowserRouter, which enables client-side routing.

Inside Routes, each Route maps a URL path to a specific page — visiting / loads CustomerSide, while visiting /admin loads AdminSide.

So App.jsx itself doesn't contain any UI logic of its own; its only job is to act as a traffic controller, deciding which page component gets rendered based on what path is typed into the browser.

Recommended Handbooks

4.7

C++ Handbook

Level up your programming skills with our C++ Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

6316

3 Hrs

4.7

Python Basics Handbook

Level up your programming skills with our Python Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

7629

3.5 Hrs

4.6

Javascript Handbook

Level up your programming skills with our JavaScript Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

6231

2 Hrs

ReactJS Projects Handbook

Learn ReactJS by building projects that mirror real-world applications. Strengthen your skills with step-by-step guidance and hands-on coding experience.

English

2.5 Hrs

Computer Networks Tutorial

A complete guide to computer networking, from fundamentals to protocols, routing, addressing, and real-world data communication.

English

1.5 Hrs

Operating System Tutorial

Your complete guide to Operating Systems, from fundamentals to advanced topics like memory management, scheduling, threads, and deadlock handling.

English

1 Hr

DBMS and SQL Tutorial

A complete handbook to guide you through DBMS fundamentals and SQL mastery, perfect for building data-driven applications, managing data systems, or preparing for database roles.

English

219

0.5 Hr

Java Tutorial

Beginner-friendly Java handbook covering core concepts, OOP principles, and hands-on programming examples.

English

2 Hrs

C Language Tutorial

A step-by-step C programming handbook for beginners. Understand C syntax, logic, memory, and hands-on coding to build solid programming foundations.

English

0.5 Hr

PHP Tutorial

Step-by-step PHP handbook for web developers. Master server-side scripting with practical code and concepts.

English

0.5 Hr

Android Tutorial

Beginner-friendly Android handbook covering app fundamentals, UI design, and hands-on development concepts.

English

1 Hr

Linux Guide Tutorial

A practical Linux handbook covering command-line basics, file management, and system operations.

English

2.5 Hrs

Data Structures and Algorithms Tutorial

Learn core data structures and algorithms with practical examples to improve coding efficiency and problem-solving skills.

English

0.5 Hr

Computer Architecture

A beginner-friendly guide to computer architecture covering processors, memory, and system-level concepts.

English

0.5 Hr

HTML 5 References Tutorial

A handy HTML5 reference guide covering modern tags, attributes, and semantic elements.

English

1.5 Hrs

Docker Tutorial

A hands-on Docker handbook covering containers, images, and modern application deployment basics.

English

0 Hr

GIT (Using Github) Tutorial

A hands-on Git and GitHub handbook for managing code, tracking changes, and collaborating on projects.

English

0.5 Hr

Go Language Tutorial

A beginner-friendly Go handbook covering core language concepts and modern backend programming.

English

0.5 Hr

GIT Guide

A practical Git guide covering version control basics, branching, and real project workflows.

English

1 Hr

CSS Tutorial

A beginner-friendly CSS handbook covering page styling, layouts, and responsive design basics.

English

1 Hr

Advanced Data Structures

A focused handbook covering advanced data structures for efficient and scalable problem solving.

English

0 Hr

Spring Framework Tutorial

A hands-on Spring Framework handbook covering core concepts and backend development fundamentals.

English

1 Hr

Spring Boot Tutorial

A practical Spring Boot handbook focused on building and running modern Java backend applications.

English

0.5 Hr

Kotlin Tutorial

A beginner-friendly Kotlin handbook covering modern language features and real-world development concepts.

English

1 Hr

Apache Cordova Tutorial

A hands-on Apache Cordova handbook for building cross-platform mobile apps with web technologies.

English

0 Hr

Python Tutorial

A beginner-friendly Python handbook covering core concepts and practical programming examples.

English

1.5 Hrs

SASS-SCSS Tutorial

A hands-on SASS / SCSS handbook for writing clean, reusable, and scalable stylesheets.

English

0.5 Hr

MongoDB Tutorial

A hands-on MongoDB handbook covering NoSQL concepts and modern database operations.

English

0.5 Hr

Numpy Tutorial

A hands-on NumPy handbook for fast numerical computation and data manipulation using Python.

English

1.5 Hrs

PL-SQL Tutorial

A hands-on PL/SQL handbook for writing procedural database programs and business logic.

English

0.5 Hr

Python Built-in Functions Tutorial

A handy reference guide to Python’s built-in functions for cleaner and faster coding.

English

0.5 Hr

Pandas Tutorial

A hands-on Pandas handbook for data manipulation, cleaning, and analysis using Python.

English

2.5 Hrs

Elasticsearch Tutorial

A hands-on Elasticsearch handbook covering indexing, searching, and data analysis concepts.

English

0 Hr

Matplotlib Tutorial

A hands-on Matplotlib handbook for creating charts and visualizing data using Python.

English

0.5 Hr

Web Scraping Tutorial

A hands-on web scraping handbook for extracting and working with data from websites.

English

0 Hr

Networking with Python

A hands-on handbook for building network-enabled applications using Python.

English

0.5 Hr

Tkinter Tutorial

A hands-on Tkinter handbook for building desktop applications with Python.

English

0.5 Hr

Java Programs Tutorial

A hands-on Java programs handbook for practicing core concepts and problem-solving in Java.

English

2 Hrs

Java Examples Tutorial

A hands-on Java examples handbook focused on logic building and practical coding.

English

3.5 Hrs

Servlet Tutorial

A hands-on Java Servlet handbook for building server-side web applications.

English

0.5 Hr

JSP Tutorial

A hands-on JSP handbook for creating dynamic server-side web pages with Java.

English

0.5 Hr

Java Type Conversion Tutorial

A concise Java handbook explaining type conversion and casting with clear examples.

English

0.5 Hr

Java 8 Tutorial

A hands-on Java 8 handbook focused on modern language features and functional programming.

English

0.5 Hr

Java 9 Tutorial

A practical Java 9 handbook covering modules and platform enhancements.

English

0 Hr

Java 10 Tutorial

A focused Java 10 handbook covering language refinements and performance upgrades.

English

0 Hr

Java 11 Tutorial

A hands-on Java 11 handbook focused on modern APIs and long-term support features.

English

0 Hr

Java Util Library Tutorial

A hands-on Java Util library handbook covering essential utility classes and collections.

English

0.5 Hr

Building a Contact Us Form in ReactJS

Responsive ReactJS Contact Form with validation, error messages, and success animation.

English

0.5 Hr

Building a Age Calculator App Using ReactJS

Quickly find your exact age with this interactive ReactJS Age Calculator.

English

0.5 Hr

Movie Recommendation System Project Using Content-Based Filtering

Build a movie recommendation system that suggests similar movies using genre similarity and average ratings. A simple, practical ML project for beginners to understand real-world recommenders.

English

0.5 Hr

Recipe Finder App using ReactJS

Build a live Recipe Finder app using ReactJS. Search recipes, view details in modals, and handle state, events, and API data efficiently.

English

0.5 Hr

Sales Data Analysis Project for Beginners Using Data Science

Analyze sales data to find revenue trends, top products, quarterly patterns, and key customer insights. A beginner-friendly project for hands-on business data analysis in Python.

English

0.5 Hr

Student Performance Analysis Project for Beginners Using Data Science

Analyze student performance data to uncover attendance trends, study patterns, score improvements, and key exam factors. A beginner-friendly Python project for hands-on learning.

English

0.5 Hr

Word Counter Tool Using ReactJS

Learn to create a live Word & Character Counter using ReactJS, Tailwind CSS, and JavaScript. Practice state, events, and conditional rendering.

English

0.5 Hr

Customer Churn Prediction Project Using Classification Techniques

Analyze telecom customer data to predict churn, identify high-risk users, and uncover patterns in tenure, payments, and service usage. A beginner-friendly Python project for hands-on learning.

English

0.5 Hr

Basic Expense Tracker App using ReactJS

A simple ReactJS-based Expense Tracker App that helps users manage income, add expenses, and view real-time balance updates.

English

0.5 Hr

Simple Binary to Decimal Converter in React

A ReactJS tool that converts binary numbers into decimal form with instant validation and user-friendly input handling.

English

0.5 Hr

Real-Time Unit Converter in React

A ReactJS-based real-time converter that switches between units like length, weight, and temperature with instant results and swap functionality.

English

0.5 Hr

House Price Prediction Using Machine Learning (XGBoost)

Build a machine learning model that predicts house prices using housing characteristics and XGBoost Regression. A beginner-friendly project for learning real-world predictive analytics.

English

1 Hr

Weather Data Analysis and Visualization Using Python

Analyze weather data using Python and create visualizations to uncover temperature, humidity, and rainfall trends. A beginner-friendly Data Science project for learning practical data analysis.

English

1 Hr

Expandable Accordion Component using React

Learn to create an interactive React Accordion with toggle functionality and dynamic content display.

English

0.5 Hr

OTP Verification Component using React

Learn to build an interactive OTP Verification Component in React with auto focus, OTP validation, loading states, and resend functionality.

English

0.5 Hr

Cricket Data Analysis Using Python

Analyze IPL match data using Python to uncover player, team, and performance trends through data visualization. A beginner-friendly Data Science project for learning exploratory data analysis.

English

0.5 Hr

Credit Card Fraud Detection for Beginners using Data Science

Detect fraudulent credit card transactions using Logistic Regression and machine learning. Learn data preprocessing, classification, and model evaluation.

English

0.5 Hr

Deep learning Tutorial

A hands-on Deep Learning handbook covering neural networks, CNNs, RNNs, and modern AI architectures with practical examples.

English

0.5 Hr

Software Development Life Cycle Tutorial

A structured SDLC handbook covering software development phases, popular models, and real-world project workflows.

English

0.5 Hr

Stock Price Prediction for Beginners using Data Science

Predict future stock closing prices using historical market data and KNN Regression. Learn feature engineering, model optimization, and regression evaluation in this practical Data Science project.

English

0.5 Hr

Apache Kafka Tutorial

A hands-on Apache Kafka handbook covering topics, partitions, brokers, and real-time data streaming concepts.

English

0.5 Hr

Angular Handbook

A hands-on Angular handbook covering components, services, routing, and building dynamic single-page web applications.

English

0.5 Hr

Django Handbook

A hands-on Django handbook covering models, views, templates, and building full-featured web applications with Python.

English

0.5 Hr

Computer Programming Tutorial

A beginner-friendly programming handbook covering core coding concepts, logic building, and problem-solving fundamentals.

English

0.5 Hr

Tensorflow Tutorial

A hands-on TensorFlow handbook covering tensors, neural networks, and building deep learning models with Python.

English

0.5 Hr

Java OOPs Concepts Tutorial

A hands-on Java OOPs handbook covering classes, objects, inheritance, and the four pillars of object-oriented programming.

English

0.5 Hr

Building an Image Classification System Using CNN

Build an Image Classification System using TensorFlow and Keras. Learn image preprocessing, ANN, CNN, model evaluation, and image prediction through this beginner-friendly deep learning project.

English

0.5 Hr

News Recommendation System Using Machine Learning

Build a content-based News Recommendation System using Python, TF-IDF Vectorization, and Cosine Similarity to recommend relevant news articles through Machine Learning.

English

0.5 Hr

Fake Review Detection System using Machine Learning

Build a Fake Review Detection System using Python, TF-IDF Vectorization, and Logistic Regression to identify fake and genuine customer reviews through Machine Learning.

English

1 Hr

Job Portal with Applicant Tracking System Using Full Stack Development

A Job Portal built with React JS — job seeker applications, employer dashboard, and reusable components.

English

0.5 Hr

Rendering the Pages in App with Routing

Contents

Rendering the Pages in App with Routing

Product Feedback App Using Full Stack Development - Customer Review and Rating System

Recommended Handbooks

C++ Handbook

Python Basics Handbook

Javascript Handbook

ReactJS Projects Handbook

Computer Networks Tutorial

Operating System Tutorial

DBMS and SQL Tutorial

Java Tutorial

C Language Tutorial

PHP Tutorial

Android Tutorial

Linux Guide Tutorial

Data Structures and Algorithms Tutorial

Computer Architecture

HTML 5 References Tutorial

Docker Tutorial

GIT (Using Github) Tutorial

Go Language Tutorial

GIT Guide

CSS Tutorial

Advanced Data Structures

Spring Framework Tutorial

Spring Boot Tutorial

Kotlin Tutorial

Apache Cordova Tutorial

Python Tutorial

SASS-SCSS Tutorial

MongoDB Tutorial

Numpy Tutorial

PL-SQL Tutorial

Python Built-in Functions Tutorial

Pandas Tutorial

Elasticsearch Tutorial

Matplotlib Tutorial

Web Scraping Tutorial

Networking with Python

Tkinter Tutorial

Java Programs Tutorial

Java Examples Tutorial

Servlet Tutorial

JSP Tutorial

Java Type Conversion Tutorial

Java 8 Tutorial

Java 9 Tutorial

Java 10 Tutorial

Java 11 Tutorial

Java Util Library Tutorial

Building a Contact Us Form in ReactJS

Building a Age Calculator App Using ReactJS

Movie Recommendation System Project Using Content-Based Filtering

Recipe Finder App using ReactJS

Sales Data Analysis Project for Beginners Using Data Science

Student Performance Analysis Project for Beginners Using Data Science

Word Counter Tool Using ReactJS

Customer Churn Prediction Project Using Classification Techniques

Basic Expense Tracker App using ReactJS

Simple Binary to Decimal Converter in React

Real-Time Unit Converter in React

House Price Prediction Using Machine Learning (XGBoost)

Weather Data Analysis and Visualization Using Python

Expandable Accordion Component using React

OTP Verification Component using React

Cricket Data Analysis Using Python

Credit Card Fraud Detection for Beginners using Data Science

Deep learning Tutorial

Software Development Life Cycle Tutorial

Stock Price Prediction for Beginners using Data Science

Apache Kafka Tutorial

Angular Handbook

Django Handbook

Computer Programming Tutorial

Tensorflow Tutorial

Java OOPs Concepts Tutorial

Building an Image Classification System Using CNN

News Recommendation System Using Machine Learning