{"id":22253665,"url":"https://github.com/renanfachin/pucrs_hotwheelsapp","last_synced_at":"2026-05-09T15:31:29.823Z","repository":{"id":229369250,"uuid":"771696497","full_name":"RenanFachin/PUCRS_HotWheelsAPP","owner":"RenanFachin","description":"Aplicação para cadastros de veículos criada utilizando react, typescript e mais! A aplicação possui sistema de autenticação e uma API própria criada.","archived":false,"fork":false,"pushed_at":"2024-03-15T02:56:59.000Z","size":240,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T11:26:53.377Z","etag":null,"topics":["authentication","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://pd-hot-wheels-app.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/RenanFachin.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":"2024-03-13T19:22:42.000Z","updated_at":"2024-05-15T18:50:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f76bc1a-cd7f-4e1a-a5c5-824ebd29f926","html_url":"https://github.com/RenanFachin/PUCRS_HotWheelsAPP","commit_stats":null,"previous_names":["renanfachin/pd_hotwheelsapp","renanfachin/pucrs_hotwheelsapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenanFachin%2FPUCRS_HotWheelsAPP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenanFachin%2FPUCRS_HotWheelsAPP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenanFachin%2FPUCRS_HotWheelsAPP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenanFachin%2FPUCRS_HotWheelsAPP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RenanFachin","download_url":"https://codeload.github.com/RenanFachin/PUCRS_HotWheelsAPP/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245460487,"owners_count":20619077,"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":["authentication","reactjs","typescript"],"created_at":"2024-12-03T07:19:22.884Z","updated_at":"2026-05-09T15:31:29.762Z","avatar_url":"https://github.com/RenanFachin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HotWheels - CRUD\nDesenvolvimento de uma aplicação utilizando reactJS, tailwindCSS e typescript para a cadeira de Desenvolvimento de sistemas front-end da PUC-RS.\n\n## Framework (ViteJS)\nO framework utilizado para elaboração do projeto foi o vitejs, que é um framework que possui rápida atualização, utiliza abordagem de carregamento de módulos nativa do ECMAScript, possui o HMR(Hot Module Replacement), permitindo a atualização instantânea durante o desenvolvimento e por fornecer um projeto com configurações mínimas a serem realizadas para dar inicio ao projeto.\n\n## Estilização (Tailwindcss)\nA escolha pelo tailwindcss para estilização do projeto se deu pela produtividade, customização flexível, manutenção simples, **consistência visual** e a fácil integração com react.\nDefinição da paleta de cores: https://coolors.co/palette/2b2d42-8d99ae-edf2f4-ef233c-d90429\n\n## Rotas\nPara criação de das rotas da aplicação foi utilizado a biblioteca react-router-dom para melhor manipulação das rotas.\nAs páginas da aplicação se encontram dentro de ./src/pages/app\nTodas páginas da aplicação foram envolvidas por um layout, que é um padrão que será utilizado para todas as rotas da aplicação.\nTodas estas rotas fazem uso de um layout para aplicação, que é apenas o menu de navegação da página.\n\n```bash\nHome: http://localhost:5174/\nAbout: http://localhost:5174/about\nCars: http://localhost:5174/cars\nAddCars: http://localhost:5174/add-cars\n```\n\n## Melhorias no SEO da página\nUtilizando a lib react-helmet-async que permite a manipulação das META tags de cada página.\n\n## Validação no formulário\nAs validações impostas neste projeto foram criadas a partir das biblitoecas react-hook-form e zod. Ambas fornecem funcionalidades que garantem a tipagem correta dos dados e também a validação dos campos durante o submit do form.\n\n\n## Componentes\n- [x] Button - Para elaboração do componente de button foi utilizando um pattern de criação de componentes no qual nos possibilita a personalização do Button no local em que ele será utilizado. O Button possui dois children Button.Text e Button.Icon, com essa composição podemos implementar um botão sem ícone, um botão com ícone na direita e texto na esquerda ou um botão com ícone na esquerda e texto no direita.\nOutra função importante deste componente é a criação de variantes com o uso da lib tailwind-variants, no qual conseguimos, na hora de utilizar o componente, definir qual a estilização a ser utilizada.\n\n- [x] CarDetail - Este componente é onde os detalhes do carro são mostrados. Ele recebe 2 props, **car** que é o objeto com as informações do carro e deve possuir a seguinte configuração: Car {brand: string, color: string, id: number, name: string, year: string} e também uma função **handleDeleteCar** no qual é disparada quando é clicado em deletar o registro. Para elaboração deste componente, foi utilizado o componente de Dialog da lib Radix-UI, este Dialog nos permite configurar totalmente a forma de visualização de um Dialog na página. Este Dialog é chamado quando é clicado no botão de visualização de detalhes do carro.\n\n- [x] CarForm - Este componente possui TODA a lógica do formulário de inserção de dados. Para validação dos dados é utilizado as biblitecas **zod** e **react-hook-form**. Este componente recebe como propriedade a função handleAddCar para disparar uma inserção de dados passando os valores que forem adicionados pelo submit do form.\n\n- [x] CarList - Componente simples em que é apenas utilizado para criação do layout da visualização da lista de carros. Ele recebe children como propriedade, este children é o CarDetail.\n\n- [x] GithubWidget - Componente de widget que fica na posição absoluta da tela para levar o usuário para o repositório do github do projeto.\n\n- [x] NavLink - Este componente foi criado para possibilitar uma maior flexibilidade na criação do menu de navegação. O componente utiliza o componente **Link** que vem da biblioteca de **react-router-dom** e possibilita a navegação do usuário pelas rotas da aplicação. Para elaboração da estilização deste componente, foi utilizado o conceito de data-attributes que nos permite criar personalizações na estilização com base em alguma situação, neste caso, a situação é a verificação do path(caminho) em que o usuário se encontra dentro da aplicação.\n\n- [x] NavBar - É o componente que engloba os componentes de NavLink, é utilizado para criar um menu interativo com o usuário.\n\n- [x] NotFound - Componente contendo uma estilização básica para mostrar quando o usuário navegar para uma página que não esteja mapeado no arquivo de rotas.\n\n- [x] Task - Componente utilizado para criação da lista de tarefas que é mostrado na tela de /about da aplicação.\n\n## Instalação\nFaça o clone do repositório\n\nInstalando as dependências\n```bash\nnpm i\n```\n\nRodando o projeto\n```bash\nnpm run dev\n```\n\nAcesse o caminho fornecido pelo prompt de comando\n```bash\nhttp://localhost:5174/\n```\n\n## Autor\n\n- [Renan Fachin](https://github.com/RenanFachin/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenanfachin%2Fpucrs_hotwheelsapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenanfachin%2Fpucrs_hotwheelsapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenanfachin%2Fpucrs_hotwheelsapp/lists"}