This app was created as a submission for Dribbble's "Scaling Design Systems" course, and demonstrates several processes and workflows that span from concept design, app development, design token & components creation, npm code packages, and supporting documentation.
This repo contains the source code for the Shuddle app, as well as a live demo build that demonstrates real world use of the design system components created for the course. This React app was built with custom components and theming on top of Chakra UI.
Wayfinder is the name given to the design system that houses all of the design and code documentation created for the Shuddle app. It is hosted on zeroheight, and serves as the source of truth for how best to get started, use, and create designs using the resources provided within.
Notable highlights include:
- Installation instructions and dependencies
- Foundational guidelines like branding, colours, typography, and Icons
- Component design and code snippets for:
- (L1) components like buttons and input fields
- (L2) components like Cards and Navbars
- Patterns such the Travel Search and Travel Booking cards.
The custom components and theming codebase for Shuddle is deployed as a sharable npm package for all to use or modify. For more information, please visit the Wayfinder Documentation > Getting Started section.
The original concept and high fidelity designs for Shuddle were created in Figma. The link also contains UI Kit components for use by designers, and additional designs for the "legacy" IPTS (Interplanetary Travel Syndicate) screens that the Shuddle screens are based from.
A case study article I published on Dribbble showing the highlights of this project and the work involved.
You can learn more about me and the random projects I work on via my personal website at kevliu.me.