Skip to content

LolaGM/almuticket-front

 
 

Repository files navigation

My AlmuTicket

1. AlmuTicket: Project Description

Create an internal APP for Asociación Arrabal in order to centralize all the requests currently received by Almudena(the receptionist) from different sources and people.

This web application will allow to generate tickets with requests, incidents and room reservations to the people who are part of Arrabal from their cell phones or desktops and to Almudena to manage them all from only one place: AlmuTicket app.

This readme corresponds to the frontend development of the application, which is complemented by the backend development located in the repository https://github.com/Himorell/almuTicketApi

2. User Stories

2.1 Administrator

  • It’s necessary to have a view to see the tickets created by the user (Read).
  • A view is needed to manage existing tickets (Update).
  • A button is needed to change the status of a ticket (Viewed, pending, pending, finished, rejected).
  • Need to reject the status of a ticket. The application will automatically send an email to inform the user about the rejected status of their request.
  • It’s necessary to close the status of a ticket and the application will automatically send an email to inform the user about the resolved status of their request.

2.2 Users

  • A button is needed for registration.
  • A button is needed for login.
  • A button is needed for a ticket to be created (Create).
  • The user will be able to see a list with the tickets that he has created (Read).
  • The user will receive an automated email informing him that his ticket has been resolved.
  • The user will receive an automated email informing them that their ticket has been rejected.

2.3 Additional features (Users)

  • That the user has a button to delete the tickets created while it remains in the "Issued" status.

3. Fullstack Developer Team and GitHub Links

4. Project Demo

300323.Video.Readme.Demo.-.Compressed.with.FlexClip.mp4

5. Atomic Design

Atomic Design 1 Atomic Design 2 Arrabal Logo White Arrabal Logo Orange

6. Final Design

6.1 Mobile View

User Mobile view

User Mobile View 1 User Mobile View 2 User Mobile View 3 User Mobile View 4

Mobile View of Tickets

Booking View Ticket Incident View Ticket

6.2 Computer views (Common administrator and user)

Register Ingress Generate Ticket Tickets List Create Booking Create Incidence

6.3 Exclusive administrator view

Tickets List Gestion Reservs Gestion Incidences

7. Stacks and technologies

8. Other Tools

9. Methodology

  • Agile (SCRUM)
  • Mob programming
  • Pair programming
  • Single programming
  • TDD

10. Core skills

  • MVC Design pattern.
  • Git version control system.
  • User stories and tasks implementation (Trello).
  • Communication and self-evaluation.

11. How to install

11.1 Required:

  • NPM Installed.
  • VUE Installed and updated to latest version
  • MySQL.

  • 11.2 To install our project

    • Open IDE
    • Copy in the terminal: git clone https://github.com/CarmenGP/almuticket-front
    • In the IDE run git clone command, an paste the HTTPS.
    • Write in the IDE terminal (In the project folder) the command: npm install vue.
    • Type in the IDE terminal: npm run format and press intro.
    • Type in the IDE terminal: npm run dev and press intro. It will open the port http://localhost:5173/ from where we can view the project
    • Type in the IDE terminal: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest and press intro to install Tailwind
    • Type in the IDE terminal: npm install bootstrap and press intro to install Bootstrap
    • Type in the IDE terminal: npm install datatables.net-dt and press intro to install DataTables.net
    • Type in the IDE terminal: npm install axios and press intro to install Axios
    • Type in the IDE terminal: npm install emailjs-com and press intro to install EmailJS
    • Type in the IDE terminal: npm install pdfmake and press intro to install PDF Make
    • Type in the IDE terminal: npm install pdfmake/build/vfs_fonts.js and press intro to install PDF Fonts
    • Type in the IDE terminal: npm install jszip and press intro to install JSZip

    11.3 Testing

    testBackend

    12. Next steps

    • Frontend test
    • Implementation of more functionality in tables.
    • Connection of all components with AXIOS.
    • Enable route to show views from tickets.
    • Finish implementing media query in frontend.
    • Implement the view of the helper CRUD's.
    • Automatic sending of emails, using EmailJS.

    About

    Front repository from the final project in Bootcamp FemCoders 2023

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published

    Languages

    • Vue 89.4%
    • JavaScript 6.9%
    • CSS 2.3%
    • HTML 1.4%