|
1 | | -# flask-react-datta-able |
| 1 | +# [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) |
| 2 | + |
| 3 | +Open-source full-stack seed project coded in React and Flask on top of a modern design from CodedThemes. The **[Flask React](https://appseed.us/product/flask-react-datta-able)** codebase is already configured with an SQLite database, API (via **Flask-RextX**), and JWT token-based authentication flow. **Datta Able** is an open-source **React Dashboard** that provides a colorful and modern design. |
| 4 | + |
| 5 | +<br /> |
| 6 | + |
| 7 | +> Features |
| 8 | +
|
| 9 | +- Modern aesthetics UI design - Designed by [CodedThemes](https://bit.ly/37fF9RT) |
| 10 | +- React, Redux, Redux-persist |
| 11 | +- Authentication: JWT Login/Register/Logout |
| 12 | +- Backend: [Flask API Server](https://github.com/app-generator/api-server-flask) |
| 13 | + |
| 14 | +<br /> |
| 15 | + |
| 16 | +> Links |
| 17 | +
|
| 18 | +- [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) - product page |
| 19 | +- [Flask React Datta Able](https://flask-react-datta-able.appseed-srv1.com/) - LIVE Demo |
| 20 | +- [Flask React Datta Able](https://docs.appseed.us/products/react/flask-datta-able) - product documentation |
| 21 | +- Download Backend: [Flask API Server 📥](https://github.com/app-generator/api-server-flask/archive/refs/heads/main.zip) |
| 22 | +- Donwnload Frontend: [React Datta Able 📥](https://github.com/app-generator/react-node-js-datta-able/archive/refs/heads/main.zip) |
| 23 | + |
| 24 | +<br > |
| 25 | + |
| 26 | +> **Note**: This product can be used with other API Servers for a complete fullstack experience. **ALL API servers use an unified interface** |
| 27 | +
|
| 28 | +- [Django API Server](https://github.com/app-generator/api-server-django) - open-source product |
| 29 | +- [Node JS API Server](https://github.com/app-generator/api-server-nodejs) - open-source product / Typescript / SQLite / TypeORM / Joy for validation |
| 30 | +- [Node JS API Server PRO](https://github.com/app-generator/api-server-nodejs-pro) - **commercial product** |
| 31 | + - SQLite / TypeORM / Joy / Docker |
| 32 | + - MongoDB / Mongoose / Joy Docker (separate branch, same project) |
| 33 | + |
| 34 | +<br /> |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +<br /> |
| 39 | + |
| 40 | +## Start Flask API Server |
| 41 | + |
| 42 | +Simple starter built with Python / Flask-RestX / Sqlite3 and JWT Auth. The authentication flow is based on [json web tokens](https://jwt.io). |
| 43 | + |
| 44 | +<br /> |
| 45 | + |
| 46 | +> How to use the code |
| 47 | +
|
| 48 | +**Clone the sources** |
| 49 | + |
| 50 | +```bash |
| 51 | +$ git clone https://github.com/app-generator/api-server-flask.git |
| 52 | +$ cd api-server-flask |
| 53 | +``` |
| 54 | + |
| 55 | +**Create a virtual environment** |
| 56 | + |
| 57 | +```bash |
| 58 | +$ virtualenv -p python3 venv |
| 59 | +$ source venv/bin/activate |
| 60 | +``` |
| 61 | + |
| 62 | +**Install dependencies** using pip |
| 63 | + |
| 64 | +```bash |
| 65 | +$ pip install -r requirements.txt |
| 66 | +``` |
| 67 | + |
| 68 | +**Set up the environment** |
| 69 | + |
| 70 | +```bash |
| 71 | +$ export FLASK_APP=run.py |
| 72 | +$ export FLASK_ENV=development |
| 73 | +``` |
| 74 | + |
| 75 | +The API server will start using the default port `5000`. |
| 76 | + |
| 77 | +<br /> |
| 78 | + |
| 79 | +## Start React UI |
| 80 | + |
| 81 | +To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository. |
| 82 | + |
| 83 | +**Step #1** - Clone the project |
| 84 | + |
| 85 | +```bash |
| 86 | +$ git clone https://github.com/app-generator/react-datta-able-dashboard.git |
| 87 | +$ cd react-datta-able-dashboard |
| 88 | +``` |
| 89 | + |
| 90 | +<br > |
| 91 | + |
| 92 | +**Step #2** - Install dependencies via NPM or yarn |
| 93 | + |
| 94 | +```bash |
| 95 | +$ npm i |
| 96 | +// OR |
| 97 | +$ yarn |
| 98 | +``` |
| 99 | + |
| 100 | +<br /> |
| 101 | + |
| 102 | +**Step #3** - Start in development mode |
| 103 | + |
| 104 | +```bash |
| 105 | +$ npm run start |
| 106 | +// OR |
| 107 | +$ yarn start |
| 108 | +``` |
| 109 | + |
| 110 | +<br /> |
| 111 | + |
| 112 | +## Configure the backend server |
| 113 | + |
| 114 | +The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register. |
| 115 | + |
| 116 | +**API Server URL** - `src/config/constant.js` |
| 117 | + |
| 118 | +```javascript |
| 119 | +const config = { |
| 120 | + ... |
| 121 | + API_SERVER: 'http://localhost:5000/api/' // <-- The magic line |
| 122 | +}; |
| 123 | +``` |
| 124 | + |
| 125 | +<br /> |
| 126 | + |
| 127 | +**API Server Descriptor** - POSTMAN Collection |
| 128 | + |
| 129 | +The backend server uses an [Unified API defition](https://docs.appseed.us/boilerplate-code/api-server/api-unified-definition) maintained and actively supported by AppSeed across multiple frameworks: Flask, Node JS, FastAPI. |
| 130 | + |
| 131 | +- [API POSTMAN Collection](https://github.com/app-generator/api-unified-definition/blob/main/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework. |
| 132 | + |
| 133 | +<br /> |
| 134 | + |
| 135 | +--- |
| 136 | +[Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) - Provided by [CodedThemes](https://codedthemes.com/) and **AppSeed [App Generator](https://appseed.us/app-generator)**. |
0 commit comments