Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/theemperorofdaiviet/eat-commerce.ui

The frontend of eat-commerce - a simple food delivery website.
https://github.com/theemperorofdaiviet/eat-commerce.ui

bootstrap css3 html5 javascript power-bi stripe vue3 vuejs

Last synced: 11 days ago
JSON representation

The frontend of eat-commerce - a simple food delivery website.

Awesome Lists containing this project

README

        

Table of Contents



  1. About The Project



  2. Getting Started


  3. Key Features

  4. Usage

  5. Contact



# About The Project
The frontend of [eat-commerce](https://github.com/theEmperorofDaiViet/eat-commerce.git) - a simple food delivery website.

## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Vue.js][Vue.js-shield]][Vue.js-url]
* [![Bootstrap][Bootstrap-shield]][Bootstrap-url]
* [![Stripe][Stripe-shield]][Stripe-url]
* [![Power BI][Power BI-shield]][Power BI-url]

(back to top)

# Getting Started

## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [npm](https://docs.npmjs.com/about-npm): the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.
* [Vue](https://vuejs.org/): a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
* [Power BI](https://powerbi.microsoft.com/en-us/): a business analytics service provided by Microsoft that lets you visualize your data and share insights. It converts data from different sources to build interactive dashboards and Business Intelligence reports.

## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/eat-commerce.ui.git
```
After cloning the repository, you can open the project by Visual Studio Code.

## Project Setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

(back to top)

# Key Features

## Customer
* Register
* Log in/Log out
* Browse products by name or category
* View product details
* Add a product to cart
* Place and pay an order (powered by [*Stripe*](https://stripe.com/))
* Ratings and comments
* View purchase history
* Add a product to bookmark
* Chat Plugin (powered by [*Facebook Messenger*](https://www.facebook.com/business/help/1524587524402327))

## Merchant
* Manage categories
* Manage products
* View all orders
* View statistics and data visualization (by [*Power BI*](https://powerbi.microsoft.com/en-us/))

(back to top)

# Usage

## Homepage



## Customer



## Merchant



(back to top)

# Contact

You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: [email protected]
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]



(back to top)

[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/
[Vue.js-shield]: https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D
[Vue.js-url]: https://vuejs.org/
[Bootstrap-shield]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
[Bootstrap-url]: https://getbootstrap.com/
[Stripe-shield]: https://img.shields.io/badge/Stripe-626CD9?style=for-the-badge&logo=Stripe&logoColor=white
[Stripe-url]: https://stripe.com/
[Power BI-shield]: https://img.shields.io/badge/power_bi-F2C811?style=for-the-badge&logo=powerbi&logoColor=black
[Power BI-url]: https://powerbi.microsoft.com/en-us/

[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo