Revolutionizing the logistics industry with a modern, multi-role transportation platform
- Overview
- Features
- Technology Stack
- Architecture
- Getting Started
- User Roles
- API Endpoints
- Deployment
- Contributing
Fill-It-Web is a comprehensive logistics and transportation platform that connects customers with trusted drivers for seamless goods transportation. Built with modern web technologies, it provides a robust solution for managing trips, tracking shipments, and facilitating communication between all stakeholders in the logistics ecosystem.
- Multi-Role Platform: Separate interfaces for customers and drivers
- Real-time Tracking: Live trip monitoring and status updates
- Multi-language Support: Available in 10+ Indian languages
- Secure Authentication: Firebase Auth with Google Sign-In integration
- Responsive Design: Optimized for all devices and screen sizes
- Modern UI/UX: Clean, intuitive interface with smooth animations
- Hero Section: Compelling value proposition with truck fleet imagery
- Service Cards: Highlighting key offerings and customer reviews
- Interactive Reviews: Carousel modal with customer testimonials
- Contact Form: Lead generation with backend integration
- Multi-language Support: Language selector for diverse user base
- Dual Login Methods: Email/password and Google Sign-In
- Role-based Registration: Separate signup flows for customers and drivers
- Email Verification: Secure account activation process
- Password Security: Toggle visibility and confirmation validation
- Session Management: JWT token-based authentication
- Trip Booking: Interactive map-based location selection
- Real-time Tracking: Live trip status and driver location
- Trip History: Comprehensive booking history with details
- Profile Management: Edit personal information and preferences
- Multi-language Interface: Localized experience in preferred language
- Trip Discovery: Search and filter available trips
- Booking Management: Accept, reject, and manage trip requests
- Earnings Tracking: Financial overview and payment history
- Vehicle Management: Update vehicle details and documents
- Performance Analytics: Trip completion rates and ratings
- Mobile-First: Optimized for smartphones and tablets
- Cross-Browser: Compatible with all modern browsers
- Progressive Enhancement: Graceful degradation for older devices
- Touch-Friendly: Optimized touch targets and gestures
- HTML5: Semantic markup and accessibility
- CSS3: Modern styling with CSS Grid and Flexbox
- JavaScript (ES6+): Vanilla JS with modern features
- Firebase: Authentication and hosting
- Google Maps API: Location services and mapping
- Python FastAPI: High-performance REST API
- PostgreSQL: Reliable database management
- JWT: Secure token-based authentication
- Render: Cloud deployment platform
- Firebase CLI: Deployment and configuration
- Git: Version control and collaboration
- VS Code: Development environment
Fill-It-Web/
├── FILL-IT-WEB-frontend/
│ └── FILL-IT-frontend/
│ ├── index.html # Landing page
│ ├── login.html # Authentication
│ ├── signup.html # User registration
│ ├── c_home.html # Customer dashboard
│ ├── d_home.html # Driver dashboard
│ ├── c_triphistrory.html # Customer trip history
│ ├── d_trip.html # Driver trip management
│ ├── *.css # Styling files
│ ├── *.svg # Icons and assets
│ └── firebase.json # Firebase configuration
└── FILL-IT-Web-backend.zip # Backend API
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Node.js (for development)
- Firebase CLI (for deployment)
-
Clone the repository
git clone https://github.com/yourusername/Fill-It-Web.git cd Fill-It-Web -
Set up Firebase
npm install -g firebase-tools firebase login firebase init hosting
-
Deploy to Firebase
firebase deploy
-
Start local server
# Using Python python -m http.server 8000 # Using Node.js npx serve FILL-IT-WEB-frontend/FILL-IT-frontend
-
Access the application
http://localhost:8000
- Trip Booking: Schedule transportation services
- Real-time Tracking: Monitor shipment progress
- Payment Management: Handle billing and payments
- Communication: Direct messaging with drivers
- History: Access complete trip records
- Trip Discovery: Browse available opportunities
- Booking Acceptance: Manage trip requests
- Route Optimization: Efficient navigation
- Earnings Tracking: Monitor income and payments
- Profile Management: Update vehicle and personal info
- POST /login - User authentication
- POST /signup - User registration
- GET /get-role - Retrieve user role
- GET /trips - Fetch available trips
- POST /trips - Create new trip
- PUT /trips/{id} - Update trip status
- DELETE /trips/{id} - Cancel trip
- POST /api/contact - Submit contact form
- GET /support - Get support information
The application is deployed on Firebase Hosting for optimal performance and global CDN distribution.
# Deploy to production
firebase deploy --only hosting
# Deploy to staging
firebase deploy --only hosting:stagingFIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_domain
FIREBASE_PROJECT_ID=your_project_id
BACKEND_URL=https://fill-it.onrender.comWe welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow HTML5 semantic standards
- Use CSS Grid and Flexbox for layouts
- Implement responsive design principles
- Write clean, documented JavaScript
- Test across multiple browsers and devices
- Email: cloudnexus@googlegroups.com
This project is licensed under the MIT License - see the LICENSE file for details.
- Firebase Team for excellent hosting and authentication services
- Google Maps API for location services
- Render for backend hosting
- All contributors who helped build this platform
Made with ❤ for the logistics community
Transform your transportation business with Fill-It-Web - Where efficiency meets innovation!