Project Initialize

package.json

 {
-  "name": "hummartapp",
+  "name": "newapp",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^4.20.5",
+    "bootstrap": "^5.1.3",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.3.1",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "redux-thunk": "^2.4.1",
+    "sass": "^1.51.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.scss";
+import { useEffect, useState } from "react";
+import Navbar from "./Components/Navbar/Navbar";
+import { Route, Routes } from "react-router-dom";
+import Home from "./Screens/Home/Home";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Routes>
+        <Route path="/" element={<Home/>} />
+      </Routes>
+    </>
   );
 }
 

src/App.scss

+$black_color: black;
\ No newline at end of file

src/Components/Navbar/Navbar.js

+import React from "react";
+import {
+  Button,
+  Col,
+  Container,
+  Row,
+  Navbar,
+  NavDropdown,
+  Nav,
+} from "react-bootstrap";
+import style from "./Navbar.module.scss";
+import logo from "../../assets/logo.png";
+import { Input } from "antd";
+import { IoMdCart } from "react-icons/io";
+
+const { Search } = Input;
+
+const MainNavbar = () => {
+  return (
+    <>
+      <div className={style.mainCOntainer}>
+        <section className={style.firstSection}>
+          <p>Delivering Only In Karachi</p>
+        </section>
+        <section>
+          <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
+            <Container>
+              <Navbar.Brand href="">
+                <img src={logo} alt="Hum Mart Logo" />
+              </Navbar.Brand>
+              <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+              <Navbar.Collapse id="responsive-navbar-nav">
+                <Nav className="me-auto">
+                  
+                </Nav>
+                <Nav className="me-auto" style={{width: "70%"}}>
+                <Search
+                    placeholder="input search text"
+                    enterButton="Search"
+                    size="large"
+                  />
+                  {/* <Nav.Link href="#features">Features</Nav.Link>
+                  <Nav.Link href="#pricing">Pricing</Nav.Link> */}
+                </Nav>
+                <Nav>
+                  <Nav.Link href="#deets">More deets</Nav.Link>
+                  <Nav.Link eventKey={2} href="#memes">
+                    Dank memes
+                  </Nav.Link>
+                </Nav>
+              </Navbar.Collapse>
+            </Container>
+          </Navbar>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default MainNavbar;

src/Components/Navbar/Navbar.module.scss

+$black_color: black;
+$white_color: white;
+
+.mainCOntainer{
+
+}
+
+.firstSection {
+    width: 100%;
+    height: 40px;
+    background-color: $black_color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.firstSection p{
+    color: $white_color;
+    margin: 0px;
+    padding: 0px;
+    font-weight: bold;
+    font-size:18px ;
+}
\ No newline at end of file

src/Routes/AppRoutes.js

+import React from 'react'
+
+const AppRoutes = () => {
+  return (
+    <div>AppRoutes</div>
+  )
+}
+
+export default AppRoutes
\ No newline at end of file

src/Screens/Home/Home.js

+import React from "react";
+import MainNavbar from "../../Components/Navbar/Navbar";
+
+const Home = () => {
+  return (
+    <>
+      <MainNavbar />
+    </>
+  );
+};
+
+export default Home;

src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.scss";
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Provider } from "react-redux";
+import store from "./store/store";
+import { BrowserRouter } from "react-router-dom";
+import 'antd/dist/antd.css';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
+      <BrowserRouter>
         <App />
+      </BrowserRouter>
+    </Provider>
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/reportWebVitals.js

-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/store/Reducers/counterReducer.js

+import { createSlice } from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0
+  },
+  reducers: {
+    increase(state) {
+      state.value++
+    },
+    decrease(state) {
+      state.value--
+    }
+  }
+})
+// each case under reducers becomes an action
+export const { increase, decrease } = counterSlice.actions
+export default counterSlice.reducer
\ No newline at end of file

src/store/store.js

+import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
+import thunk from 'redux-thunk'
+import counterSlice from './Reducers/counterReducer'
+
+const store = configureStore({
+    reducer: {
+        counter: counterSlice,
+     } //add reducers here
+})
+
+export default store;