Demo

Front end app: https://spotifood-ten.vercel.app/#/

Storybook: https://spotifood-components.vercel.app/?path=/story/components-button--primary

Figma (Design by me): https://www.figma.com/file/OIo3gx7ydjfIOC6oSI9A0a/Spotifood

Features

• Login page
• Spotify Authorization Scopes
• Home page with Spotify featured playlist
• SWR - HTTP cache invalidation strategy - See more at SWR
• Search input
• Filter options
• Private Routes
• Mobile first

Todo

• Integration tests
• e2e tests

About this app

I started building this app just following some business rules (#features) and the first thing that I decide to do was build pages, components, design tokens from scratch on Figma. See the final implementation here.

Everything that I design was thinking in the best way to build a modular code in the front end project.

See design token object theme code here: Design tokens

See components code here: Componens

See pages code here: Pages

Preview

Getting started

This is a monorepo repository using Lerna, Commitzen and Conventional Commits to maintain and manage component versions and for documentation, we use Storybook.

🛠 Stack

ReactJS	Yarn	Lerna
Jest	Testing Library	Styled Components

🌐 Links

Storybook components: https://spotifood-components.vercel.app/?path=/docs/components-button--primary

Front end app: https://spotifood-ten.vercel.app

⚠️ Requirements

• Node
• Yarn
• Lerna

🚀 Quick start

In the root folder run following commands (all the below commands need to run on root folder):

Install all dependecies with:

  yarn 

To run the front end application @monorepo/cra :

  yarn start

To run all components with storybook @monorepo/ui-components :

  yarn storybook

🗂 Monorepo structure

Package	Description
@monorepo/design-tokens	Design tokens (colors, typography, attributes...)
@common/**	Common functions, images, lints (eslint, stylelint, prettier) and other generics setup
@monorepo/ui-components	React library components with stories
@monorepo/cra	Front end application create with create-react-app

🚨 Code standard

• JavaScript Standard Style - Javascript styleguide
• Prettier - Code formatter
• ESLint - Lint to quickly find problems
• Stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles

⌨️ Commands

Command	Description
yarn	Install all dependencies
yarn start	Run frontend app
yarn test:ci	Run all tests
yarn storybook	Run storybook doc components
yarn watch:tokens	Watch design-tokens package
yarn watch:components	Watch ui-components package
yarn build-app	Build of front app(@monorepo/cra) and generate a directory with all assets in the following path: packages/cra/build
yarn build-storybook	Build of storybook with components(@monorepo/ui-components) and generate a directory with all assets in the following path: packages/ui-components/public