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 - LIVE demo
- ✨ Laravel React Purity - Source code
- 🔥 More React Apps - full-stack seed projects
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
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 startthe Laravel API Backend -
Compile and startthe 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
At this point, the API should be up & running and we can test it using POSTMAN or curl.
Start the React UI
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start
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
};
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- RTL Support
Thanks for reading! For more resources please access:
- ✨ AppSeed for support via email and Discord
- ✨ React Apps - a curated index with Full-Stack Starters
Top comments (6)
The design is great and authentication part really useful.
How can I inject real data into the charts?
Ty!
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.
🚀🚀
Ty!
🚀🚀
Nice design! Thank you for your efforts.
🚀🚀