sergimicoortiz/catbikes

React_DRF_MySQL_CatBikes

Por Sergi Micó Ortiz

Table of Contents

1. CatBikes
2. Instalar
3. Tecnologias

CatBikes! 😺 🚲

Bienvenidas y bienvenidos a CatBikes

1. Home: Carousel, mapa indicando las estaciones e infiniteScroll

2. Station: Obtención de todas las estaciones con su información y redirección a sus slots

3. Station Details: Ver cada slot de una stación, se puede alquilar o devolver una bici además de poder crear una incidencia

4. Profile: Listado de todas las incidencias creadas por un usuario

5. Login: Register y Login de usuario.

6. Dashboard: Solo tienen acceso los administradores, contiene todos los cruds: Stations, Bikes, Slots, Rens y Incidents

7. Bell Admin Una campana con un contador que solo puede ver el administrador que te redirecciona al listado de las incidencias

8. Bell Client Una campana con un contador de las notificaciones que tiene el cliente por ver

9. Technical Los tecnicos pueden poner tanto slots como bicicletas en mantenimiento, ademas de que disponen de un qr para acceder a un slot/bicicleta de forma mas rapida.

Instalar 💿

---

Requisitos

Es necesario crear el fichero .env en la carpeta backend y el secrets.js del frontend. El contenido puede ser el mismo que el de los ficheros de ejemplo.

Tener instalado las siguientes herramientas:

• React v18.2.0
• DRF v3.14.0
• GraphQL/Apollo Server v4
• MySQL

Puesta en marcha

Backend DRF

cd backend/drf
cp example.env .env
pipenv install
pipenv run python ./manage.py migrate
pipenv run python ./filler.py  (Opcional, creación de dummys )
pipenv run python ./manage.py runserver 0.0.0.0:8000

Antes de realizar el runserver deberemos de acceder a la base de datos de mysql y crear el trigger de las notificaciónes, simplemente deberemos de copiar y pegar el contenido de backend/sql/ClientNotificationTrigger.sql

Backend GQL

cd backend/gql
cp example.env .env
npm run install
npm run start

Frontend

cd frontend
cp ./src/secrets.example.js ./src/secrets.js  
npm install
npm run start

Tecnologías 👨‍💻

---

Lista de tecnologías utilizadas en este proyecto:

Backend 🏗️

• DRF v3.14.0

  • Routes
  • Models
  • Controllers
  • DB validation
  • MySQL
    • Relationships
    • Schema
  • Middleware_auth
    • Header
    • Token JWT
    • Token Blacklist

• GQL v4

  • Models
  • DB validation
  • MySQL
    • Relationships
    • Schema
  • Middleware_auth
    • Header
    • Token JWT
    • DRF verification

Frontend 🏛️

• React v18.2.0
  • Estructurado en componentes
  • Routes
  • Models
  • Components
  • Reactive Forms
    • Validation
  • Lazy load
  • Guards
  • Service with axios
  • Authentication JWT enviado por Headers
  • Refresh Token
  • Hooks y context
  • Librerias:
    • react-toastify
    • react-modal
    • react-map-gl
    • react-infinite-scroll-component
    • react-data-table-component

BBDD💾

• MySQL

catbikes's Issues

Add rent to gql

• Rent model
• User rent bike
• User return bike
• User see rents
• Admin see rents
• Admin delete rents

Docker

• Dockerfile backend
• Dockerfile frontend
• docker-compose add backend
• docker-compose add frontend
• remove drf port forwarding

Documentación. Corección 2

• Destaca en tot el document en negrita les idees principals que vulgues resaltar.
• Centrar imagenes
• Explica més i millor aspectes tècnics del frontend/backend que consideres interessants relacionats amb les millores que has implementat.
• Revisa la conclusió, explicar que cosas no he podido incluir en el poryecto.
• Añadir git a tecnologias
• Modificar casos de uso (correo Carolina)

Add users to gql

• Create service to request user using token
• Add a context
• Permisions for station, bike and slot
• User model
• Get all users (admin only)
• Get current user

graphql

• #8
• #9
• #10
• #11
• Remove bike from slot
• Bike/Slot maintenance status
• #12
• #13
• #15
• Disable landing page on production
• Error handling

