/divano

Primary LanguageJavaScript

DIVANO 🛋️

Live link : https://divano.herokuapp.com/

Divano is an e-commerce React website with rest API and fake data stored in a relational SQL database that presents furniture products and allows users to add products to their cart, delete cart items, and control quantity.

Team members ❤️

  • Ahmad Sabbah.
  • Asmaa Al-Najar.
  • Mohammad Rayyes.
  • Nadia Tamimi.

Project Description 📄

Divano is an app that sells couch furniture, the client signs up or logs in to his page and can go to see the couches he wants and add them to the cart, also buy them if he wants.

User Stories: 📕

User is able to search the couch he want, add to cart and buy it . As a User I can:

  • Search about the couch I want.
  • Sign up or log in to my account.
  • Go to the furniture page and see the couches.
  • Click on the couch and see its details.
  • Add to the cart.
  • See my cart and add quantity.
  • To see the total price.

User Journey 🗺️

In our journey to divano store, we will start with the home page, that contains in the top page a nave bar with the logo, home, furniture, about us, contact us and a button to log in .you will also find some product we display in our page and a "who we are" division to know who we are. and a footer with our contacts and it will be displayed in every page.

![image alt](https://i.imgur.com/twECi3y.jpg "title" =200x) ![]( https://i.imgur.com/3qxLx3m.jpg "title" =300x) ![](https://i.imgur.com/eknUSi1.jpg "title" =200x)

We will start with the log-in button. when we click on it, it will display a form with an email, password input, and two-button to cancel or log in. at the end of the form, you will find a signup link in case you don't have an account you can click on it. after you click on it you will find four inputs the user name, email, password, confirm password, two-button the cancel and the signup button, and a link at the end of the form in case you remember you have an account to go to the login form and log in. when you click on sign up you will log in immediately and you will have an account so congratulation.

![](https://i.imgur.com/y23lM6m.jpg "title" =350x) ![](https://i.imgur.com/jJaA0sK.jpg "title" =310x)

After you log in you will find the home page with a cart in the navbar to see your purchases.

When you click on the furniture in the nav bar you will go to the furniture page and see all the couches our page have and you can see the details of every couch the colors, name, price, and add to cart button, you can also click on every couch and it will take you at a page with all the details of the couch and a bigger photo of the couch and you can change the color and see it.

In case you like the couch and you want to buy it you can click on add to cart button that will add it to the cart.

If you want to see your purchases you can click on the cart symbol at the top in the navbar and he will display your purchases you can also increase the quantity for every couch you have in your cart session and decrease it and it will update on the total you can also delete the couch if you want in case you change your mind, you will find the total of all product at the end of the cart page and a checkout button to buy your lovely couches.

HOPE YOU HAD A NICE JOURNEY ♥️

Running the project locally: 📥

Developing in Docker

To mount the project in a Docker container for development, use:

docker run --rm -i -t \
  --name davino \
  -v $(pwd):/app \
  -w /app \
  -p 5100:3000 \
  node:14 bash

Tech Stack: 📃

  • HTML
  • CSS
  • JavaScript
  • NodeJs
  • Express
  • Database
  • PostgreSql
  • React JS
  • React hooks
  • Material ui library