This project showcases a modern car valuation system that leverages Azure AutoML, Next.js, and Azure Cosmos DB to create an intelligent car price estimation platform. The application allows users to upload car images, input vehicle details, and receive AI-powered price estimates while maintaining a comprehensive gallery of saved valuations with planned AI-generated summaries for each vehicle.
- Frontend: Next.js 15 with React 19 and TypeScript
- Styling: Tailwind CSS for modern responsive design
- Backend: Next.js API routes with Azure integrations
- Machine Learning: Azure AutoML for price prediction models
- Database: Azure Cosmos DB for storing car valuations
- Storage: Azure Blob Storage for car images
- AI Features: Azure Machine Learning endpoints for price estimation
- Planned Enhancement: AI-generated car summaries and market insights
- Car Image Upload: Secure image upload to Azure Blob Storage
- Price Estimation: Real-time car price prediction using Azure AutoML
- Comprehensive Input: Support for multiple car attributes (brand, model, year, mileage, engine specs, fuel type, transmission)
- Valuation Gallery: Browse and view all previously estimated cars
- Modern UI: Responsive design with modal dialogs and loading states
- Data Persistence: All estimates saved to Azure Cosmos DB
- Planned: AI-generated summaries for each car's market position and insights
The system consists of three main components:
-
Next.js Frontend
- Modern React-based UI with TypeScript
- Real-time form validation and file upload
- Interactive gallery for viewing saved estimates
- Modal system for enhanced user experience
-
Azure AutoML Integration
- Machine learning model deployment on Azure
- RESTful API endpoints for price prediction
- Real-time inference with model versioning
- Comprehensive logging and error handling
-
Azure Cloud Storage
- Cosmos DB: NoSQL database for car valuation records
- Blob Storage: Secure image storage with public access
- ML Endpoints: Hosted AutoML models for predictions
car-pricer/
├── src/
│ └── app/
│ ├── page.tsx # Main estimation form
│ ├── cars/
│ │ └── page.tsx # Gallery of saved estimates
│ ├── api/
│ │ ├── estimate/
│ │ │ └── route.ts # ML prediction & data saving
│ │ └── cars/
│ │ └── route.ts # Fetch saved estimates
│ └── components/
│ └── Modal.tsx # Reusable modal component
├── package.json
└── README.md
- Azure subscription with the following services:
- Azure Machine Learning workspace
- Azure Cosmos DB account
- Azure Blob Storage account
- Node.js 18+ and npm/yarn
- Car dataset for training AutoML models
- Train a regression model using your car dataset
- Deploy the model to a real-time endpoint
- Note the endpoint URL and API key
- Create a database and container
- Configure appropriate partition key and indexing
- Create a container for car images
- Configure public read access for image URLs
Create a .env.local file in the car-pricer directory:
# Azure Machine Learning
AI_ENDPOINT_URL=https://your-ml-endpoint.azureml.net/score
AZURE_ML_API_KEY=your_ml_api_key
# Azure Cosmos DB
AZURE_COSMOS_CONNECTION_STRING=your_cosmos_connection_string
AZURE_COSMOS_DATABASE_NAME=your_database_name
AZURE_COSMOS_CONTAINER_NAME=your_container_name
# Azure Blob Storage
AZURE_STORAGE_CONNECTION_STRING=your_storage_connection_string
AZURE_STORAGE_BLOB_CONTAINER_NAME=your_blob_container_name-
Install Dependencies
cd car-pricer npm install -
Run Development Server
npm run dev
-
Build for Production
npm run build npm start
Processes car estimation requests with image upload and vehicle details.
Request: FormData with:
file-upload: Car image filebrand,model,year,mileage: Basic car infoenpower,envolume,fuel_type,transmission: Engine specs
Response:
{
"message": "Estimation successful!",
"data": {
"id": "uuid",
"brand": "Toyota",
"model": "Camry",
"estimatedPrice": 25000,
"imageUrl": "https://...",
"createdAt": "2024-01-01T00:00:00Z"
}
}Retrieves all saved car valuations from Cosmos DB.
Response:
{
"items": [
{
"id": "uuid",
"brand": "Toyota",
"model": "Camry",
"year": 2020,
"mileage": 50000,
"estimatedPrice": 25000,
"imageUrl": "https://...",
"createdAt": "2024-01-01T00:00:00Z"
}
]
}- User Input: User uploads car image and fills out vehicle details
- Image Processing: Image uploaded to Azure Blob Storage
- ML Prediction: Vehicle data sent to Azure AutoML endpoint
- Data Storage: Results saved to Cosmos DB with image URL
- Gallery Display: Users can browse all saved estimates
- Future Enhancement: AI summaries generated for each car
- AI Car Summaries: Generate market insights and vehicle analysis using Azure OpenAI
- Advanced Filters: Filter gallery by price range, brand, year, etc.
- Price History: Track price trends for similar vehicles
- Export Functionality: Download estimates as PDF reports
- Comparison Tool: Side-by-side car comparisons
- Caching: Implement Redis for frequently accessed data
- Image Optimization: Compress images before upload
- ML Optimization: Batch predictions for multiple cars
- Database Indexing: Optimize Cosmos DB queries with proper indexing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow TypeScript best practices
- Maintain consistent code formatting with Prettier
- Add proper error handling for all Azure service calls
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to the Azure AutoML team for the powerful machine learning platform
- Azure Cosmos DB team for the scalable NoSQL database solution
- Next.js team for the excellent React framework
- Azure Blob Storage for reliable image hosting
For issues and questions:
- Check existing GitHub issues
- Create a new issue with detailed information
- Include relevant logs and error messages
Built with ❤️ using Azure Cloud Services and Next.js