bottle

A webapp with focus on creating and composing components. The project used hardcoded resources for tokens, interface and types in place of autogenerated content from backend/designsystem.

Worktime: ~18h

Folder structure

Folder	Description
dist	Output folder for build
public	Static content
src/components	All composed components
src/helpers	Shared helper methods
src/interfaces	Interfaces/type (would be autogenerated from the backend)
src/tokens	Design tokens (would be autogenerated from designsystem)
src/typography	Shared text components

---

Setup

Prerequisites

Install npm (or install Node):

curl -L https://www.npmjs.com/install.sh | sh

Install dependencies

npm ci

Run development server

Serves the app at localhost:3000:

npm run start

Build app

Outputs app in dist folder:

npm run build

---

Goals and TODOs

Goals

Having the tools and structure to create and compose new components was the main goal. The use of the typography componenets is a great example of how both tokens and typing makes easy-to-understand and reusable components. Time was also used on creating animations with react-spring, which is based on physics variable more than a timeline, more so on implmenting propper routing or handling data in this demo. Notice that some tokens have been copied from another project (so I didn't have to create color theme) and that icons was fetched as free-use resources.

TODOs

The main parts missing is state management (Redux or Recoil), propper routing, Storybook and a common component structure. Each component should be placed in a folder along with a story, custom interface/types, helpers and mock data. Component folders would be split between a generics and features-folders to seperate generic components, for composing, and feature components, for tailor-made components made of compositions. Helpers/hooks for media queries would also be a great addition to make it simpler to get help with breakpoints or feature detection. As for features; the grid could use some work, by filling the screen with items to just under below-the-fold, and then animating every row of items entering the screen on scroll.

Notice: The url does not change, so state is lost when reloading. Submitting a new bottle does nothing as no database is hooked up.