├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 App Generator 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Flask React - Material Design](https://appseed.us/apps/flask-apps/material-kit-creative-tim) 2 | 3 | Full-Stack [React](https://reactjs.org/) [Material Design](https://demos.creative-tim.com/material-kit-react?ref=appseed) with [Flask](https://palletsprojects.com/p/flask/) backend server. 4 | 5 |
6 | 7 | ![Flask React Material Design - Gif animated presentation.](https://github.com/app-generator/static/blob/master/products/flask-react-material-design-intro.gif?raw=true) 8 | 9 |
10 | 11 | ## Product Features 12 | 13 | This full-stack app is built using a decoupled architecture, where the **React** Material Design frontend communicates with the [Flask](https://palletsprojects.com/p/flask/) backend through secure ajax call. 14 | 15 | - [Flask](https://palletsprojects.com/p/flask/) backend 16 | - SQLite database, managed by Sequelize ORM. A simple Users tabel is provided. 17 | - JWT token authentication 18 | - [React](https://reactjs.org/) [Material Design](https://demos.creative-tim.com/material-kit-react?ref=appseed) crafted by the famous Creative-Tim agency. 19 | - Login and Registration features 20 | 21 | To use and start this starter, a few simple steps must be followed: 22 | 23 | - clone, build and start the [Flask boilerplate](https://github.com/app-generator/flask-boilerplate) backend 24 | - clone, built and start the [React Material Kit](https://github.com/app-generator/react-material-kit) frontend 25 | 26 |
27 | 28 | ## [Flask boilerplate](https://github.com/app-generator/flask-boilerplate) backend 29 | 30 | The backend server is a simple [Flask](https://palletsprojects.com/p/flask/) with **JWT authentication**, **SQLite** database, **SQLAlchemy ORM**, unit tests and basic tooling. 31 | 32 | ``` 33 | $ ############################# 34 | $ # clone and build the backend 35 | 36 | $ git clone https://github.com/app-generator/flask-boilerplate.git 37 | $ cd flask-boilerplate 38 | $ pip install -r requirements.txt 39 | $ flask run --port 3000 # start the Flask server 40 | ``` 41 | 42 |
43 | 44 | ## [React Material Kit](https://github.com/app-generator/react-material-kit) 45 | 46 | [React](https://reactjs.org/) app enhanced with **JWT Authentication** with fully functional login & registration flow. 47 | 48 | ``` 49 | $ ############################# 50 | $ # clone and build the React Frontend 51 | 52 | $ git clone https://github.com/app-generator/material-kit-react.git 53 | $ cd material-kit-react 54 | $ yarn 55 | $ yarn start # Frontend runs on port 8080 56 | ``` 57 | 58 |
59 | 60 | ## Resources 61 | 62 | - [Flask boilerplate](https://github.com/app-generator/flask-boilerplate) backend sources 63 | - [React Material Kit](https://github.com/app-generator/react-material-kit) sources 64 | - [React Express Material Design - Demo](https://react-express-material-kit.appseed.us/) 65 | 66 |
67 | 68 | ### What is [Flask](https://palletsprojects.com/p/flask/) 69 | 70 | Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks. Read more about **Flask** [here](https://flask.palletsprojects.com/en/1.1.x/). 71 | 72 |
73 | 74 | ### What is [React](https://reactjs.org/) 75 | 76 | **React** (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. **React** can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. Read more about React [here](https://reactjs.org/) 77 | 78 |
79 | 80 | ### [Material Kit React](https://www.creative-tim.com/product/material-kit-react) 81 | 82 | **Material Kit React** is a Free Material-UI@4.1.0 Kit with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Material-UI elements, you will find three fully-coded example pages, to help you design your next project. Read more about Material Kit React [here](https://www.creative-tim.com/product/material-kit-react) 83 | 84 |
85 | 86 | ## Support 87 | 88 | For issues and features request, use **Github** or access the [support page](https://appseed.us/support) provided by **AppSeed** 89 | 90 |
91 | 92 | ## License 93 | MIT @ [AppSeed](https://appseed.us) 94 | 95 |
96 | 97 | --- 98 | [Flask React - Material Design](https://appseed.us/apps/flask-apps/material-kit-creative-tim) provided by **AppSeed** 99 | --------------------------------------------------------------------------------