React Laravel Purity Dashboard

Open-source full-stack seed project that uses a React UI powered by a simple Laravel API Server. Laravel React Purity sample can be used to bootstrap fast a new project using a tested development-ready stack or simply for eLearning purposes by beginners. For newcomers, React is a popular Javascript library for coding user interfaces baked by Facebook and Laravel is a leading web framework written in PHP.

Features

• Innovative Chakra UI Design - Crafted by Creative-Tim
• React, Redux, Redux-persist
• Authentication: JWT Login/Register/Logout
• Full-stack ready using Laravel API Server (open-source project)
  • Simple, intuitive codebase - can be extended with ease.
  • Stack: PHP 7.4+ / Laravel 8 / Doctrine
  • Authentication via JWT Auth a dedicated library for Laravel and Lumen

Links

• 👉 React Laravel Purity Dashboard - product page
• 👉 React Laravel Purity Dashboard - LIVE Demo
• 👉 LIVE Support via Discord - provided by AppSeed

General Information

The product is built using a two-tier pattern where the React frontend is decoupled logically and physically from the API backend. In order to use the product in a local environment, a few simple steps are required:

• Compile and start the Laravel API Backend
  • be default the server starts on port 5000
• Compile and start the React UI
  • UI will start on port 3000 and expects a running backend on port 5000
• Configuration (Optional)
  • Change the API port
  • Configure the API port used by the React UI to communicate with the backend

How to use the product

Step #1 - Start the Laravel API

$ cd laravel-api
$ 
$ # Install Modules
$ composer install
$ cp .env.example .env 
$ php artisan key:generate
$
$ # Generate a `secret` key used by JWT Authentication Flow
$ php artisan jwt:secret
$ 
$ # Set up the database
$ touch database/database.sqlite
$ php artisan migrate
$
$ # Start the server
$ php -S localhost:5000 server.php

Troubleshooting

To have a successful compilation of this product, make sure you have the following PHP extensions installed and enabled:

• php-xml - required by Php-Unit
• php7.4-sqlite - The SQLite driver required by Laravel ORM

$ # Php XML - required by Php Unit
$ sudo apt install php-xml php-cli php-mbstring php7.4-sqlite

Step #2 - Compile & start the React UI

$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start 

Configuration (Optional)

Change the port exposed by the Laravel API

$ php -S localhost:5001 server.php

Now, the API can be accessed on port 5001

Update the API port used by the React Frontend

API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

API

For a fast set up, use this POSTMAN file: api_sample

Register - api/users/register (POST request)

POST api/users/register
Content-Type: application/json

{
    "username":"test",
    "password":"pass", 
    "email":"[email protected]"
}

Login - api/users/login (POST request)

POST /api/users/login
Content-Type: application/json

{
    "password":"pass", 
    "email":"[email protected]"
}

Logout - api/users/logout (POST request)

POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)

{
    "token":"JWT_TOKEN"
}

Product UI

React Laravel Purity Dashboard - User

React Laravel Purity Dashboard - Billing

React Laravel Purity Dashboard - RTL Support

Links & Resources

• Ask for Support on Discord
• See for React Starters - index provided by AppSeed

React Laravel Purity Dashboard - Open-source Seed Project provided by AppSeed App Generator