Skip to content

Update README.md #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update README.md #633

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 86 additions & 69 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,98 @@
# WebApp boilerplate with React JS and Flask API

Build web applications using React.js for the front end and python/flask for your backend API.

- Documentation can be found here: https://start.4geeksacademy.com/starters/react-flask
- Here is a video on [how to use this template](https://www.loom.com/share/f37c6838b3f1496c95111e515e83dd9b)
- Integrated with Pipenv for package managing.
- Fast deployment 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.

### 1) Installation:

> If you use Github Codespaces (recommended) or Gitpod this template will already come with Python, Node and the Posgres Database installed. If you are working locally make sure to install Python 3.10, Node

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`

> Note: Codespaces users can connect to psql by typing: `psql -h localhost -U gitpod example`

### Undo a migration

You are also able to undo a migration by running

```sh
$ pipenv run downgrade
```

### Backend Populate Table Users

To insert test users in the database execute the following command:

<h1 align="center">🔐 Proyecto de Autenticación con Página Privada</h1>

<p align="center">
Un proyecto simple de autenticación donde los usuarios pueden registrarse, iniciar sesión y acceder a una página privada protegida.
</p>

---

### 🚀 Tecnologías utilizadas
- **Node.js**
- **Express.js**
- **Passport.js** (para la autenticación)
- **JWT (JSON Web Token)** (para la gestión de sesiones)
- **bcryptjs** (para el hashing de contraseñas)
- **EJS** (para la renderización de vistas)
- **MongoDB con Mongoose** (para la base de datos)

---

### 📌 Instalación y Configuración
1. Clonar el repositorio:
```sh
git clone https://github.com/tu-usuario/nombre-del-repo.git
cd nombre-del-repo
```
2. Instalar dependencias:
```sh
npm install
```
3. Configurar las variables de entorno:
- Crear un archivo `.env` en la raíz del proyecto con las siguientes variables:
```env
PORT=3000
MONGO_URI=mongodb://localhost:27017/autenticacion
JWT_SECRET=tu_secreto_super_seguro
```
4. Iniciar la base de datos (si usas MongoDB localmente):
```sh
mongod
```
5. Ejecutar la aplicación:
```sh
npm start
```
La aplicación estará disponible en `http://localhost:3000`

---

### 🔑 Rutas Principales
- **`GET /`** → Página de inicio
- **`GET /login`** → Formulario de inicio de sesión
- **`POST /login`** → Procesa el inicio de sesión y genera un JWT
- **`GET /register`** → Formulario de registro
- **`POST /register`** → Crea un nuevo usuario
- **`GET /private`** → Página privada (solo accesible con sesión iniciada)
- **`GET /logout`** → Cierra sesión del usuario

---

### 🔐 Autenticación con JWT
Cada usuario autenticado recibirá un **token JWT**, que deberá enviarse en las peticiones a rutas protegidas mediante el encabezado:
```sh
$ flask insert-test-users 5
Authorization: Bearer <token>
```

And you will see the following message:
---

### 📂 Estructura del Proyecto
```
Creating test users
test_user1@test.com created.
test_user2@test.com created.
test_user3@test.com created.
test_user4@test.com created.
test_user5@test.com created.
Users created successfully!
.
├── config
│ ├── passport.js # Configuración de Passport.js
│ ├── database.js # Conexión a MongoDB
├── models
│ ├── User.js # Modelo de usuario
├── routes
│ ├── auth.js # Rutas de autenticación
│ ├── private.js # Ruta protegida
├── views # Plantillas EJS
├── public # Archivos estáticos
├── .env # Variables de entorno
├── server.js # Archivo principal
├── package.json # Dependencias
```

### **Important note for the database and the data inside it**

Every Github codespace environment will have **its own database**, so if you're working with more people eveyone will have a different database and different records inside it. This data **will be lost**, so don't spend too much time manually creating records for testing, instead, you can automate adding records to your database by editing ```commands.py``` file inside ```/src/api``` folder. Edit line 32 function ```insert_test_data``` to insert the data according to your model (use the function ```insert_test_users``` above as an example). Then, all you need to do is run ```pipenv run insert-test-data```.

### 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!
### 🔮 Mejoras Futuras
- Implementar autenticación con Google/Facebook.
- Mejorar la interfaz con Bootstrap o TailwindCSS.
- Agregar confirmación de correo electrónico.

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).
---

### Contributors
### 📞 Contacto
💬 Si tienes dudas o sugerencias, no dudes en contactarme. 🚀

This template was built as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).

You can find other templates and resources like this at the [school github page](https://github.com/4geeksacademy/).