Git Product home page Git Product logo

furniture-store-vue-node-mongo-'s Introduction

Furniture store


About:

Foreword

Hello) This application was created as an online store, with which you can buy any furniture products, search for the ones you need by name, choose the quantity and color, place an order without leaving your home. At the moment, upholstered furniture, sofas, armchairs and chairs are available, in the future it is planned to expand the range of products.

Technology stack:

This application was planned to be done exclusively on the client side, but as my plans grew, it became necessary to develop a small backend and database, besides, this is a good experience for me in terms of understanding how it all works in practice :)

So, the product development was carried out using the following technologies and dependencies:

Client side:

  • Vue.js (framework and main tool for developing the clint part)
  • Vuex (global storage in which we can store data for reuse in other components)
  • Vue-router ( router with which we can create single page applications)
  • Swiper (small library for creating dynamic sliders)
  • persistedstate (to save data to localstorage)

Server side:

  • Node.js
  • Express (web framework for creating the server side of the application on the Node.js platform, you can run the server, send queries to the database and generate api)
  • Mongodb (Lightweight, document-oriented database)
  • Mongoose (library that simplifies interaction with the database)

Appearance and Functionality:

Main page:

mainPage

Here we can see the main page, a minimalistic design (don't forget that the application is still under development and will be developed and added new features), a header with a logo, several links and functional icons that allow you to log in or go to the shopping cart

mainPageBottom

Some parts of the body and a footer containing a logo and some links containing information about the site as well as social networks.

Store page:

storePage

Page with currently available products, we can view the entire product list, name, type and price

storePageFilter

You can also use filters to make it easier to find the desired products, you can filter the product by price or type

storePageSearch

Also, if the filters are not effective, you can use the usual search by entering the name of the desired product:)

Product page:

productPage

By clicking on "choose options" on the store page, you can get to the page of the selected product and see in more detail its characteristics, appearance and description

productPageQuantity

We can also determine the number of products that we want to add to the cart

Cart page:

cartPage

Finally, we can go to the cart and see the list of selected items, the price for the total quantity of one item and the price for all items in the cart, we can also delete any products and finally checkout in the store.

Data API:

dataBase

Also attached is the api of the database I created


Documentation & links:


Notes

This project is still in development, there are a list of code elements that should be improved and fixed. A lot of functionality is to be added in the future, there are a lot of ideas. I plan to add a JWT token to the server side and develop an advanced user authorization system with permission separation. Thank you very much for your attention, this is my first project of this size that I am working on alone. Below will be instructions for running the application and a link to the old repository and the history of previous commits (the old repository is also on my Bitbucket account)

My old repo :)


Project server setup

Open terminal and go to server folder

cd server

Install all dependencies for server

npm install

Run server

npm run dev

Open new terminal and go to client side

cd client

Install all dependencies for client

npm install

Run client side

npm run serve

Open and enjoy for application

go to http://localhost:8080/ in browser

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.