bikeservice/QUICKSTART.md

🚀 Quick Start Guide - Bike Service Application

Get your bike service application running in minutes!

⚡ Quick Commands

Option 1: Use the startup script (Recommended)

./start-servers.sh

Option 2: Use npm scripts

npm run dev

Option 3: Manual startup

# Terminal 1 - Start Laravel backend
cd backend
php artisan serve --host=0.0.0.0 --port=8000

# Terminal 2 - Start Vue.js frontend
cd frontend
npm run dev

🌐 Access Your Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• API Endpoints:
  • Service Requests: http://localhost:8000/api/service-requests
  • Blocked Dates: http://localhost:8000/api/blocked-dates
  • Settings: http://localhost:8000/api/settings

✅ What's Working

• ✅ Laravel 12 backend with bike service API
• ✅ Vue.js 3 frontend with modern UI
• ✅ Service request form with validation
• ✅ Admin dashboard with three tabs
• ✅ Database with proper migrations and seeders
• ✅ API proxy configured (frontend → backend)
• ✅ Responsive design for all devices
• ✅ Form validation and error handling

🚲 Application Features

Customer Side

• Home Page: Welcome page with service information
• Booking Form: Service request form with all required fields
• Validation: Form validation for dates, contact info, etc.
• Success Feedback: Confirmation modal after submission

Admin Side

• Service Requests Tab: View and manage all service requests
• Blocked Dates Tab: Block specific dates from booking
• Settings Tab: Configure admin email and business details
• Communication Tools: Send emails and SMS to customers
• Request Management: Update status, dates, and times

🔧 Test the Application

1. Customer Flow

1. Open http://localhost:3000 in your browser
2. Click "Book Service Now" button
3. Fill out the service request form
4. Submit the form and see the success message

2. Admin Flow

1. Navigate to the "Admin" section
2. View submitted service requests in the table
3. Click on any request row to see details
4. Try updating request status or adding blocked dates
5. Test the communication features

3. API Testing

# Test service requests endpoint
curl http://localhost:8000/api/service-requests

# Test blocked dates endpoint
curl http://localhost:8000/api/blocked-dates

# Test settings endpoint
curl http://localhost:8000/api/settings

🎯 Key Features to Try

• Form Validation: Try submitting the form with missing fields
• Date Validation: Try booking a date in the past
• Contact Validation: Try submitting without email or phone
• Admin Actions: Click different action buttons in the admin table
• Modal Dialogs: Open and close various admin modals
• Responsive Design: Resize your browser to test mobile layout

🔧 Troubleshooting

If ports are already in use:

# Kill processes on ports 3000 and 8000
lsof -ti:3000 | xargs kill -9
lsof -ti:8000 | xargs kill -9

If you get a 404 on API routes:

• Make sure the Laravel server is running
• Check that bootstrap/app.php includes the API routes
• Verify the server is running on port 8000

If the frontend can't connect to backend:

• Ensure both servers are running
• Check that the Vite proxy is configured correctly
• Verify the backend is accessible at http://localhost:8000

If the database seems empty:

• Run php artisan migrate:fresh --seed in the backend directory
• Check that the database file exists and is writable

📱 Sample Data

The application comes with:

• Initial Settings: Admin notification email, business name, etc.
• Admin User: admin@bikeservice.com (created automatically)
• Empty Tables: Ready for your first service requests

🎉 Next Steps

• Add Real Data: Submit actual service requests
• Configure Settings: Update admin email and business details
• Block Dates: Add dates when you're not available
• Test Communications: Send test emails/SMS (configure services first)
• Customize UI: Modify colors, branding, and layout
• Add Features: Implement additional business logic

🔗 Useful Commands

# Backend commands
cd backend
php artisan migrate:status          # Check migration status
php artisan route:list             # List all API routes
php artisan tinker                 # Interactive PHP shell
php artisan make:controller NewController  # Create new controller

# Frontend commands
cd frontend
npm run build                      # Build for production
npm run preview                    # Preview production build
npm install package-name           # Install new packages

Happy coding! 🚲✨