Building the ShopKart Home Page

Business Scenario

Hello talented developers!

Our ShopKart project has now been successfully configured with React + Vite, Bootstrap, React Router and React Hook Form.

Today, we will focus on the Home Page foundation.

Pre-Lab Preparation

Module:

1) React Introduction & JSX

2) Deep Dive into Component & Props

We will break the interface into reusable React components and use props wherever the same component needs to display different data.

git pull origin branchName

Git Pull

Task 1:Create the ShopKart Design Foundation

Open index.css - Remove the default Vite CSS if it is still present and add :

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
}

Task 2 :Build the Shopkart Navbar

Open Navbar.jsx and Replace the temporary Navbar with:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
}

Inside components folder - create Navbar.css

.top-bar {
  background-color: #06263d;
  color: white;
  font-size: 14px;
  padding: 8px 0;
}

.navbar {
  min-height: 75px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.shopkart-logo {
  width: 180px;
  height: auto;
}

.navbar .nav-link {
  color: #0f172a;
  font-weight: 600;
  margin: 0 8px;
}

Inside components folder - create Navbar.css

.navbar .nav-link:hover {
  color: #0aa89e;
}

.nav-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  cursor: pointer;
}

Install React Router DOM:

npm install react-router-dom

This will allow us to create navigation between different ShopKart pages.

Install React Hook Form

npm install react-hook-form

We will use this later when we build our Login, Registration and other forms.

Open package.json and verify that the dependencies have been added.

The three dependencies specified for this onboarding lab are Bootstrap, React Router and React Hook Form.

Task 2: Configure Bootstrap

Open : src/main.jsx

Add the Bootstrap CSS import at the top and Save the file

import 'bootstrap/dist/css/bootstrap.min.css';

Bootstrap is now globally available throughout our React application.

Task 3 : Define the ShopKart Project Structure

Inside the src folder, create : components and pages folder

Task 4 : Create Basic Components

Inside components folder create : Navbar.jsx and Footer.jsx

For now, add a simple component to Navbar.jsx and Footer.jsx

import React from 'react'

export default function Navbar() {
  return (
     <nav>ShopKart Navbar</nav>
  )
}

import React from 'react'

export default function Footer() {
  return (
    <footer>Footer</footer>
  )
}

Task 5 : Create Basic ShopKart Pages

Inside pages folder create :

Home.jsx

Product.jsx

Cart.jsx

Login.jsx

Register.jsx

Create a simple content for each page

import React from 'react'
function Home() {
  return (
    <div>ShopKart Home</div>
  )
}
export default Home

import React from 'react'
function Products() {
  return (
    <div>ShopKart Products</div>
  )
}
export default Products

import React from 'react'
function Cart() {
  return (
    <div>Cart</div>
  )
}
export default Cart

import React from 'react'
function Login() {
  return (
    <div>Login</div>
  )
}
export default Login

Task 6 : Setup Basic Routing

Open main.jsx and import BrowserRouter

import { BrowserRouter } from "react-router-dom";

Wrap <App /> with BrowserRouter

import './index.css'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </StrictMode>,
)

Task 7 : Define Home and Products Routes

Open App.jsx and import :

import { Routes, Route } from "react-router-dom";

Import pages

import Home from "./pages/Home";
import Products from "./pages/Products";

Run the ShopKart Application

Open : http://localhost:5173

Open : http://localhost:5173/products

We are done with this lab. The latest source code has been uploaded to GitHub. You can access the latest commit using the link below:

Github_repository_link

Git Push

git push origin branchName

Great job!

ShopKart now has a clean and scalable foundation with the essential libraries, pages, components, and basic navigation in place.

Checkpoint

Next-Lab Preparation

Module:

1) React Introduction & JSX

2) Deep Dive into Component & Props

React lab 3

By Content ITV

React lab 3

Content ITV PRO

This is Itvedant Content department

Building the ShopKart Home Page

React lab 3

React lab 3

Content ITV PRO

More from Content ITV