Giter Site home page Giter Site logo

8dbe37ec-ba57-4b67-af25-03523b444768's Introduction

React Berry Dashboard full-stack

Full-Stack Seed project generated by React App Generator top of Berry Dashboard design. The backend logic is provided by a simple, easy-to-extend API Server that manages the Authentication flow (login, registration, logout) using JSON Web Tokens (JWT).


๐Ÿš€ Build Timestamp 2022-11-02 03:59

  • React Frontend: Berry Dashboard (open-source)

    • M-UI based design
    • Modern aesthetics UI design - Designed by CodedThemes
    • React, Redux, Redux-persist
  • API Backend Server: Flask / Flask-RestX / SQLite

    • Up-to-date dependencies
    • DB Layer: SqlAlchemyORM, SQLite persistence
    • Auth: JWT tokens managed via Flask-jwt_extended
    • API Definition - the unified API structure implemented by this server

Links


React Berry Dashboard - Full-Stack Starter generated by AppSeed.


โœจ How to use it

Being a full-stack product, the backend and the frontend should be compiled and started separately. Before starting to compile the product, make sure you have the following tools installed in the environment:

  • NodeJS - version 14.x or higher
  • GIT - used to clone tjhe sources from Github
  • Python3 - used in many tools

๐Ÿ‘‰ Start the Frontend

Step 1 - Once the project is downloaded, change the directory to react-ui.

$ cd react-ui

Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step 3 - Start in development mode

$ npm run start 
// OR
$ yarn start

At this point, the app is available in the browser localhost:3000 (the default address).


๐Ÿ‘‰ Start the Backend Server

Step 1 - Change the directory to api-server-flask

$ cd api-server-flask

Step 2 - Install dependencies using a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ pip install -r requirements.txt

Step 3 - Setup the Flask environment

$ export FLASK_APP=run.py
$ export FLASK_ENV=development
// OR 
$ (Windows CMD) set FLASK_APP=run.py
$ (Windows CMD) set FLASK_ENV=development
$
$ (Powershell) $env:FLASK_APP = ".\run.py"
$ (Powershell) $env:FLASK_ENV = "development"

Step 4 - Start the API server (development mode)

$ flask run

Use the API via POSTMAN or Swagger Dashboard at localhost:5000.


๐Ÿ‘‰ Codebase Structure

< ROOT  >
    |
   api-server-flask/
    โ”œโ”€โ”€ api
    โ”‚   โ”œโ”€โ”€ config.py
    โ”‚   โ”œโ”€โ”€ __init__.py
    โ”‚   โ”œโ”€โ”€ models.py
    โ”‚   โ””โ”€โ”€ routes.py
    โ”œโ”€โ”€ requirements.txt
    โ”œโ”€โ”€ run.py
    โ””โ”€โ”€ tests.py


PRO Version

For more components, pages and priority on support, feel free to take a look at this amazing starter:

Berry Dashboard is a premium React Design now available for download as a full-stack app. Made of hundred of elements, designed blocks, and fully coded pages, Berry Dashboard PRO is ready to help you create stunning websites and web apps.

  • ๐Ÿ‘‰ React Berry Dashboard PRO - Product Page
    • โœ… Enhanced UI - more pages and components
    • โœ… Priority on support

React Berry Dashboard PRO - Full-Stack Starter generated by AppSeed.



React Berry Dashboard - Full-Stack Seed project generated by App Generator.

8dbe37ec-ba57-4b67-af25-03523b444768's People

Contributors

appseed-projects3 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.