f0ea3e963a19e8e4609e0725e80ca7a575be1e39
- Created SaleCountdown component with real-time countdown - Displays days, hours, minutes, seconds until sale ends - Responsive design with fire emoji and urgency messaging - Auto-calculates next Sunday at 23:59:59 - Positioned prominently above filament table
Filamenteka
A web application for tracking Bambu Lab filament inventory with automatic color coding.
Features
- 🎨 Automatic Color Coding - Table rows are automatically colored based on filament colors
- 🔍 Search & Filter - Quick search across all filament properties
- 📊 Sortable Columns - Click headers to sort by any column
- 🌈 Gradient Support - Special handling for gradient filaments like Cotton Candy Cloud
- 📱 Responsive Design - Works on desktop and mobile devices
Technology Stack
- Frontend: React + TypeScript + Tailwind CSS
- Backend: Next.js API routes
- Infrastructure: AWS Amplify (Frankfurt region)
- IaC: Terraform
Prerequisites
- Node.js 18+ and npm
- AWS Account
- Terraform 1.0+
- GitHub account
Setup Instructions
1. Clone the Repository
git clone https://github.com/yourusername/filamenteka.git
cd filamenteka
2. Install Dependencies
npm install
3. Deploy with Terraform
cd terraform
cp terraform.tfvars.example terraform.tfvars
# Edit terraform.tfvars with your values
terraform init
terraform plan
terraform apply
Local Development
# Run development server
npm run dev
Visit http://localhost:5173 to see the app.
Table Format
The filament table should have these columns:
- Brand - Manufacturer (e.g., BambuLab)
- Tip - Material type (e.g., PLA, PETG, ABS)
- Finish - Finish type (e.g., Basic, Matte, Silk)
- Boja - Color name (e.g., Mistletoe Green, Hot Pink)
- Refill - Whether it's a refill spool
- Vakum - Vacuum sealed status
- Otvoreno - Opened status
- Količina - Quantity
- Cena - Price
Color Mapping
The app includes mappings for common Bambu Lab colors:
- Basic colors: Red, Blue, Green, Yellow, etc.
- Special colors: Mistletoe Green, Indigo Purple, Hot Pink, etc.
- Gradient filaments: Cotton Candy Cloud
- Matte finishes: Scarlet Red, Marine Blue, etc.
Unknown colors default to light gray.
Deployment
Push to the main branch to trigger automatic deployment:
git add .
git commit -m "Update filament colors"
git push origin main
Amplify will automatically build and deploy your changes.
Adding New Colors
To add new color mappings, edit src/data/bambuLabColors.ts:
export const bambuLabColors: Record<string, ColorMapping> = {
// ... existing colors
'New Color Name': { hex: '#HEXCODE' },
};
Troubleshooting
Color Not Showing
- Check if the color name matches exactly
- Add the color mapping to
bambuLabColors.ts - Colors are case-insensitive but spelling must match
License
MIT
Contributing
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
Description
Languages
TypeScript
76.8%
JavaScript
11.4%
HCL
4.7%
Shell
3.7%
PLpgSQL
2.3%
Other
1.1%