Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sucodelarangela/codechella

Página de evento fictício musical CodeChella, desenvolvido com React, JavaScript, styled-components, react-hook-form e yup. Projeto resultado do 6º Desafio Front End da Alura.
https://github.com/sucodelarangela/codechella

alurachallengefront6 html2canvas react react-hook-form react-router-hash-link styled-components typescript vitrinedev yup

Last synced: about 1 month ago
JSON representation

Página de evento fictício musical CodeChella, desenvolvido com React, JavaScript, styled-components, react-hook-form e yup. Projeto resultado do 6º Desafio Front End da Alura.

Awesome Lists containing this project

README 

        



# CodeChella: Música para Devs | 6º Challenge Front-end Alura






_[Read it in English](#English)_



O **CodeChella** é uma página de um evento fictício de música inspirado no Coachella, que foi desenvolvida como resultado de um Desafio Front-End (6ª edição) exclusivo para alunos da escola de tecnologia [Alura](https://www.alura.com.br).



Além do desafio em si, optei por fazer os dois temas sugeridos em vez de apenas um deles. Também optei por alimentar dinamicamente o preenchimento do ingresso com os dados fornecidos pelo usuário no formulário da página **Ingresso**. Esses dados são salvos no _localStorage_ do browser e possibilitam o redirecionamento dinâmico para a página do ingresso. Dessa forma, o usuário poderá fazer download do seu ingresso em formato PNG.



Como desafio adicional, fiz a conversão da aplicação de JavaScript para TypeScript.



As tecnologias e linguagens utilizadas nesse desafio foram:





  

  

  

  

  




Você pode saber um pouco mais como funcionam os _challenges_ da Alura visitando a seção [**🦾 Sobre o desafio**](#challenge).



| 🪧 Vitrine Dev |  |

| ------------- | - |

| ✨ Nome       | **CodeChella 2023** - Challenge Alura |

| 🏷️ Tecnologias | React, TypeScript, styled-components, yup, react-hook-form, html2canvas |

| 🚀 URL         | **https://codechella2023.vercel.app/** |

| 🔥 Desafio     | [**Design no Figma**](https://www.figma.com/file/xHLPBeA2ujaXbBjHMK9xh7/CodeChella-%7C-Challenge-I---Front-end-2023) |



![](./public/og-image.png#vitrinedev)






## 🦾 Sobre o desafio



O Desafio simula um ambiente de trabalho real, com tarefas exigidas pelos designers por meio de cartões no **Trello**. É necessário comunicar-se e entender o que os designers realmente querem de cada tarefa, podemos escolher a tecnologia que desejarmos para desenvolver o código. Podemos, também, adicionar recursos e sugerir modificações.



Não há aulas específicas para o desafio, por isso devemos desenvolver com o conhecimento que temos. As instrutoras preparam um plano de estudos com dicas de conhecimentos que podemos precisar caso precisemos fazer algo e não saibamos exatamente como fazer, mas é nossa responsabilidade buscar e trocar informações com outros desenvolvedores para realizar o trabalho.



O Desafio dura 4 semanas. Todas as segundas-feiras durante 3 semanas receberemos novos trabalhos dos designers e devemos desenvolver o que foi pedido. Na semana 4, estamos livres para implementar novos recursos ou brincar com estilos e outros questões de aparência.



O Desafio começou em 27 de fevereiro de 2023.



🔼 Voltar ao topo



---






_English version_






## 🔎 Overview



**CodeChella** is a page of a fictional music event inspired on Coachella, which is being developed as a result of a Front-End Challenge (6th edition) exclusively for students of [Alura](https://www.alura.com.br) tech school.



Besides the challenge itself, I have chosen to develop both themes (_summer_ and _boreal_) instead of choosing only one. I have also chosen to dynamically feed the ticket's information with the data the user provides in the form on **Ingresso** page. These data are saved in the browser's _localStorage_ and allow the dynamic redirect to your ticket page, where the user can download her/his ticket.



As an additional challenge, I've converted all JavaScript to TypeScript in this application.



The stack used in this challenge was:





  

  

  

  

  




To know more about the _challenges_, go to the section [**🦾 About the challenge**](#🦾-about-the-challenge).



## 🦾 About the challenge



The Challenge simulates a real work environment, with tasks required by the designers via **Trello** cards, so students may experience how a real job feels like. It is necessary to communicate and understand what the designers really want from each task, we can choose the technology that best apply for us to develop the code. We can add features and suggest modifications in case we have better ideas and so on.



There are no specific classes for the challenge, so we must go on with the knowledge we have. The instructors prepare a study plan with tips of things we might need in case we wish to do something and don't know exactly how to do it, but it is our part to seek and exchange info with other developers to get the job done.



The Challenge lasts 4 weeks. Every Monday for 3 weeks we will receive new assignments from the designers and should develop what was asked. On week 4 we are free to implement new features or play with styles and othe appearances feats.



The Challenge started at February 27th, 2023.



🔼 Back to top



---



Developed with 🧡 by [@sucodelarangela 🍊](https://angelacaldas.vercel.app)