Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alesanchezr/final-project
https://github.com/alesanchezr/final-project
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/alesanchezr/final-project
- Owner: alesanchezr
- Created: 2023-02-09T01:26:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-02-09T01:26:51.000Z (over 1 year ago)
- Last Synced: 2024-10-05T02:21:23.343Z (about 1 month ago)
- Language: JavaScript
- Size: 4.52 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WebApp boilerplate with React JS and Flask API
[](https://gitpod.io#https://github.com/4GeeksAcademy/react-flask-hello.git)
> Documentation: https://start.4geeksacademy.com/
- React.js front end and python/flask backend for your web application.
- Extensive documentation [here](https://start.4geeksacademy.com/).
- Integrated with Pipenv for package managing.
- Fast deloyment to heroku [in just a few steps here](https://start.4geeksacademy.com/backend/deploy-heroku-posgres).
- Use of .env file.
- SQLAlchemy integration for database abstraction.
### Styles
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.
### Components
Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed.
💡Note: There is an example using the Context API inside `views/demo.js`;
### Views (Components)
Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`.
### Context
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.
React Context [docs](https://reactjs.org/docs/context.html)
BreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained)
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.
```jsx
import { Context } from "../store/appContext";
const MyComponentSuper = () => {
//here you use useContext to get store and actions
const { store, actions } = useContext(Context);
return
{/* you can use your actions or store inside the html */};
};
```
### Back-End Manual Installation:
It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)
1. Install the python packages: `$ pipenv install`
2. Create a .env file based on the .env.example: `$ cp .env.example .env`
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 you replace the valudes with your database information:
| Engine | DATABASE_URL |
| --------- | --------------------------------------------------- |
| SQLite | sqlite:////test.db |
| MySQL | mysql://username:password@localhost:port/example |
| Postgress | postgres://username:password@localhost:5432/example |
4. Migrate the migrations: `$ pipenv run migrate` (skip if you have not made changes to the models on the `./src/api/models.py`)
5. Run the migrations: `$ pipenv run upgrade`
6. Run the application: `$ pipenv run start`
### Backend Populate Table Users
To insert test users in the database execute the following command:
```sh
$ flask insert-test-users 5
```
And you will see the following message:
```
Creating test users
[email protected] created.
[email protected] created.
[email protected] created.
[email protected] created.
[email protected] created.
Users created successfully!
```
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
### Front-End Manual Installation:
- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.
1. Install the packages: `$ npm install`
2. Start coding! start the webpack dev server `$ npm run start`
## Publish your website!
This boilerplate it's 100% read to deploy with Render.com and Heroku in a matter of minutes. Please read the [official documentation about it](https://start.4geeksacademy.com/deploy).