Table Of Contents

• About The Project

• Features

• Build With

About The Project

Context

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

Challenge

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.

Layout

• The desktop and mobile templates are available here

• I used the desktop first approach (no particular reason) to create the pages

Features

• accordion: ✔️
  • To display the questions and answers I used the html tag details and summary

• 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

• 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

• exihibt ticket: ✔️

  • Once the ticket page opens, a GET requisition to the a server is made and the qrcode, name, sector and date are displayed according to the user id
    • I used a json server, just to mimic a server temporarily.

Build With

🔹 React.js

🔹 Styled Components

🔹 React Router

🔹 Json Server