Home

Welcome to the class-notes wiki!

📚 Table of Contents

• Project Architecture
• Component Hierarchy
• Package Structure
• Data Models
• Local Storage Schema
• Testing Strategy
• Git Workflow
• Component Development Order

📝 Implementation Notes

General Guidelines

1. Always start with tests - Write tests before implementing components
2. Use TypeScript - Define proper types for all props
3. DaisyUI classes - Prefer DaisyUI component classes over custom styles
4. Accessibility - Include proper ARIA labels and semantic HTML
5. Responsive - Use Tailwind responsive prefixes (sm:, md:, lg:, xl:)
6. Props destructuring - Destructure props in function signature
7. Default props - Provide sensible defaults where appropriate
8. Export pattern - Use named exports from index.ts files

Component File Structure

Each component should have:

ComponentName/
├── ComponentName.tsx        # Main component
├── ComponentName.types.ts   # TypeScript types
├── ComponentName.test.tsx   # Tests (in __tests__ folder)
└── index.ts                 # Barrel export

Testing Each Component

For each component, test:

1. Rendering - Does it render with required props?
2. Props - Are all props handled correctly?
3. Events - Do event handlers work?
4. Conditional rendering - Are conditionals working?
5. Edge cases - Empty states, null values, etc.
6. Accessibility - Proper roles, labels, keyboard navigation

---

🎯 Getting Started

1. Choose a component from the development order
2. Review the Component Templates for the component structure
3. Write tests first based on the component requirements
4. Implement the component following the structure
5. Ensure tests pass
6. Create a pull request

Good luck with your implementation! 🚀

Last Updated: October 2025
Project Version: 1.0.0
React Version: 19
Maintained by: Divyansh Bhardwaj