ShopKart Project Onboarding

Business Scenario

Understanding the Need for Proper Project Setup Before Development

To understand the importance of project onboarding, let’s look at a conversation between a manager and an employee.

Manager:
We have created the React application for ShopKart. Can we start building features like products and cart now?

Employee:
Yes, we can start creating components directly.

Manager:
But do we have everything set up? For example, styling, navigation, and form handling?

Employee:
Not yet. We haven’t installed Bootstrap, React Router, or form libraries.

Manager:
If we start development without these, will the project remain organized and scalable?

Employee:
No, it may become difficult to manage as the application grows.

Manager:
So what should be our first step?

Employee:
We should configure all required dependencies like Bootstrap for UI, React Router for navigation, and React Hook Form for managing forms.

Manager:
What about organizing the project?

Employee:
We should define a proper folder structure such as components, pages, services, and routes to maintain clean and structured code.

Manager:
How does this help in the long term?

Employee:
It improves maintainability, enhances code reusability, and supports scalable development.

Manager:
Good. Let’s complete the project onboarding before moving to feature development.

This setup ensures that the application is ready for building features like product listing, cart, and user authentication.

Pre-Lab Preparation

What is React Component Architecture
What is Routing in React
What is Bootstrap
What is Form Handling in React

Task 1: Install Required Dependencies

Open your project in VS Code

Open terminal inside VS Code

(Menu → Terminal → New Terminal)

Install Bootstrap

Run the command:

npm install bootstrap

Bootstrap installation completed

Install React Router DOM

npm install react-router-dom

Install React Hook Form

npm install react-hook-form

Form library installation

Task 2: Configure Bootstrap

Open file:

src/main.jsx

Add Bootstrap import at the top:

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

Bootstrap import added in main.jsx

Task 3: Define Project Domain Structure

Inside src folder, create following folders:

components/
pages/

Folder structure created in VS Code

Create basic files:

Inside components/

Navbar.jsx
Footer.jsx

Inside pages/

Home.jsx
Products.jsx
Cart.jsx
Login.jsx
Register.jsx

Task 4: Understanding BRD

Open main.jsx and wrap App with BrowserRouter

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./router";


ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />

BrowserRouter configured

Open App.jsx and define routes

import { Outlet } from "react-router-dom";
import Navbar from "./Components/Navbar";


function App() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}


export default App;