Coffee Warehouse Dashboard Application

The Coffee Warehouse sample app showcases React UI components such as a Data Grid, Charts, Scheduler and more into one single dashboard. It was built following the same principles and quality standards you would use when building an app for production, so make sure you take a peek at the source code as you can probably learn a thing or two.

The Coffee Warehouse Sample App was created with KendoReact, a professionally built commercial UI library. To try out the components used in this app, you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

How to Run the Demo

Whether you are looking for examples how to use KendoReact in applications, or for a starting point for your own dashboards, head over to the live Coffee Warehouse React Application. You can find the application's source code on GitHub. 

To play with the demo and see how it’s built, you may want to run it locally:

  1. Clone or download the source code from GitHub.
  2. Install the required dependencies via npm install --save.
  3. Make sure you have activated your license
  4. Use npm start or yarn start command to start the application.
  5. Open http://localhost:3000 to view it in the browser.

About the App

This application was created following the best practices of building with KendoReact components and has a clean structure, which makes it a fantastic learning resource. You can see how easy it is to set up complex components such as the Data Grid (Table), Charts, Scheduler or Forms. You will also find examples for handling the connections between the components. For example, how to set up the Chart type based on button selection, or how to save a newly uploaded avatar in your global user settings.

Styling KendoReact Components with Ease

To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the KendoReact Default Theme to make our components stand out and look great. 

For more information on how to add one of the themes to your project, refer to the article on using the KendoReact themes in React projects. 

If you're interested in applying more styling, How to Add Custom Styles to KendoReact Components with Sass is another helpful resource.

Easier Collaboration with Your Designers

To enable a smooth and trouble-free collaboration between designers and developers, we created three UI Kits for Figma. These kits supply your designer with assets that match the KendoReact UI components at your disposal. Matching building blocks on both sides - design and development - guarantee the smooth implementation of the design.

Application for a Global Audience 

Globalization is a process which combines the translation of component messages (localization) with their adaptation to specific cultures (internationalization). In this demo application, we wanted to showcase how globalization comes out-of-the-box with our UI components. Use the Language DropDown menu in the upper right corner to see this in action.