|
1 | | -# WebApp boilerplate with React JS and Flask API |
2 | | - |
3 | | -[](https://gitpod.io#https://github.com/4GeeksAcademy/react-flask-hello.git) |
4 | | - |
5 | | -> Documentation: https://start.4geeksacademy.com/ |
6 | | -
|
7 | 1 | <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> |
9 | 3 | </p> |
10 | 4 |
|
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. |
27 | 8 |
|
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. |
29 | 13 |
|
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. |
31 | 15 |
|
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. |
33 | 17 |
|
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: |
35 | 21 |
|
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 |
38 | 23 |
|
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 | + |
40 | 29 |
|
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 💪 |
49 | 31 |
|
50 | | -### Back-End Manual Installation: |
| 32 | + |
51 | 33 |
|
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 ⬇🔐 |
53 | 35 |
|
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 | + |
57 | 37 |
|
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 🫵 |
63 | 39 |
|
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 | + |
67 | 41 |
|
68 | | -### Backend Populate Table Users |
| 42 | +Entrenamientos a medida en su propio terminal 🏋️📱 |
69 | 43 |
|
70 | | -To insert test users in the database execute the following command: |
| 44 | + |
71 | 45 |
|
72 | | -```sh |
73 | | -$ flask insert-test-users 5 |
74 | | -``` |
| 46 | +Posibilidad de cambiar de suscripción en cualquier momento 💶💶 |
75 | 47 |
|
76 | | -And you will see the following message: |
| 48 | + |
77 | 49 |
|
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 📊🗓️ |
87 | 51 |
|
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 | + |
89 | 53 |
|
90 | | -### Front-End Manual Installation: |
91 | 54 |
|
92 | | -- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend. |
93 | 55 |
|
94 | | -1. Install the packages: `$ npm install` |
95 | | -2. Start coding! start the webpack dev server `$ npm run start` |
96 | 56 |
|
97 | | -## Publish your website! |
98 | 57 |
|
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. |
0 commit comments