Revolutionizing the fishing industry by connecting waste suppliers with industries that need them. Because one industry's waste is another industry's treasure. ♻️
- 🌍 About BIOFLOW
- 🎯 The Problem
- 💡 Our Solution
- ✨ Key Features
- 🏗️ Architecture & Structure
- 🚀 Quick Start
- 📱 Pages & Functionality
- 💻 Technology Stack
- 🔧 Configuration
- 🌱 Sustainability Impact
- 📊 Market Opportunity
- 🤝 Contributing
- 📄 License
- 📬 Contact
BIOFLOW is a cutting-edge digital marketplace platform designed to revolutionize how the fishing industry manages waste. We connect fish waste suppliers (fishermen, fish markets, processors, restaurants) with industries that need this valuable resource (fertilizer companies, animal feed manufacturers, cosmetics producers, pharmaceutical companies).
Transform what was once considered waste into a valuable commodity, creating a circular economy where nothing is discarded, and everyone benefits - from small fishermen earning extra income to industries gaining sustainable sourcing of raw materials.
- ♻️ Eliminate waste in the fishing industry
- 💰 Create economic opportunities for fishing communities
- 🌱 Promote sustainability through resource reuse
- 🤝 Bridge the gap between suppliers and industries
- 🌊 Protect aquatic ecosystems by reducing environmental pollution
Every year, the fishing industry generates millions of tons of waste:
Statistics:
- 50 million metric tons of fish waste generated annually worldwide
- 50-60% of caught fish becomes waste (heads, tails, bones, scales, organs)
- Most waste ends up in landfills or oceans, harming ecosystems
- Valuable proteins, oils, and minerals are left unused
- Fishing communities lose potential secondary income streams
Environmental Impact:
- 🌊 Aquatic ecosystem degradation
- 💨 Methane emissions from decomposing organic waste
- 🐟 Harm to marine species from pollution
- 🏭 Industrial demand for sustainable raw materials goes unfulfilled
Economic Impact:
- Lost revenue for fishing communities
- Expensive waste management for processors
- Industries forced to source materials at higher costs
- Economic inefficiency in the entire value chain
BIOFLOW is the digital bridge that connects these two sides of the market:
┌─────────────────────────────────────────────────────────────┐
│ BIOFLOW PLATFORM │
│ │
│ SUPPLIERS MARKETPLACE BUYERS
│ ┌──────────────┐ ┌────────────┐ ┌──────────────┐
│ │ Fishermen │──────────────│ List Waste │────────▶│ Fertilizer │
│ │ Fish Markets │──────────────│ │ │ Companies │
│ │ Restaurants │──────────────│ Find Deals │────────▶│ Animal Feed │
│ │ Processors │──────────────│ │ │ Manufacturers│
│ └──────────────┘ │ Track Orders │ Cosmetics │
│ │ │ │ Pharma │
│ └────────────┘ │ Companies │
│ └──────────────┘
│
└─────────────────────────────────────────────────────────────┘
- Animated Hero Section: Underwater-themed design with floating bubbles and light ray animations
- Responsive Design: Perfect on desktop, tablet, and mobile devices
- Modern Animations: Smooth transitions and engaging visual feedback
- Intuitive Navigation: Easy-to-use interface for all user types
- Supplier Dashboard: For fishermen and waste producers
- Industry Dashboard: For companies seeking fish waste supplies
- Separate authentication systems for security and customization
- Role-based access to relevant features
- Browse Waste Types:
- 🐟 Fish Heads (high protein content)
- 🐠 Fish Tails (rich in gelatin and collagen)
- ✨ Fish Scales (source of collagen and minerals)
- 🦴 Fish Bones (calcium and phosphorus rich)
- 🫀 Fish Guts/Organs (nutrient dense)
- 🔀 Mixed Waste (bulk collections)
- Real-time Search: Find products by location, waste type, or supplier
- Smart Filters: Sort by price, rating, quantity available
- Category-based Browsing: Easy navigation through waste types
- Detailed Listings: Complete information including price per unit, available quantity, and supplier ratings
Complete management system for waste producers:
- ➕ List New Products: Add fish waste products with details
- 📊 Analytics Dashboard:
- Active listings count
- Total waste sold (in kilograms)
- Revenue tracking
- Completed deals counter
- 📥 Manage Requests: View and respond to industry inquiries
- 🚚 Schedule Pickups: Coordinate logistics
- ⭐ Seller Rating: Build reputation with positive reviews
- 💵 Earnings Tracker: Monitor revenue streams
Powerful procurement system for buying companies:
- 🔎 Advanced Search: Find suppliers by location and waste type
- 🛒 Shopping Cart: Build bulk orders
- 📞 Send Requests: Initiate conversations with suppliers
- 📦 Order Tracking: Monitor purchase requests and deliveries
- ⭐ Supplier Ratings: Make informed decisions based on reviews
- 💾 Favorites: Save preferred suppliers for quick access
- 📊 Purchase History: Track previous transactions
- Bulk Discounts: Special pricing for large purchases
- Flash Sales: Time-limited offers with countdown timers
- Stock Level Visualization: Progress bars showing availability
- Trending Deals: Real-time popular offers
- Savings Calculator: See how much you save with bulk purchases
- Secure Login Pages:
- Supplier login (login.html) with ocean theme
- Industry login (login2.html) with professional design
- Password Recovery: Forgot password functionality
- Registration System: Easy onboarding for new users
- Remember Me: Convenient login persistence
- About Page: Company mission and values
- Contact Page: Direct communication with support team
- Responsive Checkout: Seamless purchasing experience
- Shopping Cart: Multi-item purchase management
- Driver/Logistics Details: Transparency in delivery
- Mobile Optimization: Touch-friendly interface
bioflow/
├── 📄 index.html # Landing page with hero section
├── 📄 product.html # Browse fish waste listings
├── 📄 product-detail.html # Individual product details
├── 📄 product-new.html # Alternative product view
├── 📄 deal.html # Bulk deals and flash sales
├── 📄 deal-new.html # Alternative deals interface
│
├── 🔐 Authentication Pages
├── 📄 login.html # Supplier login page
├── 📄 login2.html # Industry login page
├── 📄 register.html # Supplier registration
├── 📄 register2.html # Industry registration
├── 📄 forgetpass.html # Supplier password recovery
├── 📄 forgetpass2.html # Industry password recovery
│
├── 📊 Dashboard Pages
├── 📄 sup.html # Supplier dashboard
├── 📄 consumer-dashboard.html # Industry buyer dashboard
│
├── 📖 Information Pages
├── 📄 about.html # About BIOFLOW
├── 📄 contact.html # Contact & support
├── 📄 benefits.html # Platform benefits
├── 📄 truck.html # Logistics & delivery info
│
├── 🎨 Styling (CSS)
├── 📝 common.css # Shared styles across pages
├── 📝 style.css # Global styles
├── 📝 product.css # Product page styles
├── 📝 deal.css # Deal page styles
├── 📝 login.css # Login page styles
├── 📝 login2.css # Industry login styles
├── 📝 sup.css # Supplier dashboard styles
├── 📝 contact.css # Contact page styles
├── 📝 about.css # About page styles
│
├── 💻 JavaScript (Functionality)
├── 🔧 server.js # Node.js HTTP server
├── 🔧 script.js # Main functionality
├── 🔧 script2.js # Secondary functionality
├── 🔧 login.js # Login logic
├── 🔧 product.js # Product listing logic
├── 🔧 product-new.js # Alternative product logic
├── 🔧 deal.js # Deal page logic
├── 🔧 deal-new.js # Alternative deal logic
├── 🔧 sup.js # Supplier dashboard logic
├── 🔧 consumer-dashboard.js # Industry dashboard logic
│
├── 🖼️ Assets (Images)
├── 🌊 product.jpg, product1.jpg, product2.jpg, product3.jpeg
├── 🐟 scales.jpg, scales1.jpeg
├── 🔖 about.jpg, about2.jpg
├── 📦 deal.jpg
├── 🚛 truck1.jpg, truck2.jpg, driver1.png, driver2.jpeg, driver3.jpg
├── 🎯 buy.png, sell.png, sell3.png
├── 🌅 hirebg.png, login1.jpg, login2.jpg, contact.jpg, head.jpg
├── 📝 placeholder-product.jpg
├── 🎨 mlr6.jpg, productnew.jpg, Remove-bg.ai_1702093935562.png
│
├── 📋 Configuration & Docs
├── 📖 README.md # This comprehensive guide
├── 📊 PROJECT_SUMMARY.md # Quick project overview
└── 📁 .git/ # Version control
Frontend Pages: HTML files organized by functionality
- Public pages (landing, about, contact)
- Authentication pages (login, registration, password recovery)
- Marketplace pages (product listings, deals)
- Dashboard pages (supplier and industry specific)
Styling System: Organized CSS files for maintainability
common.css: Shared design patterns across all pages- Page-specific CSS files for unique styling
JavaScript Logic: Interactive functionality modules
- Page-specific logic files
- Central server handling all HTTP requests
Media Assets: All images organized by usage
- Product images
- Background images
- UI icons and graphics
- Node.js (v14 or higher)
- npm or yarn
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Git for version control
-
Clone the Repository
git clone https://github.com/sxhaakee/Bioflow.git cd Bioflow/Bioflow -
Install Dependencies (if package.json exists)
npm install # or yarn install -
Start the Server
node server.js # Output: Server running at http://localhost:3000/ -
Open in Browser
Navigate to: http://localhost:3000
The application uses the following environment variables:
# .env file (optional)
PORT=3000 # Server port (default: 3000)
NODE_ENV=development # Environment mode- Visit Landing Page:
http://localhost:3000/- See the animated hero section - Browse Products:
http://localhost:3000/product.html- View waste listings - Check Deals:
http://localhost:3000/deal.html- View bulk discounts - Supplier Login:
http://localhost:3000/login.html- Test supplier interface - Industry Login:
http://localhost:3000/login2.html- Test buyer interface - Supplier Dashboard:
http://localhost:3000/sup.html- Manage products - Industry Dashboard:
http://localhost:3000/consumer-dashboard.html- Browse as buyer
The first impression of BIOFLOW - beautifully designed to showcase the platform's value.
Features:
- 🌊 Animated underwater theme with floating bubbles
- 💡 Light ray animations creating dynamic atmosphere
- 🎯 Clear value proposition: "Turn Your Waste into Revenue"
- 📊 Statistics section showing market opportunity
- ✨ Feature highlights with icons
- 🔗 Call-to-action buttons for supplier and industry logins
- 📱 Fully responsive hero section
Key Sections:
- Hero/Header with navigation
- "How BIOFLOW Works" step-by-step guidance
- "Who Can Use?" user type showcase
- Statistics counters
- Features showcase row
- Footer with links
Marketplace heart where suppliers and industries connect.
Functionality:
- 🔍 Real-time search by location
- 🏷️ Filter by waste category
- 💵 Sort by price (ascending/descending)
- ⭐ Sort by supplier rating
- 🔤 Alphabetical sorting
- 📌 Location-based filtering
- 🎴 Card-based product display
Product Information:
- Product name and description
- Available quantity (kg)
- Price per kg
- Supplier name and rating
- Location/delivery area
- Contact button
Waste Categories:
- Fish Heads - High protein, collagen source
- Fish Tails - Gelatin and collagen rich
- Fish Scales - Mineral and collagen content
- Fish Bones - Calcium and phosphorus
- Fish Guts - Nutrient dense organs
- Mixed Waste - Bulk collections
Detailed view of individual waste products.
Features:
- Full product description
- Detailed ingredient/component breakdown
- High-quality product images
- Supplier profile and contact
- Reviews and ratings
- Quantity selector
- Add to cart functionality
- Related products
Special bulk purchasing opportunities with time-sensitive offers.
Deal Features:
- ⏱️ Countdown timers for flash sales
- 💰 Percentage or amount savings display
- 📊 Stock level progress bars
- 🔥 "Hot Deal" badges
- 📈 Savings calculator
- 🌟 Trending deals section
- ❤️ Save deals for later
Deal Types:
- Bulk purchase discounts
- Flash sales with limited time
- Seasonal specials
- Minimum order quantity deals
- Volume-based pricing
Complete management system for fish waste suppliers.
Dashboard Analytics:
-
Revenue Metrics:
- Total earnings
- Average transaction value
- Monthly revenue trend
- Pending payments
-
Product Management:
- View all active listings
- Edit existing products
- Remove sold-out items
- Add new waste products
- Track inventory levels
-
Order Management:
- Incoming industry requests
- Accept/decline orders
- Track delivery status
- Manage logistics
-
Performance Metrics:
- Completed deals counter
- Total waste sold (kg)
- Active listings count
- Seller rating/reviews
- Response time stats
-
Tools:
- Schedule pickups
- View buyer conversations
- Download invoices
- Export transaction history
Procurement management system for companies buying waste.
Dashboard Features:
-
Search & Discovery:
- Browse available supplies
- Filter by waste type
- Search by supplier name or location
- Sorting options (price, rating, quantity)
-
Purchasing:
- Add to cart
- Manage cart items
- Bulk order capabilities
- Quantity adjustments
- Price calculation
-
Order Management:
- View pending requests
- Track order status
- Download purchase orders
- Manage deliveries
-
Supplier Management:
- View supplier profiles
- Check ratings and reviews
- Save favorite suppliers
- View supplier history
- Leave reviews after purchase
-
Analytics:
- Purchase history
- Spending trends
- Supplier performance
- Cost analysis
- Ocean/teal theme with fish animations
- Secure credential entry
- Remember me option
- Forgot password link
- Feature highlights for suppliers
- Responsive design
- Full profile setup
- Business information
- Contact details
- Verification process
- Professional purple theme
- Factory/industry icons
- Company details input
- Quick account setup
- Remember credentials option
- Company profile creation
- Procurement needs specification
- Invoice/payment setup
- Team member management
forgetpass.html- For suppliersforgetpass2.html- For industries- Email verification
- Password reset link
- Security questions option
- Company mission and vision
- Team information
- History and achievements
- Sustainability commitment
- Awards and recognition
- Contact form
- Business hours
- Office locations
- Email and phone numbers
- Live chat support
- FAQ section
- Platform advantages for suppliers
- Benefits for industries
- Cost savings calculator
- Testimonials
- Case studies
- Delivery options
- Shipping costs
- Timeline expectations
- Packaging standards
- Tracking system
- View cart items
- Adjust quantities
- Apply discount codes
- Calculate totals
- Proceed to checkout
- Save for later option
- Shipping address entry
- Payment method selection
- Order summary
- Discount application
- Order confirmation
-
HTML5: Semantic markup for accessibility
-
CSS3: Modern styling with animations
- Flexbox and Grid layouts
- CSS animations and transitions
- Responsive design patterns
- Custom properties (variables)
-
JavaScript (Vanilla):
- DOM manipulation
- Event handling
- Form validation
- Local storage management
- Fetch API for server communication
- Node.js: JavaScript runtime environment
- HTTP Module: Built-in Node.js HTTP server
- File System (fs): Server-side file handling
- Path Module: URL and file path handling
- Font Awesome 6.0: Icon library for UI elements
- Google Fonts: Typography and web fonts
- CSS Pre-processors: Potentially SCSS/SASS (customizable)
- RESTful endpoints for product listings
- Form submissions for user authentication
- Shopping cart synchronization
- Order management endpoints
- Supplier request handling
The server is configured for development and can be customized:
// Default PORT: 3000
// Custom PORT: Set NODE environment variable
// export PORT=8080 && node server.js
// Supported MIME types:
// - HTML, CSS, JavaScript
// - Images (PNG, JPG, GIF, SVG)
// - Fonts (WOFF, TTF, EOT, OTF)
// - Audio/Video (WAV, MP4)
// - WebAssembly (WASM)# Use default port 3000
node server.js
# Use custom port
PORT=8080 node server.jsThe server automatically handles:
- Web files (HTML, CSS, JS)
- Images (PNG, JPG, GIF, SVG)
- Fonts (WOFF, TTF, EOT, OTF)
- Media (WAV, MP4)
- WebAssembly (WASM)
Note: Current implementation is static/file-based. For production:
// Recommended setup:
// - Database: MongoDB, PostgreSQL, or MySQL
// - ORM: Mongoose, Sequelize, or TypeORM
// - Authentication: JWT or OAuth 2.0
// - Caching: Redis🌊 Aquatic Ecosystem Protection
- Reduces pollution from fish waste decomposition
- Prevents harmful methane emissions
- Protects marine habitats
- Supports UN Sustainable Development Goal 14: Life Below Water
♻️ Circular Economy Contribution
- Transforms waste into valuable resources
- Reduces landfill burden
- Promotes resource efficiency
- Creates closed-loop supply chains
🌍 Global Sustainability
- Supports responsible consumption (SDG 12)
- Enables sustainable production (SDG 9)
- Promotes clean water initiatives (SDG 6)
💰 For Fishing Communities
- Additional revenue streams
- Economic empowerment
- Fair pricing for waste products
- Market stability
🏭 For Industries
- Sustainable sourcing alternatives
- Cost reduction through bulk purchases
- Supply chain transparency
- ESG compliance support
📊 Market Impact
- Creates new logistics sector jobs
- Develops waste management expertise
- Builds green supply chain infrastructure
- Supports circular economy growth
Annual Statistics:
├── 50+ Million Metric Tons
│ └── Annual global fish waste generation
│
├── 50-60% Waste Rate
│ └── Of total catch becomes waste (heads, bones, scales, organs)
│
├── $10+ Billion Market
│ └── Potential value of underutilized fish waste
│
└── 40%+ Growth Potential
└── Projected growth in fish meal and oil markets
| Industry | Use Case | Market Size |
|---|---|---|
| Animal Feed | Fish meal, oils, supplements | $4.2 Billion |
| Fertilizer | Organic nutrients, soil conditioning | $2.1 Billion |
| Cosmetics | Collagen, oils, proteins | $1.8 Billion |
| Pharmaceuticals | Omega-3, calcium, minerals | $3.5 Billion |
| Textiles | Gelatin, fibers | $850 Million |
| Food & Beverages | Gelatin, collagen, supplements | $2.3 Billion |
| Bioplastics | Sustainable material alternatives | $950 Million |
Total Addressable Market: $15.5 Billion+
We welcome contributions! Help us expand BIOFLOW and make sustainable fish waste management accessible worldwide.
-
Fork the Repository
git clone https://github.com/sxhaakee/Bioflow.git cd Bioflow -
Create a Feature Branch
git checkout -b feature/amazing-feature
-
Make Your Changes
- Follow the existing code style
- Add comments for complex logic
- Test thoroughly before committing
-
Commit Your Work
git commit -m "Add: amazing-feature" # Commit message format: # Add: New features # Fix: Bug fixes # Update: Improvements # Docs: Documentation updates
-
Push to Your Fork
git push origin feature/amazing-feature
-
Submit a Pull Request
- Describe your changes clearly
- Link related issues
- Include before/after screenshots for UI changes
Frontend Enhancements:
- 🎨 UI/UX improvements
- 📱 Mobile responsiveness optimization
- ♿ Accessibility improvements
- 🌙 Dark mode implementation
- 🌐 Internationalization (i18n)
Backend Development:
- 🗄️ Database integration and APIs
- 🔐 User authentication system
- 📧 Email notifications
- 📊 Real-time analytics
- 🔔 Push notifications
Features & Features:
- 🤖 AI-powered supplier matching
- 📊 Advanced analytics dashboard
- 🗺️ Geographic heatmaps
- 💬 In-app messaging system
- 📱 Mobile app development
Sustainability:
- 🌱 Carbon footprint calculator
- 🎓 Educational content
- 📈 Sustainability reporting
- 🏆 Impact metrics
Documentation & Testing:
- 📝 Code documentation
- ✅ Unit and integration tests
- 📖 User guides
- 🎥 Video tutorials
Found a bug? Help us improve!
- Check Existing Issues: Search to avoid duplicates
- Provide Details:
- Browser and OS information
- Steps to reproduce
- Expected vs. actual behavior
- Screenshots or error logs
- Create a New Issue: Use descriptive titles
This project is licensed under the MIT License - see the LICENSE file for details.
You are free to:
- ✅ Use commercially
- ✅ Modify the code
- ✅ Distribute
- ✅ Use privately
Under the condition that:
- 📝 Include original license and copyright notice
⚠️ No warranty is provided
- Documentation: Check PROJECT_SUMMARY.md for quick overview
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: Contact via Contact Page
Frontend Development:
Node.js Development:
Sustainability & Circular Economy:
- Database integration (MongoDB/PostgreSQL)
- User authentication system
- Real payment processing (Stripe/PayPal)
- Email notifications
- Advanced search with filters
- User ratings and reviews system
- RESTful API development
- Microservices architecture
- Load balancing
- Caching system (Redis)
- CDN integration for images
- API rate limiting and security
- AI-powered supplier matching
- Predictive analytics
- Blockchain for transparency
- IoT integration for inventory tracking
- Automated logistics coordination
- Carbon footprint calculator
- Mobile applications (iOS/Android)
- International localization
- Multi-currency support
- Advanced reporting tools
- Sustainability certifications
- Partnership integrations
- Machine learning for demand forecasting
- Drone/autonomous vehicle logistics
- Augmented reality product visualization
- Blockchain smart contracts
- Real-time market price indexing
- Sustainability impact dashboard
Lines of Code: 2000+
HTML Sections: 15+
CSS Files: 9
JavaScript Files: 10
Total Pages: 20+
Supported MIME Types: 14+
Animation Effects: 50+
Responsive Breakpoints: Multiple
Browser Support: All Modern Browsers
Mobile Optimized: Yes
Accessibility Compliant: In Progress
Loading Time: < 2 seconds (local)
| Link | Purpose |
|---|---|
| Live Demo | See BIOFLOW in action |
| GitHub Repository | Source code and issues |
| Project Summary | Quick overview |
| Developer Guide | Architecture details |
| Contact Us | Get in touch |
Have questions? Want to collaborate? Let's connect!
- 📧 Email: bioflow@example.com
- 🌐 Website: bioflow.example.com
- 🐦 Twitter: @bioflow
- 💼 LinkedIn: BIOFLOW Company
- 📱 Discord: Join our community
- 🐙 GitHub: @sxhaakee
Thank you to everyone who has contributed to making BIOFLOW possible:
- 👨💻 Developers: Building sustainable technology
- 🌊 Fishing Communities: Inspiring our mission
- 🏭 Industries: Driving market demand
- 🌱 Sustainability Advocates: Pushing us forward
- 💚 Users & Supporters: Making impact real
Help us track our sustainability impact:
Fish Waste Diverted from Landfills: 0 kg → Target: 1M kg/year
Industries Connected: 0 → Target: 500+
Suppliers Empowered: 0 → Target: 10,000+
Jobs Created: 0 → Target: 5,000+
CO2 Emissions Avoided: 0 tons → Target: 100,000+ tons/year
Economic Value Generated: $0 → Target: $100M+
Made with 💚 and passion for sustainability
Together, we're turning tide for a sustainable future 🌊
Last Updated: March 31, 2026
