https://github.com/app-generator/laravel-react-purity-dashboard
React Laravel - Purity Dashboard (Open-Source) | AppSeed
https://github.com/app-generator/laravel-react-purity-dashboard
appseed chakra-ui laravel react
Last synced: 3 months ago
JSON representation
React Laravel - Purity Dashboard (Open-Source) | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/laravel-react-purity-dashboard
- Owner: app-generator
- License: other
- Created: 2021-11-15T15:57:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-05T13:56:09.000Z (about 3 years ago)
- Last Synced: 2025-03-11T05:55:53.646Z (4 months ago)
- Topics: appseed, chakra-ui, laravel, react
- Language: PHP
- Homepage: https://appseed.us/product/purity-dashboard/api-server-laravel/react/
- Size: 2.33 MB
- Stars: 43
- Watchers: 4
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [React Laravel Purity Dashboard](https://appseed.us/product/purity-dashboard/api-server-laravel/react/)
Open-source full-stack seed project that uses a `React UI` powered by a simple `Laravel API Server`. **[Laravel React Purity](https://appseed.us/product/purity-dashboard/api-server-laravel/react/)** 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](https://bit.ly/3fKQZaL)
- React, Redux, Redux-persist
- Authentication: JWT Login/Register/Logout
- Full-stack ready using **[Laravel API Server](https://github.com/app-generator/api-server-laravel)** (open-source project)
- Simple, intuitive codebase - can be extended with ease.
- Stack: PHP 7.4+ / Laravel 8 / Doctrine
- Authentication via [JWT Auth](https://github.com/tymondesigns/jwt-auth) a dedicated library for Laravel and Lumen
> Links
- 👉 [React Laravel Purity Dashboard](https://appseed.us/product/purity-dashboard/api-server-laravel/react/) - product page
- 👉 [React Laravel Purity Dashboard](https://laravel-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE Demo
- 👉 LIVE [Support](https://appseed.us/support) via [Discord](https://discord.gg/fZC6hup) - 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
```bash
$ 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
```bash
$ # 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
```bash
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start
```
### Configuration (Optional)
> Change the port exposed by the Laravel API
```bash
$ 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`
```javascript
const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};
```
## API
For a fast set up, use this POSTMAN file: [api_sample](https://github.com/app-generator/api-unified-definition/blob/main/api.postman_collection.json)
> **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](https://appseed.us/support) on [Discord](https://discord.gg/fZC6hup)
- See for [React Starters](https://appseed.us/apps/react) - index provided by AppSeed
---
[React Laravel Purity Dashboard](https://appseed.us/product/purity-dashboard/api-server-laravel/react/) - Open-source Seed Project provided by **AppSeed [App Generator](https://appseed.us/)**