DEV Community

Cover image for Laravel React - Purity Dashboard (Free Product)
Sm0ke
Sm0ke

Posted on • Originally published at appseed.us

Laravel React - Purity Dashboard (Free Product)

Hello Coders!

This article presents an open-source full-stack seed project crafted in Laravel and React on top of a pixel-perfect Chakra UI design: Purity Dashboard. The product can be downloaded and used directly from Github and the permissive license permits unlimited copies and usage for commercial products. For newcomers, Purity React is an innovative design crafted by Creative-Tim and Laravel is a leading web framework written in PHP.

Thanks for reading! - Content provided by App Generator.



Laravel React - Purity Dashboard.


How to use the product

This open-source product can be used in a local environment by typing a few commands in the terminal window. Before trying to compile Laravel React Purity, make sure the workstation has a minimal programming kit to complete the task:

  • Php 7.4+
  • NodeJS 12.x or above
  • GIT - command line versioning tool
  • A modern code editor like VsCode or Atom

Once this minimal toolchain is properly installed and accessible in the terminal, we can proceed further and compile the product starting with the backend:

Step #1 - Download the product via GIT

$ git clone https://github.com/app-generator/laravel-react-purity-dashboard.git
Enter fullscreen mode Exit fullscreen mode

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
  • Compile and start the React UI
  • (Optional) Change the API port exposed by Laravel Codebase
  • (Optional) Configure the API port used by the React UI to communicate with the backend

With all the above steps completed, we should see the product running in the browser and being able to register new users, authenticate and interact with the UI.


Compile and Start the 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
Enter fullscreen mode Exit fullscreen mode

At this point, the API should be up & running and we can test it using POSTMAN or curl.

Laravel API Server - Product Banner.


Start the React UI

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

The React UI comes pre-configured to communicate with the backend using the port 5000 but we can easily change this via the configuration src/config/constant.js:

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

Once the backend and the frontend are both up & running, we should be able to register new users, authenticate and interact with this nice design.

React Laravel Purity Dashboard - Billing

React Laravel Purity Dashboard - Billing Page.


React Laravel Purity Dashboard - RTL Support

React Laravel Purity Dashboard - RTL Support.


Thanks for reading! For more resources please access:

Discussion (6)

Collapse
crearesite profile image
WebsiteMarket

The design is great and authentication part really useful.
How can I inject real data into the charts?
Ty!

Collapse
sm0ke profile image
Sm0ke Author

Hello,

This requires a new node in the API and replace the hardcoded data from the React UI with the data pulled from the backend.

πŸš€πŸš€

Collapse
crearesite profile image
WebsiteMarket

Ty!

Thread Thread
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Collapse
uithemes profile image
ui-themes

Nice design! Thank you for your efforts.

Collapse
sm0ke profile image
Sm0ke Author

πŸš€πŸš€