Plataforma del Registro de Autoexclusión del Juego

Overview

WebApp boilerplate with React JS and Flask API

Open in Gitpod

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 BreathCode Lesson view

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.

import { Context } from "../store/appContext";
const MyComponentSuper = () => {
  //here you use useContext to get store and actions
  const { store, actions } = useContext(Context);
  return <div>{/* you can use your actions or store inside the html */}</div>
}

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 yo 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
  1. Migrate the migrations: $ pipenv run migrate (skip if you have not made changes to the models on the ./src/api/models.py)
  2. Run the migrations: $ pipenv run upgrade
  3. Run the application: $ pipenv run start

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% integrated with Herkou, just by pushing your changes to the heroku repository it will deploy: $ git push heroku main

	// "prettier-webpack-plugin": "^1.2.0",

"dotenv-webpack": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",

You might also like...

Codigo del Webinar de Organizador de Tareas con autenticación

Webinar Organizador de Tareas con autenticación Bienvenido al repositorio 📂️ del Webinar donde podrás encontrar el codigo expuesto 🤓️ Para comenzar

Jun 24, 2022

Aplicación final del curso de Next de Fernando

Next.js Telo Shop Para correr localmente, se necesita la base de datos. docker-compose up -d El -d, significa detached Configurar las variables de en

Dec 29, 2022

Repositorio oficial del curso IIC2113 Diseño Detallado de Software 🎉👩‍💻👨‍💻

IIC2113 - Diseño Detallado de Software Este curso está orientado a estudiantes con conocimientos sobre técnicas para llevar a cabo un proyecto de desa

Nov 9, 2022

Konbini Otaku, Web E-Commerce del proyecto Estación Otaku, desarrollada con Next.js y desplegada con Vercel

Konbini Otaku, Web E-Commerce del proyecto Estación Otaku, desarrollada con Next.js y desplegada con Vercel

Konbini Otaku 💬 🛒 ⛩️ 🎌 - Reto Final (parte 2) Este proyecto constó de proponer "Konbini Otaku", la cual es una tienda virtual en la que podrás adqu

Apr 28, 2022

Un experimento personal con el portal del Centro de Documentación de la Imagen de Santander.

Un experimento personal con el portal del Centro de Documentación de la Imagen de Santander.

Retrosantander Un experimento personal con el portal del Centro de Documentación de la Imagen de Santander (CDIS) y sus contenidos. Por Jaime Gómez-Ob

Dec 11, 2022

Haciendo una aplicación del tiempo ☁️ con #Angular 13 🅰️

Angular Boilerplate Boilerplate para trabajar con Angular, este proyecto listo para trabajar las pruebas unitarias con Jestjs y eslint. Este proyecto

Apr 20, 2022

Repositorio común Backend-Frontend del equipo DevPanda

Instalaciones importantes: Nodejs Nodejs creará el entorno en el cuál React y Express van a ejecutarse. Se recomienda la version estable. Es una insta

May 11, 2022

Llevando la transparencia al metaverso del Gobierno de Navarra.

Llevando la transparencia al metaverso del Gobierno de Navarra.

El portero del metaverso El Gobierno de Navarra se ha instalado en el metaverso. Pero algunos ya estamos hartitos de unos servicios públicos digitales

Dec 15, 2022

Aplicación del tiempo para la Hackathon de midudev

Aplicación del tiempo para la Hackathon de midudev

Weather App App creada para la Hackathon de Midudev https://twitch.tv/midudev Importante Para probar las notificaciones en la PWA - Link Característi

Jun 8, 2022
Owner
Daniel Bañobre Dopico
Web app developer.
Daniel Bañobre Dopico
👤 Aplicação de registro de usuários. Desenvolvido com Next.js, Sass, TypeScript, Node.js e Docker.

?? Registrado Aplicação de registro de usuários capaz de criar, ler, atualizar e deletar usuários do banco de dados (CRUD). O projeto é dividido em Fr

Adilson Gabriel 5 Oct 25, 2022
CRUD de productos basado en el ORM sequelize y el login y el registro usando archivo en formato JSON.

Desarrollo de una aplicación muy sencilla, utilizando diferentes recursos ofrecdos por Node.JS. Aquí puedes encontrar : Login - Registro - Administración de productos completamente funcionales) Recursos utilizados: Middleware - Express validator - Validaciones del lado del Front-End - y del Back-End - Sessión - Cookies - Multer, entre otros)

Ángel Daniel Fuentes Segura 4 Sep 12, 2022
Recreación del entorno de escritorio del sistema operativo macOS Monterey utilizando HTML, CSS y JavaScript

macOS Réplica del sistema operativo macOS Monterey utilizando HTML, CSS y JavaScript. GitHub pages https://jonathan-yv.github.io/macOS/ Componentes Ve

Jonathan Yair Vazquez 4 Feb 4, 2022
Repositorio oficial de la sección 1 y 2 del periodo 2022-2 del curso PUC IIC2513 Tecnologías y Aplicaciones Web

IIC2513 - Tecnologías y Aplicaciones Web 2022-2 S1 y S2 Bienvenida/o al repositorio de las secciones 1 y 2 del curso PUC IIC2513 Tecnologías y Aplicac

null 59 Dec 14, 2022
Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servicio de Azure Static Web Apps.

Taller TypeScript Descripción Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servici

Manuel Ortiz 7 Oct 10, 2022
Simple Notes é um projeto de uma plataforma de anotações

Resumo Simple Notes é um projeto de uma plataforma de anotações. O grande diferencial é que as anotações são públicas e os usuários podem anotar histó

otaviozin 2 Feb 8, 2022
🎯 Plataforma para acesso aos dados de perfis de usuários do Github.

?? Github Profile ?? Desafio Front End | Compass.UOL Tecnologias | Projeto | Como rodar | Licença demo.mp4 ?? Tecnologias ?? Projeto Esse projeto é um

Danilo Gonçalves 3 Mar 30, 2022
Criação, leitura, atualização e exclusão de usuários em uma plataforma

Teste Prático - Desenvolvedor Full Stack Pleno Tabela de Conteúdo Sobre o Projeto Feito Com Iniciando o Projeto Pre-Requisitos Instalação via Docker I

Murilo Maia 6 Apr 11, 2022
A AfirmaJobs é uma plataforma de divulgação de vagas voltadas para a diversidade e inclusão. A aplicação foi desenvolvida como projeto final do curso bootcamp da Reprograma

AFIRMAJOBS Este projeto é resultado do Bootcamp Back-End - Todas em Tech - { reprograma } Justificativa Grupos historicamente minorizados – população

Geankre Souza 7 Dec 13, 2022
Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro.

ReaperianiJS Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro. Spiegone: Il fuorilavoce è un plugin di eq M/S (mid s

null 9 Feb 11, 2022