Za-Wrappe Food and Drink Web Payment and Ordering App

Introduction

Welcome to the unofficial web payment and ordering app of Za-Wrappe. This README provides instructions for setting up Laravel Jetstream with Vue, configuring the project for VSCode environments, and tips for debugging and development, as well as integrating Paymongo and Pusher for payment processing and real-time interactions.

Prerequisites

Before starting, ensure you have:

Git
XAMPP
PHP
Composer
Node.js and npm
VSCode (with PHP, Laravel and Vue extensions) for setup or PHPStorm
A web server (like Apache or Nginx) or Laravel's built-in server for testing

Setting Up the Project

Clone the Repository:
- Use Git to clone the Hashi project:
```
git clone https://github.com/ronhedwigzape/za-wrappe
```
Open the Project:
- In VSCode/PHPStorm, open the cloned project directory.
Install Composer Dependencies:
- In the terminal, run:
```
composer install
```
Install Node.js Dependencies:
- Install the necessary Node.js dependencies:
```
npm install
```
Generate App Key:
- If there's no app key yet, generate one:
```
php artisan key:generate
```
Seed the Database:
- After migrating your database, you can seed it with test data to facilitate development and testing. Run the following command to seed your database using Laravel's seeder classes:
```
php artisan migrate --seed
```
- This command will execute the DatabaseSeeder class, which may call other seed classes to populate your tables with data. Ensure that your seeder files are properly set up to insert the necessary data into your database.
- By specifying the migrate --seed command, you ensure that the database is migrated to the latest schema before seeding it. This approach helps in maintaining consistency and reliability in your development and testing environments, ensuring that your application's database structure and initial data are set up correctly.
Set Up Paymongo API Keys:
- Sign up for a Paymongo account and obtain your API keys from the Paymongo dashboard.
- Add your Paymongo API keys to your .env file:
```
PAYMONGO_PUBLIC_KEY=your_public_key
PAYMONGO_SECRET_KEY=your_secret_key
```
Set Up Pusher API Keys:
- Create a Pusher account and create an application to get your Pusher app credentials.
- Add your Pusher API keys to your .env file:
```
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_app_cluster
```
Run the App:
- Start the Laravel server by running the following command in a terminal:
```
php artisan serve
```
- In another terminal, compile your assets and watch for changes with:
```
npm run dev
```

Debugging and Development

Debugging Tools:
- Use VSCode/PHPStorm for debugging with breakpoints.
Using Laravel Telescope:
- Laravel Telescope provides insight into the requests coming into your application, exceptions, log entries, database queries, queued jobs, mail, notifications, cache operations, scheduled tasks, variable dumps and more. Install it using composer:
```
composer require laravel/telescope
```
Checking Logs:
- Use the Laravel log in storage/logs/laravel.log or php artisan tail in the terminal.
Troubleshooting:
- Refer to Laravel documentation or the project's issue tracker for help.

Additional Steps for VSCode

Install Extensions:
- Install the PHP, Laravel and Vue extensions from the VSCode marketplace.
Open and Run the Project:
- Open the project folder in VSCode.
- Use the integrated terminal to run composer install and npm run dev.
- Launch the app with php artisan serve.
Debugging in VSCode:
- Leverage the built-in debugging tools in VSCode.
- Set breakpoints and inspect variables during runtime.
Viewing Output and Logs:
- Monitor the output and logs in the VSCode console.