Book Shop App with React and Bootstrap | IndianTechnoEra - IndianTechnoEra
Latest update Android YouTube
Home
React JS
ReactJS

Book Shop App with React and Bootstrap | IndianTechnoEra

Create a online shopping page with React components that will consist in a Navigation Bar at the top of the page, a Main section in the middle that wi

  

Book Shop App with React and Bootstrap | IndianTechnoEra

Aim:

Create a online shopping page with React components that will consist in a Navigation Bar at the top of the page, a Main section in the middle that will contain all the shopping item’s information, and a Footer at the bottom of the page with a little information about the page, like social network icons and the copyright information.

Creating a simple book shop using react and bootstrap 

Component 1: Index Part

index.js

import ReactDOM from 'react-dom/client'I
import BookShop from './BookShop'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <>

    <BookShop/>

  </>

)



Component 2: BookShop App Part

BookShop.js

import NavBarfrom './NavBar

import SlideBar from './SlideBar

import ShowBookAPI from './ShowBookAPI'

import Footer from './Footer'I
import './BookShop.css'

function BookShop() {

  return (

    <>

      <NavBar/>

      <SlideBar />

      <center>

        <ShowBookAPI />

      </center>
      <Footer />
    </>
  )
}

export default BookShop


Component 3: Navbar Part

NavBar.js

function NavBar() {

  return (

    <>

<nav class='sticky navbar navbar-expand-lg bg-light'>

    <div class='container-fluid'>

        <a class='navbar-brand' href='#'>

            BKart

        </a>

        <button class='navbar-toggler' type='button' data-bs-toggle='collapse'

            data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent'

            aria-expanded='false' aria-label='Toggle navigation'>

            <span class='navbar-toggler-icon'></span>

        </button>

        <div class='collapse navbar-collapse' id='navbarSupportedContent'>

            <ul class='navbar-nav me-auto mb-2 mb-lg-0'>

                <li class='nav-item'><a class='nav-link' href='#'>Biography</a></li>

                <li class='nav-item'> <a class='nav-link' href='#'>Poetry</a></li>

                <li class='nav-item'><a class='nav-link' href='#'>Mystery</a></li>

                <li class='nav-item'><a class='nav-link' href='#'>Programming</a></li>

                <li class='nav-item dropdown'><a    class='nav-link dropdown-toggle'

                                                    href='#'

                                                    role='button'

                                                    data-bs-toggle='dropdown'

                                                    aria-expanded='false'>Movies</a>

                        <ul class='dropdown-menu'>

                            <li> <a> {' '}</a></li>

                            <li><a class='dropdown-item' href='#'>Sci-Fi</a></li>

                            <li><a class='dropdown-item' href='#'>Horror</a></li>

                            <li><a class='dropdown-item' href='#'>Comedy</a></li>

                            <li><a class='dropdown-item' href='#'>Drama</a></li>

                            <li><a class='dropdown-item' href='#'>War</a></li>

                            <li><p class='dropdown-divider'> </p></li>

                            <li><a class='dropdown-item' href='#'>Others</a></li>

                        </ul>

                </li>

                <li class='nav-item'></li>

                <br></br>

            </ul>

            <form class='d-flex' role='search'>

                <input  class='form-control me-2'

                        type='search'

                        placeholder='Search'

                        aria-label='Search'></input>

                <button class='btn btn-outline-success' type='submit'>

                    Search

                </button>

            </form>

        </div>

    </div>

</nav>

 

      

    </>

  )

}

export default NavBar



Component 4: Slidebar Part

SlideBar.js

import b1 from './img/b1.jpg'

import b2 from './img/b2.jpg'

import b3 from './img/b3.jpg'

function SlideBar () {

  return (

    <>

      <div

        id='carouselExampleDark'

        class='carousel carousel-dark slide'

        data-bs-ride='carousel'

      >

        <div class='carousel-indicators'>

          <button

            type='button'

            data-bs-target='#carouselExampleDark'

            data-bs-slide-to='0'

            class='active'

            aria-current='true'

            aria-label='Slide 1'

          ></button>

          <button

            type='button'

            data-bs-target='#carouselExampleDark'

            data-bs-slide-to='1'

            aria-label='Slide 2'

          ></button>

          <button

            type='button'

            data-bs-target='#carouselExampleDark'

            data-bs-slide-to='2'

            aria-label='Slide 3'

          ></button>

        </div>

        <div class='carousel-inner'>

          <div class='carousel-item active' data-bs-interval='10000'>

            <img class='d-block w-100' src={b1} alt='First slide'></img>

            <div class='carousel-caption d-none d-md-block'>

              <h5>(1)</h5>

            </div>

          </div>

          <div class='carousel-item' data-bs-interval='2000'>

            <img class='d-block w-100' src={b2} alt='First slide'></img>

            <div class='carousel-caption d-none d-md-block'>

              <h5>(2)</h5>

            </div>

          </div>

          <div class='carousel-item'>

            <img class='d-block w-100' src={b3} alt='First slide'></img>

            <div class='carousel-caption d-none d-md-block'>

              <h5>(3)</h5>

            </div>

          </div>

        </div>

        <button

          class='carousel-control-prev'

          type='button'

          data-bs-target='#carouselExampleDark'

          data-bs-slide='prev'

        >

          <span class='carousel-control-prev-icon' aria-hidden='true'></span>

          <span class='visually-hidden'>Previous</span>

        </button>

        <button

          class='carousel-control-next'

          type='button'

          data-bs-target='#carouselExampleDark'

          data-bs-slide='next'

        >

          <span class='carousel-control-next-icon' aria-hidden='true'></span>

          <span class='visually-hidden'>Next</span>

        </button>

      </div>

    </>

  )

}

export default SlideBar


Component 5: JSON API Part

BookAPI.json

  [

    {

        "img": "../img/b (1).webp",

        "book": "Vivekanand Autobiography",

        "author": "Vivekanand",

        "year": "2020",

        "des": "Life of Vivekananda and the Universal Gospel"

    },

    {

        "img": "../img/b (2).webp",

        "book": "The Secret",

        "author": "Vivekanand",

        "year": "2020",

        "des": "The Secret written by Rhonda Byrne."

    },

    {

        "img": "../img/b (3).webp",

        "book": "Spirit of India",

        "author": "APJ Abdul Kalam",

        "year": "2020",

        "des": "Spirit of India written by APJ Abdul Kalam "

    },

    {

        "img": "../img/b (4).webp",

        "book": "Telepsychics",

        "author": "Dr. Joseph Murphy",

        "year": "2020",

        "des": "Telepsychics written by Dr. Joseph Murphy."

    },

    {

        "img": "../img/b (5).webp",

        "book": "The Bhagwat Gita",

        "author": "RR Varma",

        "year": "2020",

        "des": "The Bahagwat Git Written by RR Varma."

    },

    {

        "img": "../img/b (6).webp",

        "book": "The Magic",

        "author": "Rhonda Byrne",

        "year": "2020",

        "des": "The Magic written by RHonda Byrne"

    }

    

    ,

    {

        "img": "../img/b (7).webp",

        "book": "The Power of your Subconscious Mind",

        "author": "Dr. Joseph Murphy",

        "year": "2020",

        "des": "The Power of your Subconscious Mind written by Dr. Joseph Murphy"

    },

    

    {

        "img": "../img/b (8).webp",

        "book": "Death an Inside Story",

        "author": "Sadhguru",

        "year": "2020",

        "des": "Death an Inside Story written by Sadhguru."

    },

    {

        "img": "../img/b (9).webp",

        "book": "My Experiments with Truth",

        "author": "MH. Gnandhi",

        "year": "2020",

        "des": "My Experiments with Truth is an Autobiography by Mahatma Gandhi"

    },

    {

        "img": "../img/b (10).webp",

        "book": "Paramhansa Yogananda",

        "author": "Yogi",

        "year": "2020",

        "des": "Paramhansa Yoganda is an Autobiography of Yogi Aditya Nath."

    }

]



Component 6: ShowBookAPI Part

ShowBookAPI.js

import BookData from './BookAPI.json'

