This project is an architecture proof of concept with a movie API.
Live: https://movie-sand.vercel.app/
The follow commands is essential to get everything working. First step is install all dependencies. Second, it is needed to setup the link between all packages using lerna. To do so, it is needed to run bootstrap command. After that, each package needs to be compiled.
yarn install
yarn bootstrap
yarn build
cd packages/uikit
yarn storybook
It will open the http://localhost:6006 page with all components.
cd packages/site
cp .env.example .env
yarn start
ATTENTION: you need to fill API_KEY
in .env with your API_KEY otherwise the api won't run.
Yarn Workspaces are a way to set up package architecture.
-
The dependencies can be linked together, which means that your workspaces can depend on one another while always using the most up-to-date code available. This is also a better mechanism than yarn link since it only affects your workspace tree rather than your whole system.
-
All the project dependencies will be installed together, giving Yarn more latitude to better optimize them.
-
Yarn will use a single lockfile rather than a different one for each project, which means fewer conflicts and easier reviews.
TypeScript is a language which builds on JavaScript, by adding static type definitions. Typescript was chosen because of:
- Typings
- Integration with IDE IntelliSense
- Maintenace
A tool for managing JavaScript projects with multiple packages. This will be more decribed on Monorepo Section.
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
Prettier is an opinionated code formatter that helps the developer saving time by using auto formatter and avoid discuss style in code review.
Tools to create a standard with commit message and run hooks in git.
Jest is a JavaScript Testing Framework with a focus on simplicity. This will be more described on Test page.
Storybook is a tool for developing UI components in isolation for React. It makes building stunning UIs organized and efficient.
Styled Components is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS.
A React app boilerplate from Facebook to create a react app without much pain.
The project uses mono repo as a structure to split the logic in 3 packages:
- uikit
- core
- site
This is the package where the generic components is located. This component should be the main component library of the project and where every generic component will be located. No specific logic should be put in here.
You can check every component created here using Storybook as mentioned in Running Storybook in UI kit
section.
To build this package, you can run the following commands:
cd packages/uikit
yarn build
To test:
cd packages/uikit
yarn test
Core is the package responsible for integrate with API and any other logic JS only.
You can run tests and build it.
To build this package, you can run the following commands:
cd packages/core
yarn build
To test:
cd packages/core
yarn test
This is the package responsible for the application itself. Here we have the router configuration, theme injection, core integration with uikit components and so on.
You can check the site in development mode using the commands listed in Running Development environment
section.
- Because of
display: grid
, this code supports only IE 16+ - Release commands
- Cypress