shamimbinnur / design

This is secret to components for design.opensauced.pizza

🍕 insights.opensauced.pizza 🍕

The site provides insights to Open Source projects.

🖼️ Project Figma

The figma for this project can be found here.

🔬 Atomic Design

This project uses Atomic Design for it's Components. Here are several resources for Atomic Design if you are unfamiliar:

• Atomic Design by Brad Frost
• Atomic Design - How To Make Web and UI Design Easier

📙 Storybook

The Stoybook for this project can be found at design-insights.opensauced.pizza.

Folders in our design system

• 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.

🖥️ Local development

To install the application:

npm ci

To start a local copy of the app on port 3000:

npm start

Storybook local development

To run Storybook locally on port 6006:

npm run storybook

Deploy your branch (video explaining this)

Navigate to the Storybook Action. Choose your branch in the "Run Workflow" dropdown.

🎨 Code linting

To check the code and styles quality, use the following command:

npm run lint

This will also display during development, but not break on errors.

To fix the linting errors, use the following command:

npm run format

🚀 Production deployment

A production deployment is a complete build of the project, including the build of the static assets.

npm run build

🤝 Contributing

We 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 push

For any other npm based project or dotnpmrc defaulting to --yes:

npx -y @open-sauced/conventional-commit

🍕 Community

Got Questions? Join the conversation in our Discord.
Find Open Sauced videos and release overviews on our YouTube Channel.