DEV Community

Cover image for Exploring KendoReact by building a Gmail web clone
Vivien Ogoun
Vivien Ogoun

Posted on

Exploring KendoReact by building a Gmail web clone

This is a submission for the KendoReact Free Components Challenge.

What I Built

I developed a project that replicates the user interface (UI) of Gmail using React and KendoReact components. This focuses solely on mirroring Gmail's visual design elements, such as layout, color schemes, typography, and iconography, to provide users with a familiar and intuitive interface. The project does not incorporate Gmail's functional features like email composition, sending, or receiving.​

This project demonstrate the versatility of KendoReact in recreating complex, real-world interfaces.

Demo

Link to app

Image description

Github repo

KendoReact Experience

In developing the Gmail UI clone, I leveraged several KendoReact components to accurately replicate Gmail's interface:​

  • AppBar: Used to create the top navigation bar, providing a consistent and responsive header across the application. ​

  • Drawer: Implemented for the left-side navigation panel, allowing users to access different mail categories and labels seamlessly.​

  • ListBox: Employed to display the list of emails, enabling selection and interaction with individual email items.

  • Window: Utilized to replicate the email composition experience. This component enabled the creation of a window, closely mirroring Gmail's compose email functionality

  • Button: Utilized for various actions such as composing a new email, with options to include textual content, predefined icons, or custom elements. ​

  • TextBox: Used in the compose email window to allow users to enter inputs. ​

  • Tooltip: Added to provide additional information when users hover over specific UI elements, enhancing usability. ​

  • Avatar: Displayed user profile picture in the AppBar, contributing to a more personalized and recognizable interface.​

  • SVG Icons: Integrated in the left-side navigation panel, ensuring a visually consistent experience.

By integrating these KendoReact components, I was able to efficiently recreate Gmail's user interface, ensuring responsiveness and a professional appearance.

Top comments (3)

Collapse
 
boynovska profile image
Antoniya

Great work @vivien_ogoun . I hope you enjoyed it, too. I am Toni and I am the Product Manager of KendoReact. It would be very helpful if you can share your feedback our product in a quick 15 min chat. Let me know at antoniya.boynovska@progress.com

Collapse
 
nazim_akkal_a6c14939d5955 profile image
nazim akkal

good luck

Collapse
 
vivien_ogoun profile image
Vivien Ogoun

Thanks