emunhoz / find-movies

Find movies

Demo: https://find-movies-app.vercel.app/

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

Name	Description
Storybook	Storybook with components
Design tokens	Design tokens
Front end app	Find movies

⚠️ Requirements

• Node
• Yarn
• Lerna

You'll need to create a .env file inside packages/app with the value below:

// packages/app/.env

REACT_APP_API_KEY=HERE_YOUR_API_KEY

Link to get your api key: http://www.omdbapi.com/apikey.aspx

🚀 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/app :

  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/app	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/app) 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