sergimicoortiz/react_drf_mysql_catbikes

React_DRF_MySQL_CatBikes

Por Sergi Micó Ortiz y Juan Luis López del Barco

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

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
• MySQL

Puesta en marcha

Backend

cd backend
cp ./src/settings.example.py ./src/settings.py
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

Frontend

cd frontend
cp ./src/secrets.example.js ./src/secrets.js  
npm install -D
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

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

react_drf_mysql_catbikes's Issues

Slots

• CRUD frontend
• Change bike(status) serializer

Make 404 page

• Add css to the NotFound page

Incident

• Incident Backend Admin
• Incident Backend Client
• Incident Frontend Admin
• Incident Frontend Client
• Incident Frontend Client list
• Frontend/Backend change automatically status when send incident

Refactor

• Refactor hooks with context

Dummys

• Bike Dummys
• Stations/Slots dummys

Rent maintenance

• Change rent/return backend maintenance
• Change rent/return frontend maintenance

Bug header

The header is not reactive, add the navbar-toggler that is now comment and not working

Carusel

• Carusel home stations

Login Form React

• Register page and form with validations
• Login page and form with validations

Auto logout

• Add autologout when the server return a forbidden code(403)

Limit refresh token

• Limit refresh to 3 times
• Put countToken to 0 when login and logout
• Change api interceptor to get refresh error

Improve the css

• Header
• Footer
• Form dashboards stations
• Form dashboards bikes

Readme

• Update README

Dummys V2

• Add bikes to slots
• Change useSlot Manteinance. Use findIndex instead of filter

Incident Admin Count

• Count like notifications for Admin

Cruds Django

• Crud Station
• Crud Slots
• Crud Bikes

Notification

• Notification Backend
• Notification Frontend
• Trigger SQL create notification when create incident
• Header count/redirect notifications

Refactor forms

• Refactor login/register form in component
• Refactor dashboard bike form in component

Guards

The guard is executed before the context have the user, so even if you are logged the guard redirects you to the home.

• Add check admin backend in guards.

Update Bikes for Rent

When you add a bike to a slot in the dashboard, that station don't reflet the total bikes for rent.
Probably this will also happens if a user make a rent.

Login

• Login backend
• backend middleware
• frontend login
• frontend guards
• frontend interceptor

Refactor serializers

• Refactor stations serializer/view
• Refactor bikes serializer/view
• Refactor slots serializer/view

Blacklist

• Blacklist token model
• Add token when refresh and logout
• Verify token in backends.py

Mapa

• Add map
• Update station model
• Update station dummys
• Put markers in map
• Info in markers
• Redirect markers
• Update/Create dashboard stations

InfiniteScroll

Bug Incident Admin

• Fix bug in datatables update incident(user & slot id)

Refresh token

• Refresh backend
• Refresh frontend

Rent

• Rent backend
• Return backend
• Get rent user backend
• Get all rent admin backend
• Dashboard list and delete
• Rent frontend
• Return frontend

Add manteinance state

• Add manteinance state to bikes
• Add manteinance state to slots

Backend admin verification

• Only admin users can delete, create and modify stations, bikes and slots
• Add token expiration time in the settings file

Dashboard bug & enhancement

• Filter the slots when a station is deleted in the dashboard
• Add input for the number of slots in the station dashboard creation page
• UserContext false bad written

Invalid slug dashboard

• Add a toaster and a navigate in the dashboard update if the object dosen't exist

Upgrade serializer User

• Upgrade raise register
• Upgrade raise login
• React errors

Filter dashboard incidents

• FIlter incidents by status

Datatable color

• Color datatable dashboard bike
• Color datatable dashboard slot
• Color datatable dashboard station
• Color datatable dashboard rent

Prepare rent

• Create files
• Prepare model
• Prepare serializer
• Prepare view

List stations

• Page List stations
• Page List slots about 1 station