Quick Start - WI-CARPOOL Documentation

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js (version 18.x or higher)
npm, yarn, or pnpm package manager
Git for version control
Laravel Backend API (running and accessible)

Step 1: Clone the Repository

Clone from your repository

# Clone the repository
git clone https://github.com/your-username/wi-carpool-frontend.git
cd wi-carpool-frontend

Step 2: Install Dependencies

Install project dependencies

# Using npm
npm install

# Or using yarn
yarn install

# Or using pnpm
pnpm install

Step 3: Configure Environment

The application uses constants defined in src/api/constants.ts to connect to your Laravel backend.

Update API configuration

// src/api/constants.ts
export const AppConstants = {
  // Update this to your Laravel backend URL
  baseUrl: 'https://your-backend-domain.com/api/',
  
  // Update this to your Laravel backend domain
  baseDomain: 'https://your-backend-domain.com',
  
  // Update with your Google Maps API key
  mapKey: 'YOUR_GOOGLE_MAPS_API_KEY',
  
  // ... rest of the configuration
};

Important: Make sure your Laravel backend is running and accessible at the URL specified in baseUrl.

Step 4: Start Development Server

Run the development server

# Start the development server
npm run dev

# Or with yarn
yarn dev

# Or with pnpm
pnpm dev

The application will be available at http://localhost:8080

Step 5: Verify Setup

Once the development server is running, verify that everything is working correctly:

1. Check Frontend

Navigate to http://localhost:8080 and ensure the homepage loads correctly.

2. Test API Connection

Try to sign up or sign in to verify the connection to your Laravel backend is working.

3. Check Console

Open browser DevTools and check for any console errors. API requests should be visible in the Network tab.

4. Test Core Features

Test basic functionality like user registration, login, and ride searching to ensure everything works.

Common Issues

CORS Issues

If you encounter CORS errors, ensure your Laravel backend is configured to accept requests from your frontend domain:

Laravel CORS configuration

# In your Laravel backend config/cors.php
'allowed_origins' => [
    'http://localhost:8080',
    'https://your-frontend-domain.com'
],

API Connection Issues

If API requests are failing:

Verify the baseUrl in src/api/constants.ts is correct
Ensure your Laravel backend is running and accessible
Check the Network tab in DevTools for specific error messages

Build Issues

If you encounter build errors:

Clear node_modules and reinstall dependencies
Ensure you're using the correct Node.js version
Check for TypeScript errors in your IDE

Next Steps

Now that you have WI-CARPOOL running locally, explore these resources:

Quick Start Guide