Scheduling Component

The Scheduling Component is a generic project built to provide a clean and fast schedule view from professionals that offer services by the hour. Built with a responsive design, this component can easily adapt to any application regardless of the target device.

The component provides a list of available schedules by professionals, allowing the user to schedule multiple different times for each selected professional. Schedules are available for each day of the week, keeping stored the user selections for each day. The user schedule process can be followed on the overview card, that can be expanded to a full view of the scheduling.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. Additionally, other standards heavily relied on include ES Modules and dynamic imports which have proven to replace traditional bundlers which add unnecessary complexities and run-time JavaScript.

App Structure

The main component of the project is the AppScheduling, located at src/components/app-scheduling.tsx. AppScheduling will be responsible for calling and managing data to its children components:

• src/components/date-picker;
• src/components/professional-picker;
• src/components/schedules-overview;
• src/components/time-picker.

The interfaces and classes of the project responsible for the objects type support are located in the src/models folder.

The folder _src/utils it contains utility functions that will handle generic problems in many places of the project.

Getting Started

Clone this repo to a new directory:

git clone https://github.com/petrusxz/scheduling.git
cd scheduling

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Check out Stencil's docs here.