Ticket Travel

Principal Links

• Deployed App 🚀
• Video Demo ▶️

Jump To

• Introduction
• Features
• Technologies
• Installation
• Folder Structure
• How to run unit tests
• How to run e2e tests
• How to run lint
• How to run storybook
• License

Introduction

Ticket Travel is a web application that allows users to book tickets for travel.

It was created as a challenge project for JustTravel in a selective process.

Features

• This was built following the Figma design provided by JustTravel.
• Users can see a list of available tickets from API provided by JustTravel.
• Users can search for specified tickets by Name, or Location.
• Users can access the details of a ticket.
• Users can book a ticket clicking on "Comprar Ingresso" in the ticket details page.
• Users can access their booked tickets in the cart menu clicking on the cart button in the header.
• Users can remove a ticket from the cart.
• Users can see the subtotal, total price, and installment value of the tickets in the cart.
• Users can increase the quantity of a ticket booking more than one ticket.

Technologies

• React
• Next.js
• Redux
• TypeScript
• SASS
• Storybook
• Vitest
• React Testing Library
• Cypress
• ESLint
• MUI

Installation

1. Clone the repository

git clone git@github.com:vertocode/ticket-travel.git

2. Install the dependencies

npm run i

3. (Optional) You can set the environment variables to use the real time dollar value in the header. If it's not set, the application will use a fixed value of R$ 5.53.

cp .env.sample .env

Open the .env file and set the EXCHANGE_RATE_API_KEY value. You can get it here.

4. Run the application

npm run dev

Folder Structure

Folder	Description
/app	The main application folder, where the pages are located.
/components	The components used in the application.
/lib	The application libraries config, as Redux is being used there.
/assets	The application assets.
/public	The public folder, where the logo, and images are located.
/hooks	The application React custom hooks.
/utils	The application utils where we have the common functions.
/styles	All the application styles.
/vitest	The unit tests.
/cypress	The end-to-end tests.
/types	The application types to use with TypeScript.
/services	The application services, where we have the API calls.
/stories	The Storybook stories.
/.storybook	The Storybook configuration.

How to run unit tests

npm run test

How to run e2e tests

To run the e2e tests in the browser, you can use the following command:

npm run cypress:open

To run the e2e tests in the headless mode, you can use the following command:

npm run cypress:run

How to run lint

npm run lint

How to run storybook

npm run storybook

License

This project is licensed under the MIT License. See the LICENSE file for details.