Skip to content

Latest commit

 

History

History
47 lines (31 loc) · 1.69 KB

README.md

File metadata and controls

47 lines (31 loc) · 1.69 KB

Create toast notification component

👷 Setup new project

  1. Choose your favorite FE library (React, Vue, Svelte, ...)
  2. Use Vite to bootstrap the project
  3. Check that project is running (npm run dev)
  1. Use Tailwind css for styling purposes guide here
  2. Added support for tests with Vitest

Additional setup (might be done later): Git repo, Git Hooks (via Husky), CI/CD ( GitHub workflows)

🤔 Design thinking

Before writing any actual code, let's stop for a bit and think about the component API.

  1. What is the component name?
  2. What are the combinations of component usage?
  3. What props will the component require?
  4. Will you need any other helper components to encapsulate shared logic (eg. layout)?

Think about the points above and iterate over them to come up with the best approach 💪

🤓 Implementation

After you have some design on paper (in mind), let's go into coding

  1. Create the component(s)
  2. Display all the combinations of the component (preferably as they are shown on the image)
  3. Write tests for the component(s)

Kudos

Toast notifications were designed by: Corey Ginnivan