mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-16 03:20:40 +00:00
95 lines
4.3 KiB
Markdown
95 lines
4.3 KiB
Markdown
# 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)
|