Sign in Subscribe
flask

Flask React Berry - Free Starter

Open-Source seed project crafted on top of a pixel-perfect Material-UI design using React and Flask - Berry Dashboard can be downloaded directly from Github.

Editor

• 2 min read
A colorful dashboard provided by Flask React Berry, an open-source starter provided by AppSeed.
Flask React Berry - Open-Source Seed Project

Hello! This article presents an open-source full-stack seed project built with a modern, React Material-UI design powered by a simple, yet powerful Flask API Backend. Flask React Berry is a minimal two-tier seed project that might help beginners to start faster a new full-stack project already built with all the essential features. For newcomers, Flask is a leading web framework written in Python and React is probably the most popular JavaScript Library for coding user interfaces baked by Facebook. Thanks for reading!

GIF animated presentation of Berry Dashboard, an open-source seed project crafted in Flask and React.
Flask React Berry - Open-Source Seed Project

The product can be downloaded and used directly from Github and bootstrapped fast in a local environment via Docker. For those unfamiliar with Docker, a classic manual setup described by the project README should be followed. Let's try the automated setup via Docker.

Step #1 - Clone/download source code

$ git clone https://github.com/app-generator/flask-react-berry-dashboard.git
Flask React Berry - Clone Sources

Step 2 - Start the Flask API

$ cd flask-api
$ docker-compose up --build 
// OR 
$ docker-compose pull ; docker-compose build ; docker-compose up
Flask React Berry - Start API Server

At this point, we can access the Swagger Dashboard provided by the service or via POSTMAN, the well-known API client.    

Flask React Berry - API Swagger Dashboard.
Flask React Berry - API Swagger Dashboard

Step 3# - Start the React UI  

$ cd react-ui
$ docker-compose up --build 
// OR 
$ docker-compose pull ; docker-compose build ; docker-compose up
Flask React Berry - Start React UI

Once all the above commands are executed, we should be able to access the React Berry UI in the browser. From this point, we can register new users, authenticate and access all private pages (dashboard, user profile page ..).

A login form provided by Berry Dashboard, an open-source seed project crafted with Flask & React.
Flask React Berry - Login Page
Flask React Berry - Icons Page
Icons page provided by Berry Dashboard, an open-source seed project crafted with Flask & React.
Flask React Berry - Icons Page
Flask React Berry - Colors Page
Colors page provided by Berry Dashboard, an open-source seed project crafted with Flask & React.
Flask React Berry - Colors Page
Thanks for reading! For more resources & support please access: