CineGibiTube 🎬
A aplicação faz parte da jornada imersão Alura fazendo uso da biblioteca ReactJS para a criação do "Aluratube", isto é, uma página voltada para a exibição dos conteúdos da escola de tecnologia, todavia, nada melhor do que estimular a criatividade e trazer um toque pessoal ao projetinho.
E assim nasce o CineGibiTube 🎬
E antes que venha a pergunta, sim, eu era obcecada por Turma da Mônica quando criança e certamente seria o maior sonho da minha vida ter todos os cines gibis compilados em um único lugar. Devo admitir que a criança interior falou mais alto quando cantarolou um "como é bom ir ao cinema pra ver um filme legal".
Voltando à maturidade, nos dias em que decorreram a construção do projeto foi incentivado o desenvolvimento de uma visão multidisciplinar e analítica das reais necessidades do front-end, cujo objetivo centrou-se na promoção de uma proveitosa experiência de desenvolvimento.
Ademais, inicializar o projeto contemplando aspectos basilares de software como o pensamento arquitetural, organização infraestrutural e design patterns foi essencial para compreender de forma simplificada o fluxo alinhado às boas práticas de produção, que aos poucos conferem produtividade à pessoa desenvolvedora e valor aos projetos.
Destrinchando algumas palavrinhas-chave de suma relevância:
O planejamento arquitetural de front-end perpassa uma série de conceitos relevantes para o desenvolvimento de software, levando em consideração o modelo da aplicação, documentações bem definidas, tempo de vida e code review, além de abranger as dimensões de testes e o contínuo trabalho de incremento a fim de conferir qualidade ao projeto. Logo, o cuidado de delimitar quais ferramentas e features serão utilizadas para se atingir o objetivo do time é crucial para evitar retrabalho posteriormente, bem como ter clara a noção de sistemas escaláveis.
A organização infraestrutural possibilita que um trabalho complexo seja aprimorado através de um modelo de resolução de processos, mantendo a simplicidade, a robustez e a confiabilidade voltados p/ as boas práticas de entrega.
O Desing System traz consistência às equipes multidisciplinares envolvidas na confecção do produto (além de facilitar o processo de refatoração dos códigos na etapa de pair programming).
Single Page Application (SPA) - componentes reagem e se adaptam de acordo com o estado atual da interface de modo a otimizar a interação do usuário. Em outras palavras, a SPA quase nunca dá um reload inteiro da página, mas atualiza o componente em específico de acordo com a interatividade indicada.
Link do projeto no ar:
https://cine-gibi-tube-imersao-react.vercel.app/
Capturas de tela
Ferramentas e recursos utilizados:
- Node;
- next.js;
- figma;
- design system;
- styled components;
- props;
- contextAPI(configurou o global da configuração p/ implementar o dark mode);
- custom hooks;
- supabase;
- deploy no vercel.
Comandos utilizados durante a criação do projeto:
npx create-next-app@latest (criar o arquivo)
npm run dev (abrir no localhost)
npm i styled-components (baixar a lib do styled-components)
Obs: styled-components trata-te de uma biblioteca(lib) que permite a utilização de estilos à nível de componentes, ou seja, a escrita de códigos CSS dentro do JavaScript (CSS-in-JS). Isso acarreta na potencialização funcional da aplicação, seguido da hierarquização de recursos semânticos e no reaproveitamento das propriedades.
Comandos para a execução do projeto:
cd nome-do-projeto (entrar na pasta do arquivo via terminal)
code . (abrir o editor de textos Visual Studio Code)
npm install (baixar as dependências instaladas)
npm run dev (executar os scripts)
Obs: é preciso ter o Node instalado previamente, buscando manter a versão mais atualizada do software.
Ponto de atenção:
A manipulação dos itens nesse repositório foram para fins única e exclusivamente didáticos(e com uma conotação bem emocional). Logo, todos os direitos são resguardados à marca Turma da Mônica.
Link do canal principal de divulgação no YouTube:
https://www.youtube.com/c/TurmadaM%C3%B4nica
Implementações futuras:
- cinegibitube no lugar do aluratube -> menu.js -> linha 58 ;
- área de Aluratubes favoritos -> colocar no config.json e criar uma entrada de favorites com um array e fazer ficar funcional;
- tirar prints e fazer uma revisão coesa do readme.
Status:
Em andamento.