This is the SIXTH PROJECT of the Full Stack Development Bootcamp with Geekshubs Academy. A front-end site based on project number 4 of the bootcamp (Tattoo studio searching engine). Made with React.
FRONT-END STACK:
BACK-END STACK:
Table of Contents
Read about it (only in spanish)
Front-end para una API de gestión de citas para un estudio de tatuajes:
En esta ocasión se nos requiere generar la parte frontal que conecte con nuestra API encargada de gestionar el modelo de negocio de un estudio de tatuajes.
Para ello, generaremos unas vistas sencillas que nos permitan registrarnos y logearnos como usuarios, ver nuestro perfil de usuario y modificarlo, así como ver nuestras citas. Además, necesitaremos poder ver los servicios que ofrece el estudio y poder concertar nuevas citas. Por último, debemos tener una vista de administrador desde la que se podrá acceder a la información de la aplicación y modificarla según proceda.
En definitiva, tendremos que ser capaces de crear una parte frontal de la app lo suficientemente versátil como para que clientes, profesionales y un administrador puedan acceder y hacer uso de ella.
The proposed exercise is to create a front-end site connecting to the Tattoo Studio API from a previous project.
✅ Landing page (home)
✅ User register
✅ User login
✅ Profile view (see info and update)
✅ Own appointments view (see info and delete)
✅ Service view (can be integrated in landing/home page)
✅ Create new appointments view (as User)
✅ See and delete users (as Admin)
✅ Service detail view
✅ See and delete services (as Admin)
⬜️ ( in progress ) create and update services (as Admin)
✅ See and delete appointments (as Admin)
⬜️ Appointment detail view
⬜️ See an specific user (as Admin)
⬜️ Update user (as Admin)
✅ ( partially❗️) Data validation (check all data format before sending it to the back-end...)
✅ ( partially❗️) Error handling (displaying helpful messages when an error occurs, both form-filling related errors and back-end failed requests/responses)
- Clone this repository
- Run
$ npm installin terminal - Connect repository with database
$ npm run dev
⚠️ Since we will be fetching information from our own API from a previous project, here is how to install the back-end project and how to populate seeders - in case you run out of items to delete :)
- Clone this repository
- Run
$ npm installin terminal - Connect repository with database
- Run migrations:
$ npm run run-migrations - Run seeders:
$ npm run seeders - Start server:
$ npm run dev
Landing
Register / Login
See profile / Edit profile
Appointments
Admin
✅ See and delete services (as Admin)
✅ See and delete appointments (as Admin)
⬜️ Appointment detail view
⬜️ Appointment CRUD for Admin
⬜️ Edit appointments as user (create, get and delete are done ✅)
⬜️ Add avatar/picture to profile
⬜️ See an specific user (as Admin)
⬜️ Update user (as Admin)
⬜️ ( in progress ) Services CRUD (as Admin)
✅ ( partially❗️) Data validation (check all data format before sending it to the back-end...)
✅ ( partially❗️) Error handling (displaying helpful messages when an error occurs, both form-filling related errors and back-end failed requests/responses)
If you have any comment or suggestion, feel free to reach out to me. My contact is down below. Or you could as well either:
- Open an 'issue' here in this project
- Fork this repository
- Create a new branch
$ git checkout -b feature/yourUserName-fix - Commit your changes
$ git commit -m 'feat: updating/fixing/improving whatever it is' - Push to the branch
$ git push origin feature/yourUserName-fix - Create a Pull Request
- Create a new branch
