# Video Tutorials

Welcome to the leptos-shadcn-ui video tutorial series. These step-by-step video walkthroughs demonstrate common component usage patterns, best practices, and real-world implementation examples.

## Tutorial Series

### 🚀 Getting Started Series
Perfect for developers new to Leptos or shadcn-ui components.

- [Installation & Setup](video-tutorials/getting-started/01-installation.md) - Set up your development environment
- [Your First Component](video-tutorials/getting-started/02-first-component.md) - Build your first interactive component
- [Basic Form Patterns](video-tutorials/getting-started/03-basic-forms.md) - Create forms with validation
- [Styling & Theming](video-tutorials/getting-started/04-styling-theming.md) - Customize component appearance

### 🧩 Component Series
Deep dives into specific component categories and patterns.

- [Form Components](video-tutorials/components/01-form-components.md) - Buttons, Inputs, Labels, and more
- [Layout Components](video-tutorials/components/02-layout-components.md) - Cards, Tabs, Accordions, and grids
- [Navigation Components](video-tutorials/components/03-navigation-components.md) - Menus, Breadcrumbs, Pagination
- [Overlay Components](video-tutorials/components/04-overlay-components.md) - Dialogs, Popovers, Tooltips
- [Data Display Components](video-tutorials/components/05-data-display.md) - Tables, Calendars, Progress indicators

### 🎯 Advanced Patterns Series
Advanced techniques for building production-ready applications.

- [State Management](video-tutorials/advanced/01-state-management.md) - Managing complex application state
- [Form Validation](video-tutorials/advanced/02-form-validation.md) - Advanced validation patterns
- [Accessibility Patterns](video-tutorials/advanced/03-accessibility.md) - WCAG compliance techniques
- [Performance Optimization](video-tutorials/advanced/04-performance.md) - Optimizing render performance
- [Testing Strategies](video-tutorials/advanced/05-testing.md) - Testing components effectively

### 🏗️ Real-World Projects
Complete application walkthroughs.

- [Building a Dashboard](video-tutorials/advanced/06-dashboard-project.md) - Complete admin dashboard
- [Building a Form-Heavy App](video-tutorials/advanced/07-form-app.md) - Multi-step form wizard
- [Building a Data Table App](video-tutorials/advanced/08-data-table.md) - Sortable, filterable tables

## How to Use These Tutorials

### Prerequisites
- Basic knowledge of Rust programming language
- Familiarity with Web fundamentals (HTML, CSS)
- Understanding of reactive programming concepts (helpful but not required)

### Recommended Learning Path

1. **Start Here**: Complete the Getting Started Series in order
2. **Build Foundations**: Work through Component Series that match your project needs
3. **Master Advanced**: Explore Advanced Patterns for production techniques
4. **Learn by Example**: Follow Real-World Projects to see everything in action

### Alongside Video Tutorials

Each video tutorial includes:
- **Written Transcript**: Full text transcript with timestamps
- **Code Examples**: Complete, runnable code snippets
- **Interactive Exercises**: Hands-on challenges to reinforce learning
- **Related Documentation**: Links to detailed component documentation

### Practice While Watching

We recommend:
- Follow along with the code examples in your own project
- Pause the video to experiment with variations
- Complete the suggested exercises before continuing
- Reference the written documentation for deeper understanding

## Video Resources

- **Transcripts**: Available in each tutorial folder
- **Source Code**: Complete examples in `/examples/` directory
- **Interactive Demo**: Explore live examples at [comprehensive-demo](../../comprehensive-demo/)
- **Community**: Join discussions in our GitHub Issues

## Contributing

Have an idea for a new tutorial? We'd love to hear from you!

1. Check our [Contributing Guide](../contributing/README.md)
2. Review our [Video Production Guide](video-tutorials/production-guide.md)
3. Submit your tutorial idea via GitHub Issue

## Additional Learning Resources

- [Component API Reference](../components/README.md)
- [Getting Started Guide](../getting-started/README.md)
- [Architecture Documentation](../architecture/README.md)
- [Testing Guide](../testing/README.md)

---

**Next**: Start with [Installation & Setup](video-tutorials/getting-started/01-installation.md)