CarpHD

1. Overall Project Details

CarPhD is a comprehensive automotive platform designed to assist users throughout their car ownership lifecycle. The platform provides tools for researching cars, comparing prices, finding the best deals from dealer showrooms, and locating reputable service centers. It also fosters a community through forums, blogs, and an extensive review system for cars, dealers, and service centers.

2. Target Audience & Users

The platform serves multiple user personas, guiding them through distinct journeys based on their automotive needs.

User Journey Flowchart

Key User Personas:

• Prospective Car Buyers: Users looking to research cars, read/calculate ratings, compare models, and secure the "Best Price Guarantee" or showroom deals.
• Current Car Owners: Users looking for authorized service centers, exploring service discounts, or seeking advice on community forums.
• Enthusiasts & Reviewers: Users who actively contribute to the community by writing reviews (for cars, dealers, and service centers), reading blogs, and participating in forum discussions.

3. Tech Stack & Tools Used

The project is a modern web application built using the following technologies:

Core Framework

• Next.js 14: Utilizes the modern App Router (src/app) for Server-Side Rendering (SSR), Static Site Generation (SSG), and optimized routing.
• React 18: The underlying UI library.
• TypeScript: For static typing and enhanced developer experience/code safety.

State Management & Data Flow

• Jotai: A primitive and flexible state management library for React.
• Axios & Native Fetch: Used for making HTTP requests to the backend.

Styling & UI

• Tailwind CSS: Utility-first CSS framework for rapid and responsive UI development.
• Framer Motion & react-useanimations: For implementing dynamic and smooth micro-animations.
• Lucide-React & React-Icons: Extensive icon libraries for UI elements.
• React-Slick / Slick-Carousel: For implementing carousels and sliders.
• Various UI Components: react-range-slider-input, react-responsive-modal, react-simple-star-rating, react-phone-input-2.

Forms & Validation

• Formik: For managing form state, submissions, and handling complex inputs (e.g., inquiries, reviews).
• Yup: For schema-based form validation.

Other Tools

• ESLint & Prettier: For code formatting and enforcing linting rules (configured with Airbnb guidelines and Next.js recommended rules).
• Google OAuth & reCAPTCHA: For secure user authentication and spam prevention.

4. Frontend-Backend Communication Architecture

The communication layer is centralized in the src/apis directory, utilizing a hybrid approach to maximize Next.js 14's caching capabilities:

Architecture Diagram

Communication Flow Details

1. GET Requests: Handled by the native fetch API. This allows Next.js to cache responses and revalidate them (e.g., revalidate: 43200 seconds / 12 hours) to optimize performance and reduce backend load.
2. Mutations (POST, PUT, DELETE): Handled by an Axios instance configured with base URLs (NEXT_PUBLIC_HOST_API), timeouts, and standardized headers.
3. API Modules: Dedicated files for different entities (car.ts, dealer.ts, blog.ts, forum.ts, location.ts, chatbot.ts, etc.) encapsulate the specific endpoint logic.