This is a Next.js project bootstrapped with create-next-app.

Goal:

• Learn how to implement a design system in a Nextjs and tailwindcss project.
• How to use storybook to document the frontend following good development practices.
• Apply Atomic Design to a React project, using good practices and following a design system.

How to run localy

First, install dependencies, than run the storybook development server:

npm install
npm run storybook

Open http://localhost:6006 with your browser to see the result.

Access Deployed Build on Vercel 🚀

what I've learned

• Understanding the concepts of Atomic Design can help you create smaller components, with fewer responsibilities and that are reusable.
• Use CVA (Class Variance Authority) to handle conditional styling using Tailwind CSS.
• Creating design tokens on tailwindcss project following figma design system.
• Documenting Frontend aplication with storybook using MDX files to make it more informative.
• Plugins in storybook such as, Controls and Actions, making the documentation more interective.
• How to use Chromatic library to test frontend visual, comparing diferent builds.
• Publish nextjs projects on vercel.

technologies ⚙️

• Nextjs | Typescript
• Vercel
• tailwindcss
• storybook
• cva
• eslint
• chromatic
• headlessui