{"id":21206913,"url":"https://github.com/sucodelarangela/codechella","last_synced_at":"2025-07-10T08:33:21.482Z","repository":{"id":111845056,"uuid":"607839659","full_name":"sucodelarangela/codechella","owner":"sucodelarangela","description":"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.","archived":false,"fork":false,"pushed_at":"2024-07-11T21:47:59.000Z","size":69392,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-12T00:23:11.551Z","etag":null,"topics":["alurachallengefront6","html2canvas","react","react-hook-form","react-router-hash-link","styled-components","typescript","vitrinedev","yup"],"latest_commit_sha":null,"homepage":"https://codechella2023.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sucodelarangela.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-28T19:30:11.000Z","updated_at":"2024-07-11T21:48:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"44ba7cd1-77be-4471-9572-459fb9f81b94","html_url":"https://github.com/sucodelarangela/codechella","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodechella","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodechella/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodechella/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodechella/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sucodelarangela","download_url":"https://codeload.github.com/sucodelarangela/codechella/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629862,"owners_count":17499295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alurachallengefront6","html2canvas","react","react-hook-form","react-router-hash-link","styled-components","typescript","vitrinedev","yup"],"created_at":"2024-11-20T20:57:12.401Z","updated_at":"2024-11-20T20:57:13.080Z","avatar_url":"https://github.com/sucodelarangela.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id='top'\u003e\n\n# CodeChella: Música para Devs | 6º Challenge Front-end Alura\n\n\u003c/div\u003e\n\n_[Read it in English](#English)_\n\nO **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).\n\nAlé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.\n\nComo desafio adicional, fiz a conversão da aplicação de JavaScript para TypeScript.\n\nAs tecnologias e linguagens utilizadas nesse desafio foram:\n\n\u003cdiv\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/typescript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/styled components-3C3C3C?style=for-the-badge\u0026logo=styled-components\u0026logoColor=DB7093\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/react hook form / yup-081229?style=for-the-badge\u0026logo=reacthookform\u0026logoColor=EC5990\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/html2canvas-76ad3f?style=for-the-badge\"\u003e\n\u003c/div\u003e\n\nVocê pode saber um pouco mais como funcionam os _challenges_ da Alura visitando a seção [**🦾 Sobre o desafio**](#challenge).\n\n\u003c!-- prettier-ignore --\u003e\n| 🪧 Vitrine Dev |  |\n| ------------- | - |\n| ✨ Nome       | **CodeChella 2023** - Challenge Alura |\n| 🏷️ Tecnologias | React, TypeScript, styled-components, yup, react-hook-form, html2canvas |\n| 🚀 URL         | **https://codechella2023.vercel.app/** |\n| 🔥 Desafio     | [**Design no Figma**](https://www.figma.com/file/xHLPBeA2ujaXbBjHMK9xh7/CodeChella-%7C-Challenge-I---Front-end-2023) |\n\n![](./public/og-image.png#vitrinedev)\n\n\u003cdiv id=\"challenge\"\u003e\u003c/div\u003e\n\n## 🦾 Sobre o desafio\n\nO 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\nNã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.\n\nO 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.\n\nO Desafio começou em 27 de fevereiro de 2023.\n\n\u003c!-- ## 🛡️ Badges recebidas pelo projeto\n\n\u003ctable style=\"text-align: center;\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg height=\"150px\" src=\"https://raw.githubusercontent.com/sucodelarangela/alura-geek/master/public/images/Badge_Alura_Challenge_FRONT-END_First_v2.png\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg height=\"150px\" src=\"https://raw.githubusercontent.com/sucodelarangela/alura-geek/master/public/images/Badge_Alura_Challenge_FRONT-END_Helper.png\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eBadge de Participação\u003c/td\u003e\n    \u003ctd\u003eBadge de Apoio\u003cbr\u003eà Comunidade\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e --\u003e\n\n\u003ca href='#top'\u003e🔼 Voltar ao topo\u003c/a\u003e\n\n---\n\n\u003cdiv id=\"English\"\u003e\n\n_English version_\n\n\u003c/div\u003e\n\n## 🔎 Overview\n\n**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.\n\nBesides 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.\n\nAs an additional challenge, I've converted all JavaScript to TypeScript in this application.\n\nThe stack used in this challenge was:\n\n\u003cdiv\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/typescript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/styled components-3C3C3C?style=for-the-badge\u0026logo=styled-components\u0026logoColor=DB7093\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/react hook form / yup-081229?style=for-the-badge\u0026logo=reacthookform\u0026logoColor=EC5990\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/html2canvas-76ad3f?style=for-the-badge\"\u003e\n\u003c/div\u003e\n\nTo know more about the _challenges_, go to the section [**🦾 About the challenge**](#🦾-about-the-challenge).\n\n## 🦾 About the challenge\n\nThe 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.\n\nThere 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.\n\nThe 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.\n\nThe Challenge started at February 27th, 2023.\n\n\u003c!-- ## 🛡️ Badges received in this project\n\n\u003ctable style=\"text-align: center;\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg height=\"150px\" src=\"https://raw.githubusercontent.com/sucodelarangela/alura-geek/master/public/images/Badge_Alura_Challenge_FRONT-END_First_v2.png\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg height=\"150px\" src=\"https://raw.githubusercontent.com/sucodelarangela/alura-geek/master/public/images/Badge_Alura_Challenge_FRONT-END_Helper.png\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eParticipation Badge\u003c/td\u003e\n    \u003ctd\u003eCommunity\u003cbr\u003eSupport Badge\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e --\u003e\n\n\u003ca href='#top'\u003e🔼 Back to top\u003c/a\u003e\n\n---\n\nDeveloped with 🧡 by [@sucodelarangela 🍊](https://angelacaldas.vercel.app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodelarangela%2Fcodechella","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsucodelarangela%2Fcodechella","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodelarangela%2Fcodechella/lists"}