diff --git a/README.md b/README.md index 76b72b8..f7f91a4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React Flask Authentication -Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server. **React Flask Authentication** 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 Flask is a leading web framework written in Python. +Open-source full-stack seed project that uses a **React UI** powered by a simple **Flask API Server**. **React Flask Authentication** 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 Flask is a leading web framework written in Python. > Links @@ -17,11 +17,11 @@ Open-source full-stack seed project that uses a React UI powered by a simple Fla 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 Flask API Backend +- `Compile and start` the **Flask API Backend** - be default the server starts on port `5000` -- Compile and start the React UI +- `Compile and start` the **React UI** - UI will start on port `3000` and expects a running backend on port `5000` -- Configuration (Optional) +- `Configuration` (Optional) - Change the API port - Configure the API port used by the React UI to communicate with the backend @@ -58,7 +58,7 @@ At this point, the API should be up & running at `http://localhost:5000`, and we $ cd react-ui $ docker-compose pull # download dependencies $ docker-compose build # local set up -$ docker-compose up -d # start the app +$ docker-compose up # start the app ``` Once all the above commands are executed, the `React UI` should be visible in the browser. By default, the app redirects the guest users to authenticate. @@ -88,7 +88,7 @@ $ # Start the API $ flask run ``` ---- +
### Compile & start the React UI @@ -176,6 +176,26 @@ authorization: JWT_TOKEN (returned by Login request)
+## Product UI + +> React Flask Authentication - Login + +![React Flask Authentication - Login.](https://user-images.githubusercontent.com/51070104/141444378-763ca3fb-c18c-4558-9730-b42a341a7b22.jpg) + +
+ +> React Flask Authentication - Icons + +![React Flask Authentication - Icons.](https://user-images.githubusercontent.com/51070104/141444472-8c966396-69dc-46c3-835e-b64329fdbf7d.jpg) + +
+ +> React Flask Authentication - Colors + +![React Flask Authentication - Colors.](https://user-images.githubusercontent.com/51070104/141444532-46a3bcd0-841b-4725-aa82-122569cd678a.jpg) + +
+ ## Links & Resources - Ask for [Support](https://appseed.us/support) on [Discord](https://discord.gg/fZC6hup) @@ -184,4 +204,4 @@ authorization: JWT_TOKEN (returned by Login request)
--- -React Flask Authentication - Open-source full-stack seed project provided by **AppSeed [App Generator](https://appseed.us/)** +**React Flask Authentication** - Open-source full-stack seed project provided by **AppSeed [App Generator](https://appseed.us/)**