DEV Community

loading...
Cover image for 10 Helpful JavaScript Demos for your Business

10 Helpful JavaScript Demos for your Business

webixui profile image JavaScript-Webix-UI ・5 min read

There are two ways we can understand the word demo in the IT development. It may be a meeting with the team and the stakeholders to review the sprint in the Scrum methodology. It may also be understood as an example of the product given to a potential customer to attract their attention and check if they need the product and ready to pay for it. In both meanings we talk about some small result of the development process that is used as an example and that can show what the future solution will be capable of.

Using demos in the development process is an effective idea for several reasons:

  • customers see the future product, they know what to expect;
  • the time for the design customization is saved;
  • demos teach customers how to interact with the future application.

In this review, we will focus on the most common types of web apps and resources to find suitable demos for them.

Dealing with files

There is a wide choice of JavaScript libraries and frameworks that offer tools for creating file manager applications for uploading, organizing, and previewing files. Business domain is not limited to any specific topic, as any business needs documents and convenient tools for coping with their flow.

  • JavaScript/HTML5 File Managerview demo
    The following components are used: DataView, Grid, Form, Layout, Menu, Popup, Tabbar, Toolbar, Tree, and Window. The features include uploading and downloading files, creating and deleting folders, grid and list preview modes, sorting and searching files, and keeping track of the space left.
    Alt Text

  • Webix JS File Managerview demo
    This solution includes additional advanced features, such as cards view, split panels view, and media files playback.
    Alt Text

  • Syncfusion File Managerview demo
    It contains built-in searching functionality with which users can search for an item in the current path and its child folder. Besides, features include ascending and descending search order by the name, size, and date, built-in drag-n-drop and multi-item selection.

    Alt Text

Online communication

With the Corona virus people spend much time at home, so it should be easy for them to solve any issue online. The following JS libraries and frameworks offer an opportunity of online chat or messenger.

  • TalkJSview demo
    This real time messaging solution has the following features: channels, groups, and topics, presence, typing, and read indicators, translation, file and location sharing, emojis and text formatting. The UI is pre-built and highly customizable. TalkJS can also boast a robust notification system, that supports push, email, SMS, and desktop notifications.
    Alt Text

  • Webix JS Chatview demo
    The solution includes chat and messenger functionalities. It offers chat rooms, managing channels, and a list of contacts.
    Alt Text

Hotel management

The requirements for the solutions in the domain of hospitality business are quite common. They include booking tickets, rooms, car rentals, online communication. Here is a list of popular demos:

  • DHTMLX JS Scheduler - go to the site
    This is a Google-like calendar component with 10 views for booking appointments. The demo of the hotel reservation can be seen here. It includes room types filtering, different statuses for the rooms and booking, drag-n-drop. Car rental demo is also shown. The features are similar.
    Alt Text

  • Webix Booking Appview demo
    This widget allows everything mentioned: search tickets, book rooms, and rent cars. It supports all browsers, can be integrated with jQuery, Angular, React, Vue.js, and Backbone. The widget is easily customizable.
    Alt Text

  • DayPilot Hotel Room Bookingcode tutorial
    You can create a simple JS booking system with this tool. The features include drag-n-drop, filters, and statuses. The demo is configurable with a DayPilot JS API. The appearance may also be modified using the default theme or custom CSS classes. This app can be used with Angular, React, Vue.js, and jQuery.
    Alt Text

Hospital management

Another trend of the previous year that is going to stay with us for quite some time is online medical service. Social distancing led to the outbreak of various services provided with no contacts. The doctor's help is one of them. Study the list of the helpful demos in this sphere:

  • Bayanno Hospital Management Systemview demo
    Features include appointment module, accounting, staff management, medication management, and other necessary functions for the whole hospital operating.
    Alt Text

  • DXTMLX JS Hospital Management Systemview demo
    The system is built with Suite components: TreeGrid, DatePicker, Tabbar, Layout, Form, and ComboBox. The demo app contains an org chart to visualize a hospital management hierarchy. Advanced features include hospital bed allocation, patient admission, sorting, and filtering.
    Alt Text

  • Webix JS Appointment Appview demo
    This is a template for recording appointments. It can be successfully used in the medical domain for registration, record keeping, and tracking of upcoming visits. Features include registration of visitors, managing the list of visitors, visitor cards record, experts' profiles.
    Alt Text

Online education

This is a domain that unites teachers and students, includes tutoring services, webinars, and various online platforms for conducting seminars and workshops.

  • Online Exam Managementview demo
    This is a WordPress plugin to create and manage online exams for students and publish exam results. You can create exams, set exam centers, duration, date, and start time, as well as setting the tasks of the exam with the desired question types. Manage students and assign roll numbers to each student.
    Alt Text

  • DHTMLX Online Exam Systemview demo
    The solution includes scheduling exams, forms for online examination, picking exam dates, exam filters.
    Alt Text

  • Webix Student/Teachers Dashboard JSview demo
    The dashboard allows teachers to keep records of achievements, track the average student score, compare grades.
    Alt Text

Follow-up

There is a wide choice of various solutions, plugins, and open-source codes to implement one of the ideas mentioned. We have focused on the most convenient ways, keeping in mind the variety of the functions in demand. There are libraries on the market that can implement any of the sophisticated start-up ideas. So the choice depends on the performance required and available resources.

Discussion (0)

pic
Editor guide