DEV Community

Maryam Keshavarz
Maryam Keshavarz

Posted on

Amazon clone javascript bootstrap jquery handlebar Node.js MongoDB JWT step 1

#javascript #node #expressjs

1- For quick start in gitbash into your selected folder type below command for making a basic express node.js project that use handlebars for UI:
express projectName --hbs
2- Open your project on VS code and with: yarn add command add all dependencyies and libraries to your project
Alt Text
3-now with: yarn start command your project should be run on http://localhost:3000/ address on the browser:
Alt Text
4- handlebar projects have a layout page that can show all pages in the body of main layout page:

{{{body}}}
Enter fullscreen mode Exit fullscreen mode

Actually body renders all html codes from other .hbs files according to route files:
Alt Text
for example for homepage localhost:3000/ in routes folder on index.js file we have below code:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
Enter fullscreen mode Exit fullscreen mode

5-For render output content from router in handlebar files we use:

{{variable-name}}
Enter fullscreen mode Exit fullscreen mode

Alt Text
6-For using bootstrap library add bootstrap to layout.hbs for use bootstrap before your style.css in project
add these lines:

 {{!-- add bootstrap on header before stlye.css--}}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}
{{!-- add bootstrap after body--}}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}
Enter fullscreen mode Exit fullscreen mode

7- for using jquery have to add jquery link on the bottom of body in layout page:

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

Alt Text

8-make partial folder on view folder for common part on all pages like header and footer and put header.hbs or footer.hbs files on it we can use bootstrap template for make them: https://getbootstrap.com/docs/4.3/components/alerts/

9-for add partial files to layout page should install express-handlebars with below command: yarn add hbs and add below code to app.js file to use it:

const hbs = require('hbs');
//under view engine setup part:
hbs.registerPartials(__dirname + '/views/partial');
Enter fullscreen mode Exit fullscreen mode

Alt Text
I made a copy of bootstrab navbar and footer and changed them for my project and then wrote my navbar and footer code for your review:

{{!-- footer page --}}
<footer class="page-footer font-small mdb-color pt-4  bg-dark text-white">

    <div class="container text-center text-md-left">

        <div class="row text-center text-md-left mt-3 pb-3">
            <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Introduction: </h6>
                <p>This is Amazon clone project. Inspired by World The Biggest E-commerce site, Amazon.com. This is a
                    project for Geogria Tech Coding Camp Courework. The copyright of product images used in this
                    project is owned by Amazon.com</p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Members</h6>

                <p>
                    <a href="https://github.com/sandy8111112004">Ming Shiuan Tsai</a>
                </p>
                <p>
                    <a href="https://github.com/tnguyen303">Tri Nguyen</a>
                </p>
                <p>
                    <a href="https://github.com/kmaryam27">Maryam Keshavarz</a>
                </p>
                <p>
                    <a href="https://github.com/moz5691">Chan Ho Ahn</a>
                </p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Instuctors</h6>
                <p>
                    <a href="https://github.com/hannahpatellis">Hannah Patellis</a>
                </p>
                <p>
                    <a href="https://github.com/CjJordan">Cj Jordan</a>
                </p>
                <p>
                    <a href="https://github.com/asalmeron3">Arturo R Salmeron</a>
                </p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold"></h6>
                <p><i class="fa fa-home mr-3">Github </i></p> <a href="https://github.com/moz5691/amazon_clone">https://github.com/moz5691/amazon_clone</a>
                <hr>
                <p><i class="fa fa-at mr-3">Heroku</i></p>
                <a href="https://amazon--hubblepuff.herokuapp.com/">https://amazon--hubblepuff.herokuapp.com/
                </a>

            </div>

        </div>

        <hr>
        <div class="row d-flex align-items-center">
            <div class="col-md-7 col-lg-8">
                <p class="text-center text-md-left">© 2018 Copyright:
                    <strong>Ming Shiuan Tsai, Maryam Keshavarz, Tri Nguyen, Chan Ho Ahn</strong>
                    </a>
                </p>

            </div>
        </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

and for top navbar:

{{!-- navbar placing on top --}}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand pull-left" href="/"><img id="amazon-logo" src="/images/Amazon-icon.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <form class="form-inline my-2 my-lg-0 mr-auto" method="POST" action="/inventory/search" method="POST">
    <select class="form-control" id="departmentSelect" name="departmentSelect">
      <option value="All">All Departments</option>
      <option value="Book">Books</option>
      <option value="Music">Music</option>
      <option value="Food">Food</option>
      <option value="Toy">Toys</option>
      <option value="Sports">Sports</option>
      <option value="Electronics">Electronics</option>
      <option style="border-bottom: 1px solid black" value="Clothing">Clothing</option>
    </select>
    <input class="form-control" type="search" placeholder="Search" aria-label="Search" name="searchQuery" style="margin:0;">

    <button class="btn searchBtn" type="submit"><i class="fas fa-search"></i></button>
    {{!-- <button class=" mr-sm-2 btn btn-outline-success my-2 my-sm-0 searchBtn" type="submit"><i class="far fa-search"></i></button>
    --}}
  </form>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">

        <a class="nav-link" href="/inventory/1">Products</a>

      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Login
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

          <a class="dropdown-item" href="/login"> {{#unless reviewer}}Login{{/unless}}</a>
          <a class="dropdown-item" href="/inventories/{{reviewer}}">Seller Account</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </li>
      <li class="nav-item">
        {{#if reviewer}}
        <p class="text-light ml-4">Hello, {{reviewer}}</p>
        {{/if}}
      </li>
    </ul>

  </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

10- With below command on layout page we can add our navbar or header nad footer to main page:

 {{> navbar}} {{{body}}} {{> footer}}
Enter fullscreen mode Exit fullscreen mode

Alt Text
Alt Text

Top comments (0)

Read next

anwarhossain1 profile image

Why Strong DSA Knowledge is Essential for Software Engineers

Anwar Hossain -

amaresh_adak profile image

Creating a Dynamic Product Showcase Carousel with React and Tailwind CSS

Amaresh Adak -

vjygour profile image

Understanding the Difference Between package.json and package-lock.json

Vijay Kumar -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -