Table of Contents
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".
Before cloning and using this application, you'll need to install these things on your computer:
- Node.js: 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: 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: 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: You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
You can install this application by cloning this repository into your current working directory:
git clone https://github.com/theEmperorofDaiViet/bnb-listing.ts.gitAfter cloning the repository, you can open the project by Visual Studio Code.
npm install
npm run serve
npm run build
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/
npm run lint
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.
Our app looks like this:
You can contact me via:
