Aplicación React y HarperDB

La siguiente aplicación está basada en el manual hecho por KinsleyUbah GitHub Profile en su artículo React tutorial - Build a Movie List Generator with React and HarperDB

Un listado de películas Generadas de forma Aleatoria

Esta App mostrará una nueva película cada 40 segundos. La película es generada de forma aleatoria de una selección de 6 películas. También podrás generarla de forma manual haciendo Clic en el botón 'Generar Nueva Película'. Este proyecto fue construido usando React y el Hook de HarperDB, como un tutorial mostrando que puedes hacer una app web de tipo CRUD con el stack HarperDB/React.

Si te gusta el proyecto puedes ir al repositorio del autor original y dar una estrella para agradecer Repositorio Original

Como comenzar

• Usando Git, clona este proyecto a tu máquina usando el comando git clone
• Ejecuta el comando npm install para instalar todas las dependencias.
• Sigue el siguiente de FreeCodeCamp tutorial (en español) - this tutorial (en inglés) para configurar tu proyecto.

Puedes hacer un fork tanto a este proyecto leves adaptaciones como al original con total libertad.

Ver Demo

Para ver un demo de esta App puedes hacer click aquí español - inglés

.env y .gitignore

Este repositorio usa variables de entorno para que no sean visibles en el repositorio las credenciales de HarperDB. Para usarlas y poder compartir el proyecto sin miedo a hacer públicas las credenciales deber

1. Crear un archivo llamado .env en la raíz de tu proyecto y pasarle tus variables de entorno (Estas se usan en el index.js). Pasarás tus credenciales en el .env de la siguiente manera

REACT_APP_DB_URL = 'url_de_tu_BD'
REACT_APP_USER = 'usuario_db'
REACT_APP_PASSWORD = 'password'

2. Deberás modificar el archivo .gitignore para que cuando hagas operaciones con Git, este no tome en cuenta el archivo. Puedes ver un ejemplo de .gitignore a continuación.

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env

3. Una vez modificado el .gitignore puedes hacer git add .gitignore y luego git commit -m "comentario" para que el sistema de versiones GIT no considere el archivo .env al momento de compartirlo

Scripts disponibles

En el directorio del proyecto puedes ejecutar:

npm start

Ejecuta la aplicación en modo desarrollador.
Abre http://localhost:3000 para verlo en tu navegador.

La página se refrescará si haces ediciones.
También veras los errores destacados en la consola.

npm run build

Construye la aplicación para producción al directorio build.
Empaqueta React correctamente en modo producción y optimiza la compilación para obtener mejor rendimiento.

La compilación se minimiza y los nombres de archivo incluyen los hashes.
Tu aplicación está lista para ser implementada (deployed)

Si quieres ver más al respecto deployment puedes ir al enlace.

npm run eject

Nota: esta es una operación en un sentido. Una vez que expulsas eject no puedes deshacerlo!

Si no estás conforme con la herramienta de compilación y las opciones de configuración, puedes expulsar eject en cualquier momento. Este comando removerá las dependencias de compilación de tu proyecto.