The figma for this project can be found here.
This project uses Atomic Design for it's Components. Here are several resources for Atomic Design if you are unfamiliar:
The Stoybook for this project can be found at design-insights.opensauced.pizza.
- Atoms folder: Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
- Molecules folder: folder: Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.
- Organisms folder: Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
- Templates folder: Templates consist mostly of groups of organisms stitched together to form pages.
To install the application:
npm ciTo start a local copy of the app on port 3000:
npm startTo run Storybook locally on port 6006:
npm run storybookDeploy your branch (video explaining this)
Navigate to the Storybook Action. Choose your branch in the "Run Workflow" dropdown.
To check the code and styles quality, use the following command:
npm run lintThis will also display during development, but not break on errors.
To fix the linting errors, use the following command:
npm run formatA production deployment is a complete build of the project, including the build of the static assets.
npm run buildWe encourage you to contribute to Open Sauced! Please check out the Contributing guide for guidelines about how to proceed.
We have a commit utility called @open-sauced/conventional-commit that helps you write your commits in a way that is easy to understand and process by others.
It is generally integrated as an npm script but you can run it with npx as well:
npm run pushFor any other npm based project or dotnpmrc defaulting to --yes:
npx -y @open-sauced/conventional-commitGot Questions? Join the conversation in our Discord.
Find Open Sauced videos and release overviews on our YouTube Channel.