🏆 Laravel Real-Time Auction System

---

🚀 About the Project

This is a Real-Time Auction System built using Laravel 12.x, InertiaJS, and React. It allows users to create and participate in live auctions with real-time bidding updates using Laravel Echo and Reverb for broadcasting. The system supports user authentication, bid tracking, and status updates with a responsive user interface using shadcn/ui.

The project is containerized using Laravel Sail on WSL2 (Windows Subsystem for Linux), which sets up a complete development environment with Docker. Sail handles the installation of PHP, MySQL, Redis, and other services, ensuring a consistent environment for development and deployment across different systems.

---

📸 Features

• ✅ User Authentication (Register, Login, Logout)
• ✅ Create and Manage Auctions
• ✅ Real-Time Bidding with WebSockets
• ✅ Auction Status Tracking (Active, Pending, Closed, Cancelled)
• ✅ Upload Multiple Images and a Video for Each Auction
• ✅ Role-Based Access (Admin/User)
• ✅ Responsive UI with Tailwind CSS and shadcn/ui

---

🏗️ Tech Stack

Technology	Description
Laravel 12.x	Backend Framework
InertiaJS	Full Stack Frontend Handling
React	Frontend Framework
Laravel Echo + Reverb	Real-Time Event Broadcasting
MySQL	Database
Docker + Sail	Development Environment
shadcn/ui	UI Components
Tailwind CSS 3.4.17	Styling

---

🛠️ Installation

🚀 Installation

✅ Clone the repository

git clone https://github.com/JjayFabor/swift-bidder.git
cd realtime-auction

✅ Set up environment

Create a .env file:

cp .env.example .env

Generate the application key:

php artisan key:generate

✅ Install dependencies

composer install
npm install

✅ Create database

Create a MySQL database named auction_db and update your .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auction_db
DB_USERNAME=root
DB_PASSWORD=

✅ Run Docker with Sail

./vendor/bin/sail up -d

✅ Run migrations and seed data

./vendor/bin/sail artisan migrate --seed || php artisan migrate --seed

✅ Run Vite for frontend

npm run dev

📧 Mail Configuration (Gmail)

To enable email notifications through Gmail, configure the mail settings in your .env file as shown below:

✅ .env Configuration

Add the following to your .env file:

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your-email@gmail.com
MAIL_PASSWORD="your-app-password"
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your-email@gmail.com
MAIL_FROM_NAME="${APP_NAME}"

✅ Setting Up Gmail Account for SMTP

1. Enable 2-Step Verification on your Google account.

2. Create an App Password:

   • Go to Google Account Settings → Security → App Passwords.
   • Select Mail → Other → Type "Laravel App."
   • Copy the generated password and use it as MAIL_PASSWORD in the .env file.

✅ Test Email Configuration

You can test your email configuration using the following Artisan command:

php artisan tinker

In Tinker, send a test email:

Mail::raw('Test email from Laravel', function ($message) {
    $message->to('recipient@example.com')
            ->subject('Test Email');
});

If the configuration is correct, the email will be sent successfully.

🎯 Helpful Resource:

👉 How to Set Up Gmail SMTP in Laravel

🔑 Seeder Data

📥 Admin & User Credentials (Generated from Seeders)

✅ Admin Credentials

Email	Password
admin@example.com	admin1234

✅ User Credentials

Email	Password
test@example.com	test1234

⚠️ Note: These credentials are created when you run php artisan migrate --seed.

📚 Resources

• 📖 Laravel Documentation
• 📖 Laravel Sail Documentation
• 📖 InertiaJS Documentation
• 📖 React Documentation
• 📖 Tailwind CSS Documentation
• 📖 shadcn/ui Documentation
• 📖 Reverb Documentation

📄 License

This project is open-sourced under the MIT license.

---

💬 Contact

👤 Jaylord Vhan Fabor
📧 Email: faborjaylordvhan@gmail.com
📍 LinkedIn: JjayFabor