Storybook

npm run storybook

Notes For Eesha

• Story Book Tutorial https://youtu.be/i5tvZ9f7gJw
• Another Story Book Tutorial https://www.youtube.com/watch?v=FUKpWgRyPlU
• Build better UIs with Storybook Args | 5min Tutorial https://www.youtube.com/watch?v=0gOfS6K0x0E
• Shubhams's Example Design System Repo https://github.com/wryonik/design-system
• All components should take props from their parent when it makes sense, use theme for global styles

Materila Ui

• Learn MUI (Material UI) in under 10 min https://www.youtube.com/watch?v=FB-sKY63AWo

To Do For Eesha

212:19 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

add the math lib for blogs that have math symbols

Things I added

• npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx https://nextjs.org/docs/pages/building-your-application/configuring/mdx
• npm install @mui/material @emotion/react @emotion/styled https://mui.com/material-ui/
• npm install @mdx-js/react gray-matter
• npm i next-mdx-remote https://www.youtube.com/watch?v=n2CV6f0vFr4 for the blog
• npm install framer-motion https://www.youtube.com/watch?v=PczQ0qSwe1E for scroll animations
• npm install react-intersection-observer for scroll animations
• npm install @tailwindcss/typography for styling mdx blog https://www.youtube.com/watch?v=n2CV6f0vFr4
• npm install remark-gfm remark-math rehype-katex rehype-pretty-code for blog math and code parts

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.