Advanced Strain Filtering & Search Interface | 2,793+ Strains | Real-time Data Visualization
Grow Filter is a powerful, interactive web application that transforms the comprehensive cannabis strain database into an intuitive, searchable, and filterable interface. Built with modern web technologies, it provides users with instant access to detailed information about 2,793+ cannabis strains through advanced filtering, sorting, and search capabilities.
- 🔍 Real-time Search - Instant strain lookup with live filtering
- 📊 Advanced Filtering - Filter by strain type (Indica, Sativa, Hybrid)
- 🔄 Dynamic Sorting - Click column headers to sort data
- 📱 Responsive Design - Mobile-optimized interface
- 💡 Detailed Views - Expandable strain information panels
- ⚡ Fast Performance - Optimized for quick data access
- 🎨 Modern UI - Clean, professional interface design
- HTML5 - Semantic markup and structure
- CSS3 - Modern styling and responsive design
- JavaScript ES6+ - Interactive functionality and data manipulation
- jQuery - DOM manipulation and event handling
- Bootstrap 4 - Responsive grid system and components
- Font Awesome - Professional iconography
- D3.js - Data visualization and manipulation
- JSON/CSV - Structured data formats
- AJAX - Asynchronous data loading
| Feature | Description | Implementation |
|---|---|---|
| Text Search | Real-time strain name filtering | Live input event handling |
| Type Filter | Filter by Indica/Sativa/Hybrid | Dropdown selection with instant results |
| Column Sorting | Sort by any data column | Click-to-sort with visual indicators |
| Responsive Table | Mobile-optimized data display | Bootstrap responsive tables |
// Sample strain data structure
{
index: "0",
strain: "Green Crack",
THC: "Normal",
CBD: "Very Low",
Indica: "Very Low",
Sativa: "Normal",
Hybrid: "Low",
Grow: "8-9",
logo: "strain-image-url",
info: "Detailed strain information...",
more_info: "Extended strain details..."
}grow_filter/
├── static/
│ ├── CSS/
│ │ └── style.css # Custom styling and responsive design
│ ├── js/
│ │ ├── app.js # Main application logic
│ │ └── data.js # Strain database (2,793+ records)
│ └── images/
│ ├── logo.jpg # Application branding
│ └── strain-images/ # Individual strain photos
├── pics/
│ ├── header.png # README header image
│ └── gif.gif # Demo animation
├── index.html # Main application interface
├── LICENSE # MIT License
└── README.md # This documentation
-
Clone the repository
git clone https://github.com/Shannon-Goddard/grow_filter.git cd grow_filter -
Open locally
# Serve with Python (recommended) python -m http.server 8000 # Or simply open index.html in your browser open index.html
-
Access the application
http://localhost:8000
# No build process required - pure vanilla web technologies
# Just edit files and refresh browser
# For development server with live reload:
npx live-server// Real-time search implementation
input.addEventListener('keyup', function(event) {
filterTable();
});
function filterTable() {
let filter = input.value.toUpperCase();
// Filter table rows based on search input
}- Text Search: Type strain names in the search box
- Type Filter: Select from dropdown (ALL, Indica, Sativa, Hybrid)
- Column Sorting: Click any column header to sort
- Detailed View: Click "Show more info" for complete strain data
- Responsive Navigation: Collapsible mobile menu
- Touch-Friendly: Optimized button sizes and spacing
- Fast Loading: Optimized for mobile networks
- Swipe Support: Natural mobile interactions
- Client-side Filtering: Instant search results
- Efficient DOM Manipulation: Minimal reflows and repaints
- Lazy Loading: Images loaded on demand
- Compressed Assets: Minified CSS and JavaScript
- Virtual Scrolling: Handle large datasets efficiently
- Service Workers: Offline functionality
- Code Splitting: Reduce initial bundle size
- CDN Integration: Faster global content delivery
- Strain Discovery: Find new strains based on preferences
- Quick Reference: Access strain information instantly
- Comparison Tool: Compare multiple strains side-by-side
- Mobile Access: Search strains on-the-go
- Data Analysis: Filter strains by specific criteria
- Pattern Recognition: Identify trends in strain characteristics
- Export Functionality: Access filtered datasets
- API Integration: Connect with research tools
- Inventory Management: Track available strains
- Customer Service: Quick strain lookup for staff
- Product Catalog: Display strain information to customers
- Market Analysis: Analyze strain popularity and trends
// Dynamic table population
function populateTable() {
table.innerHTML = '';
for (let data of tableData) {
let row = table.insertRow(-1);
// Populate row with strain data
}
}
// Advanced filtering system
function myFunction() {
var filter = input.value.toUpperCase();
// Multi-column filtering logic
}- Data Loading: CSV → JavaScript objects
- Table Generation: Dynamic HTML table creation
- Event Binding: Search and filter event handlers
- Real-time Updates: Instant UI updates on user input
- Primary: Grow Data Repository
- Format: CSV/JSON strain database
- Updates: Synchronized with main database
- GrowApp Cannabis Guide - Main cultivation platform
- Grow Data - Source database
- Grow Nutrients - Feeding schedule calculator
- Grow Plant - Plant management tools
We welcome contributions to enhance the filtering and search experience!
- Fork the repository
- Create a feature branch (
git checkout -b feature/enhancement) - Commit your changes (
git commit -m 'Add search enhancement') - Push to the branch (
git push origin feature/enhancement) - Open a Pull Request
- 🔍 Search Enhancements - Advanced search algorithms
- 📊 Data Visualization - Charts and graphs
- 📱 Mobile Optimization - Enhanced mobile experience
- ⚡ Performance - Speed and efficiency improvements
- 🎨 UI/UX - Design and usability enhancements
| Metric | Current | Target |
|---|---|---|
| Load Time | ~8 seconds | <3 seconds |
| Search Response | <100ms | <50ms |
| Mobile Score | 85/100 | 95/100 |
| Data Size | 36,312 records | Optimized |
- Load Time: Initial data loading takes ~8 seconds
- Mobile Filtering: Some filter functions need mobile optimization
- Data Updates: Manual synchronization with source database
- Hard-coded Tables: Pre-render HTML for faster loading
- Variable Optimization: Compress and abbreviate data variables
- Code Condensation: Minimize JavaScript bundle size
- Progressive Loading: Load data in chunks
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Commercial use allowed
- ✅ Modification allowed
- ✅ Distribution allowed
- ✅ Private use allowed
- ❗ License and copyright notice required
- Cannabis Community - For strain knowledge and feedback
- Open Source Libraries - Bootstrap, jQuery, Font Awesome
- Wikileaf.com - Original data source for strain information
- Web Development Community - For tools and best practices
- Live Demo: https://shannon-goddard.github.io/grow_filter/
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: shannon@loyal9.app
Built with 🔍 for the cannabis cultivation community
Empowering growers with instant strain discovery