Skip to content

Commit bd569a5

Browse files
authored
Merge pull request #20 from scentmay/main
Main
2 parents cdfc50d + f61e12b commit bd569a5

15 files changed

Lines changed: 31 additions & 73 deletions

README.md

Lines changed: 31 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,57 @@
1-
# WebApp boilerplate with React JS and Flask API
2-
3-
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/4GeeksAcademy/react-flask-hello.git)
4-
5-
> Documentation: https://start.4geeksacademy.com/
6-
71
<p align="center">
8-
<a href="https://www.loom.com/share/f37c6838b3f1496c95111e515e83dd9b"><img src="https://github.com/4GeeksAcademy/flask-rest-hello/blob/main/docs/assets/how-to.png?raw=true?raw=true" /></a>
2+
<h1>S&F FIT</h1>
93
</p>
104

11-
- React.js front end and python/flask backend for your web application.
12-
- Extensive documentation [here](https://start.4geeksacademy.com/).
13-
- Integrated with Pipenv for package managing.
14-
- Fast deloyment to heroku [in just a few steps here](https://start.4geeksacademy.com/backend/deploy-heroku-posgres).
15-
- Use of .env file.
16-
- SQLAlchemy integration for database abstraction.
17-
18-
### Styles
19-
20-
You can update the `styles/index.scss` or create new `.scss` files inside `styles/` and import them into your current scss or js files depending on your needs.
21-
22-
### Components
23-
24-
Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed.
25-
26-
💡Note: There is an example using the Context API inside `views/demo.js`;
5+
APLICACIÓN PARA LA GESTIÓN DE INSTALACIONES DEPORTIVAS
6+
------------------------------------------------------------------------
7+
Se trata de una aplicación en la que se puede ver la gestión del dueño de las instalaciones así como la experiencia de uso de un usuario cliente que utiliza un smartphone para seguimiento de su rutina de entrenamiento.
278

28-
### Views (Components)
9+
Autores: Sergio Centenera Mayoral 🤝
10+
Franco Piedrabuena
11+
12+
Tenemos multitud de ideas para la evolución de la aplicación proyectando una importante mejora en la zona de administración, con la realización de consultas para toma de decisiones.
2913

30-
Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`.
14+
La parte de usuario incorporará un histórico de ejercicios así como la consulta de un feedback al cliente tras la realización de la rutina de entrenamiento. Estos datos proporcionarán la información complementaria a la aplicación para tener en cuenta en la próxima rotación de ejercicios que se le presente al cliente. Esta rotación también tendrá en cuenta las posibles lesiones o indicaciones médicas del cliente.
3115

32-
### Context
16+
Incorporación de un cronómetro, integración con redes sociales para publicar los logros obtenidos en los entrenamientos, integración con servicios musicales para uso durante la sesión....las posibilidades son infinitas.
3317

34-
This boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs.
18+
Agradecer a todos los profesores, mentores y compañeros de 4Geeks Academy, gracias a todo@s vosotros esto ha sido posible.
19+
20+
Por supuesto, estamos abiertos a cualquier sugerencia en los correos:
3521

36-
React Context [docs](https://reactjs.org/docs/context.html)
37-
BreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained)
22+
📧 scentmay@gmail.com
3823

39-
The `Provider` is already set. You can consume from any component using the useContext hook to get the `store` and `actions` from the Context. Check `/views/demo.js` to see a demo.
24+
📧 franconpiedrabuena@gmail.com
25+
26+
Muestras de la aplicación 📌
27+
------------------------------------------------------------------------
28+
![Screenshot](screenshot_mainview.jpg)
4029

41-
```jsx
42-
import { Context } from "../store/appContext";
43-
const MyComponentSuper = () => {
44-
//here you use useContext to get store and actions
45-
const { store, actions } = useContext(Context);
46-
return <div>{/* you can use your actions or store inside the html */}</div>;
47-
};
48-
```
30+
Página Home de la aplicación 💪
4931

50-
### Back-End Manual Installation:
32+
![Screenshot](screenshot_home_expanded.jpg)
5133

52-
It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)
34+
La aplicación cuenta con formularios protegidos con la tecnología de Formik ⬇🔐
5335

54-
1. Install the python packages: `$ pipenv install`
55-
2. Create a .env file based on the .env.example: `$ cp .env.example .env`
56-
3. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure yo replace the valudes with your database information:
36+
![Screenshot](screenshot_protectedforms.jpg)
5737

58-
| Engine | DATABASE_URL |
59-
| --------- | --------------------------------------------------- |
60-
| SQLite | sqlite:////test.db |
61-
| MySQL | mysql://username:password@localhost:port/example |
62-
| Postgress | postgres://username:password@localhost:5432/example |
38+
Zona usuario para su propia administración 🫵
6339

64-
4. Migrate the migrations: `$ pipenv run migrate` (skip if you have not made changes to the models on the `./src/api/models.py`)
65-
5. Run the migrations: `$ pipenv run upgrade`
66-
6. Run the application: `$ pipenv run start`
40+
![Screenshot](screenshot_personal_data.jpg)
6741

68-
### Backend Populate Table Users
42+
Entrenamientos a medida en su propio terminal 🏋️📱
6943

70-
To insert test users in the database execute the following command:
44+
![Screenshot](screenshot_training_cards.jpg)
7145

72-
```sh
73-
$ flask insert-test-users 5
74-
```
46+
Posibilidad de cambiar de suscripción en cualquier momento 💶💶
7547

76-
And you will see the following message:
48+
![Screenshot](screenshot_usersuscription.jpg)
7749

78-
```
79-
Creating test users
80-
test_user1@test.com created.
81-
test_user2@test.com created.
82-
test_user3@test.com created.
83-
test_user4@test.com created.
84-
test_user5@test.com created.
85-
Users created successfully!
86-
```
50+
Útiles paneles de administración para el administrador de las instalaciones 📊🗓️
8751

88-
To update with all yours tables you can edit the file app.py and go to the line 80 to insert the code to populate others tables
52+
![Screenshot](screenshot_clients_dashboard.jpg)
8953

90-
### Front-End Manual Installation:
9154

92-
- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.
9355

94-
1. Install the packages: `$ npm install`
95-
2. Start coding! start the webpack dev server `$ npm run start`
9656

97-
## Publish your website!
9857

99-
This boilerplate it's 100% integrated with Herkou, [follow this tutorial](https://start.4geeksacademy.com/backend/deploy-heroku-posgres) and just by pushing your changes to the heroku repository will deploy the website afterwards.

screenshot_adminhub.jpg

262 KB
Loading

screenshot_clients_dashboard.jpg

243 KB
Loading
216 KB
Loading

screenshot_fees_dashboard.jpg

200 KB
Loading

screenshot_home.jpg

323 KB
Loading

screenshot_home_expanded.jpg

196 KB
Loading

screenshot_mainview.jpg

95.9 KB
Loading

screenshot_newadmin.jpg

106 KB
Loading

screenshot_personal_data.jpg

261 KB
Loading

0 commit comments

Comments
 (0)