Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/theemperorofdaiviet/bnb-listing.ts

A simple app that surfaces a single web page responsible for displaying a list of listings, built with Vue's Composition API, rewritten by TypeScript.
https://github.com/theemperorofdaiviet/bnb-listing.ts

bulma composition-api css3 dark-mode expressjs html5 javascript listings nodejs notifications provide-inject reactive typescript vue3 vuejs

Last synced: about 1 month 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, rewritten by TypeScript.

Awesome Lists containing this project

README 

        





  Table of Contents

  
    

        
  1. 

          About The Project

          

        
    2. 

        
  2. 

          Getting Started

          

        
    3. 

        
  3. Key Features
    4. 

        
  4. Usage
    5. 

        
  5. Contact
    6. 

      



# 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**, rewritten by **TypeScript**.



Based on chapter 11 of the book "**Fullstack Vue 3**".



## Built With

* [![HTML5][HTML5-shield]][HTML5-url]

* [![CSS3][CSS3-shield]][CSS3-url]

* [![JavaScript][JavaScript-shield]][JavaScript-url]

* [![TypeScript][TypeScript-shield]][TypeScript-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]



(back to top)



# 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.ts.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/).



(back to top)



# 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.



(back to top)



# Usage

Our app looks like this:





    





    




(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/

[TypeScript-shield]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white

[TypeScript-url]: https://www.typescriptlang.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