Skip to main content

Guide to Install Quizix on Mac

This guide will help you to install Quizix on your Mac machine. Quizix has two parts: the front end and the back end. The front end is a web application which is built using Next.js, and the back end is a server that handles the database and API requests which is built using Laravel.

To install Quizix on your Mac machine, you will need to follow these steps:

  1. Install XAMPP
  2. Install Composer
  3. Install Node.js
  4. Install Our Admin Project
  5. Install Our Client Project
  6. Configure Environment Variables
  7. Start the Frontend and Backend Servers

Prerequisites​

Before you start, make sure you have the following installed on your Mac machine:

Please follow the below steps,

  1. Extract the quizix package that you download from CodeCanyon.
  2. After that you see two zip files called 'core.zip', 'deployment.zip' and 2 folders local_deployment, documentation.
  3. Now extract the core.zip file to the core folder.
  4. now you'll get two zip files called admin.zip and standalone-client.zip on core folder.

As You can see the folder structure like below,

quizix
├── documentation
├── core
│   ├── admin.zip
│   ├── standalone-client.zip
│   └── static-client.zip
├── local_deployment
└── deployment.Zip

Step 1: Install Homebrew​

  1. Open a terminal window.
  2. Run the following command to install Homebrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Follow the on-screen instructions to complete the installation.

Step 2: Install Composer​

  1. Open a terminal window.
  2. Run the following command to install Composer:
brew install composer
  1. Verify the installation by running the following command:
composer --version

Step 3: Install Node.js​

  1. Open a terminal window.
  2. Run the following command to install Node.js:
brew install node
  1. Verify the installation by running the following command:
node --version

Step 4: Install PHP​

  1. Open a terminal window.

  2. Run the following command to install PHP:

brew install php
  1. Verify the installation by running the following command:
php --version

Step 5: Install MySQL​

  1. Open a terminal window.

  2. Run the following command to install MySQL:

brew install mysql
  1. Start the MySQL service by running the following command:
brew services start mysql
  1. Verify the installation by running the following command:
mysql --version

  1. Create a new MySQL database for your Laravel project:

  2. Open a terminal window.

  3. Run the following command to log in to MySQL:

mysql -u root -p
  1. Enter your MySQL root password when prompted.
  2. Create a new database Laravel project:
CREATE DATABASE quizix_db;
  1. Create a new user:
CREATE USER 'quizix_user'@'localhost' IDENTIFIED BY 'password';
  1. Grant the user all privileges on the database:
GRANT ALL PRIVILEGES ON quizix_db.* TO 'quizix_user'@'localhost';
  1. Flush the privileges to ensure that the changes take effect:
FLUSH PRIVILEGES;
  1. Exit the MySQL shell by running the following command:
EXIT;

Step 6: Set Up Our Laravel Project​

Note: If you are a developer please follow the below steps to install our Laravel project. If you are not a developer please don't use the below steps, only follow GUI steps.

  1. Extract our project files to the directory then in this folder have 2 folder documentation and core zip file. Extract core zip file to core folder. Than will see two folder another two zip files one is admin and other is client. Extract admin zip file to admin folder.
cd ~/Downloads/quizix-project
  1. Comment the below line on /public/index.php file:
 if (! file_exists(__DIR__.'/../storage/installed')) {
     header('Location: /installer/index.php');
     exit;
 }
//  to

// if (! file_exists(__DIR__.'/../storage/installed')) {
//     header('Location: /installer/index.php');
//     exit;
// }
  1. Install the project dependencies using Composer:
composer install
  1. Create a copy of the .env.example file and rename it to .env:
cp .env.example .env

  1. Configure your .env file with the correct database credentials.

  2. Generate an application key by running the following command:

php artisan key:generate
  1. Run the following command to migrate the database:
php artisan migrate
  1. Generate the application storage link by running the following command:
php artisan storage:link
  1. Generate dummy data by running the following command:
php artisan db:seed
  1. Run the following command to start the Laravel development server:
php artisan serve
  1. Start vite by running the following command:
npm run dev

Alternative: Using Laravel Valet​

If you want a more seamless local development experience, install Laravel Valet:

composer global require laravel/valet
valet install
cd ~/Projects/my-laravel-app
valet link
valet open

Now you can open your project in your browser using the valet open command.

Open a web browser and navigate to http://localhost:8000 to view your Quizix Admin project.

Step 7: Install Our Client Project​

  1. Extract the client project files to the directory.
  2. Open a command prompt and navigate to the project directory.
  3. Run the following command to install the project dependencies:
npm install --force
  1. copy the .env.example file and rename it to .env.local and update the values in the .env.local file.

Step 8: Configure Environment Variables​

cp .env.example .env.local
NEXT_PUBLIC_API_BASE_URL=http://127.0.0.1:8000
NEXT_PUBLIC_TOKEN_NAME=token
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Step 9: Start the Frontend​

npm run dev

Now you can access the frontend at http://localhost:3000

Conclusion​

Congratulations! You have successfully installed quizix on your Mac. You can now start customizing your application. If you have any questions, feel free to reach out to our support team. 🚀