Presentación. Corrección 2

• Verificar error en los titulos debito al tamaño
• Regrabar video con voz explicando y mostrando menos gql pero mostrando login, register y panel admin drf (10 min aprox)
• Subir video a Youtube y añadirlo a la presentación

Docker V2

• delete unused dependencis in DRF (the ones used in the dummys)
• drf admin working in loadbalancer with css. Porblem with the statics
• Add GQL to docker in loadbalancer
• Add https to the nginx config
• test in AWS

README & minor changes

• Change repo name
• Add dummys to the sql dump and change cats images 😿
• Add recomended extensions in the .vscode folder drf/qgl/react
• Eslint/prettier react
• Eslint/prettier gql
• Eslint drf

Add stations to gql

• Add sequelize model
• Get all stations
• count stations
• Get one station
• Delete station
• Create station
• Update station

Implementación

• Introducción
• Backend
• Frontend
• Diseño
• Testing
• Deploy

gqlV2

• Remove station count
• Add filter by status in the querys
• #21

Add incidents to gql

• Incident model
• User create incident
• User see incidents
• Admin see incidents
• Admin update incidents
• Admin delete incidents

phpmyadmin

• Add phpmyadmin in docker

technical user

• Enum user types
• Change technical guard
• This user can put bikes to maintenance
• This user can put slots to maintenance
• Create a pege for this user to change the bike status
• Create a pege for this user to change the slot status
• qr generator for bikes and slots gql for now. Only the maintenance and admin users can do this
• The qr have an url to that specific bike/slot

gql ssl certificates

https://www.apollographql.com/docs/apollo-server/security/terminating-ssl/

Entrega

• Document del projecte
• Diapositives
• Vídeos demostració
• .zip amb el codi font
• Url del repo de github
• Video deplay/testing ???

Add slots to gql

• Get all slots
• Get one slot
• resolver slot bike
• resolver slot station
• resolver station slots
• resolver bike slot
• add total slots and total bikes to station
• Create slot
• Delete slot

Plan de empresa

• Presentación del proyecto y promotores
• Actividad: Producto o Servicio
• Mercado: Entorno general y específico
• Producto y Comercialización

Demostración (video)

• Diapositiva
• Video frontend
• Video QR ???
• Video apollo server

Presentación. Corrección

• Comprobar tamaño letra títulos. Hacer la letra más grande
• En el punto 1 poner frase descriptica
• En el punto 2 añadir más características. Un par más técnicas

Análisis y diseño

• Diagrama de casos de uso
• Modelo E/R
• Diagrama de classes
• Mockups

Presentación

• Indice
• Introducción
• Caracteristicas principales
• Tecnologias
• #36
• Mejoras futuras
• Conclusión

Add notifications to gql

• Notification model
• List notification user (with filter for seen notifications)
• List notification admin (with filter for seen notifications)
• See notifications user
• Admin create notifications

Documentación. Corección 1

• Falta més disseny, gasta més els colors corporatius, el blau marino del logo, per exemple, per destacar la negrita, on destaquem també els aspectes claus.
• Posa el logo també a l'encapçalament de pàgina.
• Estudi de tecnologies: falta un apartat per a les tecnologies que gastes corresponents al disseny: SASS, Bootstrap, ...
• Als mockups afegeix-li un poc més de disseny, imatges, ...
• Falta que especifiques la paleta de colors.
• eslint, VStudioCode, prettier, ... dona-li més importància posant els logos i una supercurta descripció en què consisteixen.
• Sequelize idem anterior.
• Testing i deploy, dona-li més importància, posant els logos de les tecnologies i explica un poc el procés per testejar i com fas el deploy.

testing

• Add admin test
• add rent no login test
• Add api testing
• Add Snapshots
• Add register test

Documentación

• Introducción
• Descripción general
• Objetivos
• Estudio de tecnologías
• #29
• Planificación
• #30
• Conclusión

Fases del proyecto

• #31
• #32

Add bikes to gql

• Add bike model
• Get all bikes
• Get one bike
• Get bikes by status
• Delete bike
• Create bike
• Update Bike

env for DRF

• Create a .env
• Use .env in settings

gql client

When we create the provider the headers are static the token don't change at the refresh.