4-week challenge to develop a website to promote the “CodeChella” technology festival.
- About
- The Challenge
- Technologies Used
- Responsive Layout
- Dark and Light Themes
- Running Locally
- Feedback and Contributions
- Screenshots
Codechella is the result of the Alura 6th Front-end Challenge (Figma). This exciting web application showcases the skills and knowledge acquired during the challenge.
I tried to structure this project in a clean and organized manner. The codebase follows best practices, and components have been modularized to promote reusability and maintainability. The extensive use of TypeScript throughout the project ensures type safety and improves code readability.
CodeChella is a fictional alternative music festival that takes place annually, is composed of different genres and aims to promote an enchanting and unforgettable experience for the visitor, providing a 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 Codechella web application is built using the following technologies:
- React: A popular JavaScript library for building user interfaces.
- Typescript: A statically typed superset of JavaScript that enhances code readability and maintainability.
- React-Router-Dom: A library for handling navigation and routing within a React application.
- React-Responsive: A library for creating responsive UI components in React.
- Testing-Library: A set of utilities for testing React components.
Codechella was developed using the mobile-first approach, ensuring that the application is optimized for mobile devices from the very beginning of the development process. The site's design is fluid, adapting gracefully to different screen sizes, providing an optimal viewing experience to users. Whether on a large desktop screen or a small mobile device, the content remains legible and well-organized.
One of the exciting features of the Codechella website is the implementation of two templates: a light theme and a dark theme. This implementation has been achieved using React Context, allowing users to switch between the themes seamlessly.
To run the Codechella project locally, follow these steps:
- Clone this repository:
git clone https://github.com/ecureuill/codechella.git - Install the dependencies:
npm install - Start the development server:
npm start - Access the project in your web browser at: http://localhost:3000
Feedback and contributions are always welcome! If you have any suggestions or find any issues in the project, feel free to create an issue or submit a pull request.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | CodeChella |
| 🏷️ Tecnologias | React, TypeScript, React-Router-Dom, React-Responsive, Testing-Library |
| 🚀 URL | https://ecureuill.github.io/codechella/ |
| 🔥 Desafio | Figma |
