Go AutoMarket Pro

Welcome to Go AutoMarket Pro, the ultimate marketplace for vehicles, parts, and services. This project is a robust web application built with modern technologies to provide a seamless experience for buyers, sellers, agencies, and service providers in the automotive industry.

Project Overview
Tech Stack
Project Structure
Getting Started
Key Features
Authentication
User Profiles
Dashboard
Admin Management Pages
User Roles
Firebase Integration

Project Overview

Go AutoMarket Pro is a Next.js application designed to serve as a central hub for all things automotive. It features a public-facing marketplace for browsing listings and a secure, role-based dashboard for users to manage their activities.

Tech Stack

This project is built on a modern, powerful tech stack:

Framework: Next.js (with App Router)
Language: TypeScript
Styling: Tailwind CSS
UI Components: ShadCN UI
Backend & Database: Firebase (Authentication, Firestore, Storage)
Form Management: React Hook Form & Zod for validation
Icons: Lucide React

Project Structure

The project follows a standard Next.js App Router structure.

/ ├── public/ # Static assets ├── src/ │ ├── app/ # Application routes │ │ ├── (public)/ # Routes accessible to everyone (e.g., home, login) │ │ ├── dashboard/ # Protected routes for authenticated users │ │ ├── globals.css # Global styles │ │ └── layout.tsx # Root layout │ ├── components/ # Reusable components │ │ ├── auth/ # Authentication-related components │ │ ├── dashboard/ # Dashboard-specific components │ │ ├── public/ # Components for public pages │ │ └── ui/ # ShadCN UI components │ ├── hooks/ # Custom React hooks (e.g., useToast) │ ├── lib/ # Libraries and utility functions │ │ ├── firebase.ts # Firebase configuration and initialization │ │ ├── types.ts # TypeScript type definitions │ │ └── utils.ts # Utility functions (e.g., cn for classnames) ├── ... # Configuration files (tailwind.config.ts, next.config.ts, etc.) └── README.md

Getting Started

To get the project up and running locally, follow these steps:

1. Clone the repository:

    git clone <repository-url>

2. Install dependencies:

npm install

3. Set up Firebase:

Create a Firebase project in the Firebase Console.
Enable Authentication (Email/Password), Firestore, and Storage.
Get your Firebase project configuration and add it to src/lib/firebase.ts.

4. Run the development server:

npm run dev

The application will be available at http://localhost:3000.

Key Features

Authentication

User authentication is handled by Firebase Authentication. Users can register and log in with their email and password.

Registration: New users provide their full name, nickname, email, password, and select a role (BUYER, SELLER, AGENCY, PROVIDER, ADMIN).
Data Storage: Upon successful registration, a new user document is created in the users collection in Firestore, storing their fullName, nickname, email, and role.

User Profiles

Authenticated users have a dedicated profile page where they can view and manage their information.

View Information: Displays the user's photo, name (or nickname), email, role, and unique user ID (UID).
Edit Information: Users can update their profile picture, full name, nickname, and role. They can also manage a list of phone numbers, specifying which is primary and which is linked to WhatsApp.
Display Name Preference: A switch allows users to decide whether to display their nickname publicly instead of their full name.

Dashboard

The dashboard is the central hub for authenticated users. The content and navigation are tailored based on the user's role.

Role-Based Access: Navigation links in the header are dynamically rendered based on the user's role, ensuring they only see relevant sections (e.g., "Vehículos" for sellers, "Manage Users" for agencies).
Core Pages: Includes a main dashboard overview, vehicles management, settings, and the user profile page.

Admin Management Pages

For administrators, a comprehensive set of management pages are available under the "Gestión" (Management) dropdown in the dashboard header.

Countries (/dashboard/countries): A comprehensive interface for managing country data, including add, edit, delete, bulk operations, import/export from CSV, and real-time filtering.
Locations (/dashboard/locations): Manage a hierarchical tree of geographical locations (e.g., Country > State > City). Supports any level of nesting, making it adaptable to any country's address format.
Banks (/dashboard/banks): Manage bank information, linking each bank to a country. Includes details like SWIFT/BIC, address, and contact information.
Accounts (/dashboard/accounts): Manage individual bank accounts, linking them to a specific bank and defining currency, balance, and account details.
Brands (/dashboard/brands): Manage vehicle brands, including their name, logo (uploaded to Firebase Storage), and country of origin.
Vehicle Type Categories (/dashboard/vehicle-type-categories): Manage categories for vehicle types (e.g., "Passenger Cars", "Commercial Vehicles"). Supports nested subcategories.
Vehicle Types (/dashboard/vehicle-types): Define different classes of vehicles (e.g., Sedan, SUV, Truck) and assign them to one or more categories. Each type has a name, description, and a representative image.
Models (/dashboard/models): Link brands with vehicle types to create specific models (e.g., Toyota Corolla, Ford F-150). Includes a start year and an optional end year for the model.
General Features (/dashboard/general-features): Create custom dynamic fields for vehicle listings. Define a feature's name, field type (text, select, checkbox, radio), an optional icon, and assign it to applicable vehicle types. Allows for hierarchical option groups for select and radio fields.
Additional Features (/dashboard/additional-features): Manage categories of optional features (e.g., Security, Comfort) and the specific features within each category (e.g., ABS Brakes, Sunroof).
Special Tags (/dashboard/special-tags): Create and manage descriptive tags (e.g., Urgent, New) that can be applied to vehicle listings. Tags can have custom colors and animated text effects.
Subscription Plans (/dashboard/subscription-plans): Define various subscription plans for listings, specifying price, duration, and included features. Plans can be assigned to specific vehicle types.
Gallery Settings (/dashboard/gallery-settings): Configure the required image views for different vehicle types (e.g., a car needs a front, back, and side view, while a motorcycle might only need a front view).

User Roles

The application uses a role-based access control system to tailor the user experience. The available roles are:

`BUYER`	Can browse and purchase vehicles, parts, and services.
`SELLER`	Can list vehicles and parts for sale.
`AGENCY`	Can manage multiple sellers and their listings.
`PROVIDER`	Can offer automotive services like repairs and detailing.
`ADMIN`	Has full access to all platform features and settings.

Firebase Integration

Firebase is at the core of the backend functionality.

firebase.ts: The src/lib/firebase.ts file initializes and exports the necessary Firebase services (Auth, Firestore, Storage). It's configured to be a singleton, ensuring a single Firebase instance across the app.
Firestore Data Model:

users collection

Each document is keyed by the user's UID from Firebase Authentication.

Type
`uid`	string	User's unique ID from Firebase Authentication.
`fullName`	string	The full name of the user.
`nickname`	string (optional)	A public-facing nickname.
`useNicknamePublicly`	boolean	If `true`, the nickname is displayed publicly instead of the full name.
`email`	string	The user's email address.
`role`	string	User role (e.g., `BUYER`, `SELLER`, `ADMIN`).
`photoURL`	string (optional)	URL for the user's profile picture stored in Firebase Storage.
`phoneNumbers`	array of objects	List of phone numbers: `{ number: string, isPrimary: boolean, isWhatsApp: boolean }`.
`disabled`	boolean (optional)	If `true`, the user's access to the platform is blocked.

countries collection