/BeatBooK

Agenda cultural personalizada, donde los usuarios generan el propio contenido, compartiendo eventos, lugares y grupos de música. Nos centramos en dar visibilidad a estos tres pilares, permitiendo a los usuarios descubrir planes atractivos según sus preferencias.

Primary LanguageJavaScript

Beatbook

Beatbook se presenta como una agenda cultural personalizada, donde los usuarios generan el propio contenido, compartiendo eventos, lugares y grupos de música. Nos centramos en dar visibilidad a estos tres pilares, permitiendo a los usuarios descubrir planes atractivos según sus preferencias.

Objetivos

  • Permitir a los usuarios descubrir eventos, lugares y grupos de música alineados con sus preferencias.

  • Facilitar el acceso a información sobre eventos musicales en vivo, ayudando a los usuarios a encontrar planes atractivos de manera rápida y sencilla.

  • Fomentar la participación de los usuarios, permitiéndoles generar contenido y compartir sus experiencias musicales.

Tecnologías Usadas

React CSS Bootstrap JavaScript Python Flask SQL Cloudinary Leaflet

Capturas de Pantalla

Captura de Pantalla 2024-05-16 a las 11 14 30
Captura de Pantalla 2024-05-16 a las 12 54 35 Captura de Pantalla 2024-05-16 a las 12 54 57
Captura de Pantalla 2024-05-16 a las 12 35 44

Instalación

Si utilizas Github Codespaces (recomendado) o Gitpod, esta plantilla ya vendrá con Python, Node y la base de datos Postgres instalados. Si trabajas localmente, asegúrate de instalar Python 3.10, Node.

Instalar el backend primero: Asegúrate de tener Python 3.8, Pipenv y un motor de base de datos (Postgres recomendado).

Instalar los paquetes de Python:

$ pipenv install

Crear un archivo .env basado en .env.example:

$ cp .env.example .env
Ejemplo:

# This file includes global variables that will be available inside your project
# 1. In the front end code you can access this variables like this: console.log(process.env.VARIABLE_NAME)
# 1. In the back end code you access the variable by importing os and then typing print(os.getenv('VARIABLE_NAME'))

# Back-End Variables
DATABASE_URL=postgres://gitpod:postgres@localhost:5432/example
FLASK_APP_KEY="any key works"
FLASK_APP=src/app.py
FLASK_DEBUG=1
DEBUG=TRUE
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

# Front-End Variables
BASENAME=/
BACKEND_URL= 

Instalar tu motor de base de datos y crear tu base de datos: Dependiendo de tu base de datos, debes crear una variable DATABASE_URL con uno de los posibles valores, asegurándote de reemplazar los valores con la información de tu base de datos:

Motor DATABASE_URL
SQLite sqlite:////test.db
MySQL mysql://username:password@localhost:port/example
Postgres postgres://username:password@localhost:5432/example

Migrar las migraciones (saltar si no has hecho cambios en los modelos en ./src/api/models.py):

$ pipenv run migrate

Ejecutar las migraciones:

$ pipenv run upgrade

Ejecutar la aplicación:

$ pipenv run start

Nota: Los usuarios de Codespaces pueden conectarse a psql escribiendo:

psql -h localhost -U gitpod example

Deshacer una migración: También puedes deshacer una migración ejecutando:

$ pipenv run downgrade

Instalación Manual del Front-End

  1. Asegúrate de estar usando la versión 14+ de Node y de haber instalado y ejecutado exitosamente el backend.
  2. Instala los paquetes:
    $ npm install
  3. ¡Empieza a codificar! Inicia el servidor de desarrollo de webpack:
    $ npm run start

Nota importante sobre la base de datos y los datos en su interior

Cada entorno de Github Codespaces tendrá su propia base de datos, por lo que si estás trabajando con más personas, cada uno tendrá una base de datos diferente y registros diferentes dentro de ella. Estos datos se perderán, así que no pases demasiado tiempo creando registros manualmente para pruebas. En su lugar, puedes automatizar la adición de registros a tu base de datos editando el archivo commands.py dentro de la carpeta /src/api. Edita la línea 32 de la función insert_test_data para insertar los datos según tu modelo (utiliza la función insert_test_users anterior como ejemplo). Luego, todo lo que necesitas hacer es ejecutar pipenv run insert-test-data.