This repository contains the frontend web application for the AutoFyx Vehicle Analyzer System. Built with Next.js and React, it provides a highly responsive, modern, and dark-themed user interface for users to discover, analyze, and compare vehicles.
- Interactive Dashboard: A premium, dark-themed dashboard providing an overview of vehicle recommendations, saved searches, and analytics.
- Advanced Vehicle Search & Filtering: Dynamic search functionality to find vehicles based on brand, model, price, and custom features.
- Financial Insights: Detailed breakdowns of 5-year total cost of ownership, loan estimations, and maintenance cost predictions with interactive charts.
- AI Integration: Leveraging Groq and Google Gemini to provide intelligent conversational assistants and automated insights.
- PDF Export: Ability to generate and download comprehensive vehicle reports.
- Responsive Design: Fully optimized for both desktop and mobile viewing with a seamless navigation experience.
- Framework: Next.js (App Router), React
- Styling: Tailwind CSS, Framer Motion (for animations), Shadcn UI (Radix UI)
- Data Management: React Query, Axios
- Forms & Validation: React Hook Form, Zod
- Charts: Recharts
- Node.js (v18 or higher)
- npm, yarn, or pnpm
-
Clone the repository and navigate to the project directory:
cd frontend/autofyx -
Install the required dependencies:
npm install
-
Set up environment variables: Copy
.env.exampleto.env.localand add your backend API URL and any required third-party API keys.
Start the development server:
npm run devOpen http://localhost:3000 in your browser to see the application in action.
app/- Next.js App Router pages and layouts.components/- Reusable UI components (buttons, forms, charts, layouts).lib/&utils/- Helper functions, API configurations, and utilities.types/- TypeScript interface and type definitions.public/- Static assets such as images and fonts.