Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theemperorofdaiviet/bnb-listing
A simple app that surfaces a single web page responsible for displaying a list of listings, built with Vue's Composition API.
https://github.com/theemperorofdaiviet/bnb-listing
bulma composition-api css3 dark-mode expressjs html5 javascript listings nodejs notifications provide-inject reactive vue3 vuejs vuex
Last synced: 20 days ago
JSON representation
A simple app that surfaces a single web page responsible for displaying a list of listings, built with Vue's Composition API.
- Host: GitHub
- URL: https://github.com/theemperorofdaiviet/bnb-listing
- Owner: theEmperorofDaiViet
- Created: 2023-11-21T15:57:34.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-11-27T16:54:06.000Z (about 1 year ago)
- Last Synced: 2024-10-16T19:05:49.586Z (2 months ago)
- Topics: bulma, composition-api, css3, dark-mode, expressjs, html5, javascript, listings, nodejs, notifications, provide-inject, reactive, vue3, vuejs, vuex
- Language: Vue
- Homepage:
- Size: 285 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
# About The Project
A simple app that surfaces a single web page responsible for displaying a list of listings, built with Vue's **Composition API**.
Based on chapter 10 of the book "**Fullstack Vue 3**".
## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Node.js][Node.js-shield]][Node.js-url]
* [![Express][Express-shield]][Express-url]
* [![Vue.js][Vue.js-shield]][Vue.js-url]
* [![Bulma][Bulma-shield]][Bulma-url]
# Getting Started
## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [Node.js](https://nodejs.org/en/download/): a single-threaded, open-source, cross-platform runtime environment for building fast and scalable server-side and networking applications. It runs on Chrome's V8 JavaScript runtime engine, and it uses event-driven, non-blocking I/O architecture, which makes it efficient and suitable for real-time applications.
* [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.
## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/bnb-listing.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
```
### Boot the app
```
npm run start
```
The Node and Webpack servers are now running - watch the console output for instructions. Your entire application is now available at [http://localhost:8080/](http://localhost:8080/)
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# Key Features
When the page loads, a request is made to surface the listings to the user.
If interested, the user can remove a listing by clicking the Remove button in the list item. When a listing is deleted, another request is made to query the updated list of listings, and the deleted listing is now removed from the list.
When a listing has been removed, the user can Reset the list back to its original state.
Through certain actions in the app, a notification message is shown at the top of the list to notify the user that certain actions have been made.
Lastly, the user can select a button labeled Dark Mode to switch the appearance of the app to dark mode.
We will use different ways of creating data in the [store.js](./src/store.js) file:
- v1.0.0: using Vuex
- v2.0.0: Using reactive() + provide/inject
# Usage
Our app looks like this:
# 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]
[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/
[Node.js-shield]: https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white
[Node.js-url]: https://nodejs.org
[Express-shield]: https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB
[Express-url]: https://expressjs.com/
[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/
[Bulma-shield]: https://img.shields.io/badge/Bulma-00D1B2?style=for-the-badge&logo=Bulma&logoColor=white
[Bulma-url]: https://bulma.io/
[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