This project is a front-end challenge designed by Alura.
The goal is to develop a web application from scratch and add functionalities according to customer needs.
To view my project click here
CodeChella is an alternative music festival that takes place annually, which is composed of different genres and aims to promote an enchanting and unforgettable experience for the visitor, providing multicultural and social integration. Aiming at publicizing it and selling tickets, the festival wants to implement a website that enables these actions:
- A home page that will show the attractions of the festival;
- A page to explain the festival experience, showing the different stages;
- A page to demonstrate the sectors available for ticket purchase;
- A FAQ page;
- A page for purchasing tickets by filling in the form;
- A page to show the generated ticket.
It is very important that the website is responsive to give customers the ease of purchasing through mobile devices.
-
The desktop and mobile templates are available here
-
I used the desktop first approach (no particular reason) to create the pages
accordion
: ✔️- To display the questions and answers I used the html tag
details
andsummary
- To display the questions and answers I used the html tag
form validation
: ✔️- Each input have its own validation
- All of them are required
- Email, name and CPF have pattern validation
- CPF have a custom validation to check if the CPF is valid
- Date have a custom validation to check if the the user is under age
- Each input have its own validation
-
submit validation
: ✔️- If all the fields are valid, the information is send to the server
- a random key is generated to server as an
id
- a qrcode is generated based on the
id
- the user is redirected to the ticket display page using the
id
- a random key is generated to server as an
- If all the fields are valid, the information is send to the server
-
exihibt ticket
: ✔️- Once the ticket page opens, a
GET
requisition to the a server is made and theqrcode, name, sector and date
are displayed according to the userid
- I used a json server, just to mimic a server temporarily.
- Once the ticket page opens, a
🔹 React.js
🔹 Styled Components
🔹 React Router
🔹 Json Server