156 lines
4.6 KiB
Markdown
156 lines
4.6 KiB
Markdown
# 🚀 Quick Start Guide - Bike Service Application
|
|
|
|
Get your bike service application running in minutes!
|
|
|
|
## ⚡ Quick Commands
|
|
|
|
### Option 1: Use the startup script (Recommended)
|
|
```bash
|
|
./start-servers.sh
|
|
```
|
|
|
|
### Option 2: Use npm scripts
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Option 3: Manual startup
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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:
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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! 🚲✨
|