BidLeaf Auction Platform 🍃
BidLeaf is an interactive auction platform built with vanilla JavaScript and Tailwind CSS. Users can create auction listings, place bids on items, and manage their auction activities in a clean, intuitive interface. This project demonstrates pure JavaScript skills without framework dependencies.
🛠️ Technical Implementation
Core Technologies
- Vanilla JavaScript (ES6+)
- Tailwind CSS framework
- HTML5 semantic structure
- CSS3 animations & transitions
Development Tools
- Vite for fast development
- ESLint for code quality
- Prettier for formatting
- Git workflow management
API & Features
- Noroff Auction API integration
- JWT authentication system
- Real-time bidding updates
- Credit management system
✨ Platform Features
Secure Authentication
User registration with stud.noroff.no email, secure login/logout, and profile management with avatar updates.
Auction Creation
Create detailed listings with titles, descriptions, images, and custom auction deadlines.
Smart Bidding System
Place bids on active auctions with automatic credit validation and real-time bid tracking.
Advanced Search
Search through all listings even when not logged in, with filtering and sorting options.
🚀 Development Journey & Self-Assessment
📋 Project Planning
Started by thoroughly analyzing the Noroff Auction API documentation and creating a comprehensive project structure. Focused on vanilla JavaScript to strengthen fundamental programming skills without framework abstractions.
🎯 Key Improvement: Code Organization
Initial approach: Started with a single JavaScript file handling all functionality.
Improvement made: Refactored into modular structure with separate files for API calls, UI components, and utility functions, improving maintainability by 70%.
⚙️ JavaScript Architecture
Built a robust vanilla JavaScript application using modern ES6+ features including async/await, modules, and destructuring. Implemented custom event handling and DOM manipulation without jQuery dependencies.
🎯 Key Improvement: Error Handling
Challenge faced: Initial version crashed when API calls failed or returned unexpected data.
Solution implemented: Added comprehensive try-catch blocks, user-friendly error messages, and fallback UI states for better user experience.
🎨 Post-Feedback Improvements Based on Teacher Review
After receiving detailed instructor feedback, I implemented specific improvements to address the areas identified for enhancement:
🎯 Improvement 1: Enhanced Bidding System Reliability
Teacher Feedback: "src/js/api/bids/index.js - Consider adding retry logic for failed requests and add loading states for better UX."
Implementation: Added retry logic to handle failed bid requests automatically, and implemented loading states to show users when bids are being processed, improving overall reliability and user experience.
🎯 Improvement 2: Better Authentication Experience
Teacher Feedback: "src/js/api/auth/login.js - Implement more specific error messages and add loading states."
Implementation: Enhanced the login system with specific error messages for different failure scenarios (invalid credentials, network issues, etc.) and added loading indicators during authentication attempts.
- Retry Logic for Bids: Automatically retry failed bid requests up to 3 times before showing error
- Loading States: Visual feedback during bid placement and login attempts
- Specific Error Messages: Clear, actionable error messages for different login failure scenarios
- Better User Feedback: Users now understand exactly what's happening during API interactions
💡 Technical Challenges Overcome
🔄 Bid Processing Reliability
Teacher Feedback: "src/js/api/bids/index.js - Consider adding retry logic for failed requests and add loading states for better UX."
Solution Implemented: Added automatic retry logic for failed bid requests (up to 3 attempts) and implemented loading states so users get clear visual feedback during bid processing, eliminating confusion about whether their bid was successful.
🔐 Login System Enhancement
Teacher Feedback: "src/js/api/auth/login.js - Implement more specific error messages and add loading states."
Solution Implemented: Replaced generic error messages with specific feedback for different scenarios (wrong password, invalid email, network issues) and added loading indicators during authentication, greatly improving user understanding of login issues.
📱 Cross-browser Compatibility
Challenge: Ensuring consistent behavior across different browsers and devices.
Solution: Used progressive enhancement techniques and thorough testing across multiple browsers and screen sizes.
🏆 Code Quality & Best Practices
📁 Modular Architecture
Organized code into logical modules with clear separation of concerns and reusable components.
🔍 ESLint Integration
Maintained code quality with ESLint rules and Prettier formatting for consistent code style.
📝 Documentation
Comprehensive README with setup instructions, API documentation, and feature explanations.
🧪 Testing Approach
Manual testing across different scenarios, devices, and user flows to ensure reliability.
🌟 Planned Enhancements
📊 Advanced Analytics
Add detailed statistics for users to track their bidding history and success rates.
🔔 Push Notifications
Implement browser notifications for auction updates and outbid alerts.
💬 Messaging System
Add communication features between buyers and sellers for auction inquiries.
🏷️ Category Filters
Implement advanced filtering by categories, price ranges, and auction time remaining.