function ShowBookAPI () {

  const DisplayBook = BookData.map(data => {

    return (

      <>

        <span class='card'>

          <img src={data.img} class='card-img-top' alt='CartImage'></img>

          <div class='card-body'>

          <button class='card-b'>Add to Cart</button>

            <button class='card-b'>Buy Now</button>

            <div class='card-body'>

              <p class='card-text'>

                <b>{data.book}</b> <br/>

                {data.des}

              </p>

            </div>

            

          </div>

        </span>

      </>

    )

  })

  return <>{DisplayBook}</>

}

export default ShowBookAPI


Component 7: Footer Part

Footer.js

function Footer () {

  return (
    <>
      <div className='fDiv'>
      <div className='footerSocial '>
          <i className='p-1 fs-5  fab fa-facebook-square'></i>
          <i className='p-1 fs-5  fab fa-twitter-square'></i>
          <i className='p-1 fs-5  fab fa-pinterest-square'></i>
          <i className='p-1 fs-5  fab fa-instagram-square'></i>
        </div>
        <h6>© All Right Reserve | BKart</h6>
      </div>
    </>
  )
}

export default Footer;



Component 8: CSS Part

BookShop.css

.navbar{padding:0;margin:0;position:static;background-color:#000;z-index:999}

.dropdown-toggle{z-index:9999;position:absolute}

.nDiv{top:20px;padding:25px}

.container-fluid{background-color:#49f0ff;padding:15px;color:#fff;overflow:hidden;position:sticky;overflow:hidden;z-index:999}

.navbar-nav{font-weight:700;z-index:999}

.navbar-brand{border:2px solid #000;padding-left:50px;padding-right:50px;border-radius:0 10px;background-color:#9122d6;color:#fff}

.navbar-brand:hover{background-color:#ae00ff;color:#fff;box-shadow:4px 4px 5px #000;border:2px solid #fff}

.btn{border-color:#000;color:#000}

.btn:hover{background-color:#ae00ff;border-color:#000}

.fDiv{background-color:#16293d;background-color:#9122d6;padding:15px;color:#fff;font-size:11px;text-align:center;padding:15px;bottom:0;position:fixed;width:100%;z-index:999}

.card-img-top{height:350px;align-items:center;border:2px solid #000;border-radius:15px 15px 0 0;transition:cubic-bezier(0.075,0.82,0.165,1)}

.card-img-top:hover{transition:cubic-bezier(0.075,0.82,0.165,1)}

.card{width:250px;height:530px;position:relative;align-items:center;margin:5px;flex:auto;display:inline-block;border:2px solid #000;border-radius:15px;box-sizing:content-box;overflow:hidden}

.card:hover{cursor:pointer;box-shadow:5px 5px 3px #9122d6}

.card-body{height:auto;background-color:#fff;overflow:hidden}

.card-b{margin:10px;background-color:#6f0aec;align-items:center;padding:5px;border-radius:10px;color:#fff}

.card-b:hover{background-image:linear-gradient(to bottom right,#f40086,#ac21ec);transition:.8s}

.card-text{font-family:'Varela Round'serif;font-size:14px;color:#444;line-height:24px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

.carouselExampleControls{height:100px}

.carousel-inner .carousel-item-right.active,.carousel-inner .carousel-item-next{transform:translateX(33.33%);transition:width 2s}

.carousel-inner .carousel-item-left.active,.carousel-inner .carousel-item-prev{transform:translateX(-33.33%);transition:width 2s}

.carousel-inner .carousel-item-right,.carousel-inner .carousel-item-left{transform:translateX(0);transition:width 2s}

.footerSocial i{cursor:pointer;align-items:center;justify-content:center}

.footerSocial i:hover{color:aqua}

.bookCenter{display:absolute;justify-content:center;align-items:center}

.dropdown-menu{background-color:#03e6ff;position:fixed;z-index:9999}

.sticky{position:fixed;top:0;width:100%}

.carousel{height:min-content;margin-top:50px;z-index:-5}

.card{z-index:-2}



Required Script to Add in Public > index.html

index.html
  <!-- Bootstrap CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 
    <!-- Bootstrap JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
  </script>

  <!-- font-awesome style cdn link-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />



Output:

Book Shop App with React and Bootstrap | IndianTechnoEra
#React JS #ReactJS #ReactJS Practical

Post a Comment

Feel free to ask your query...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.