{"id":21933913,"url":"https://github.com/pabloxt14/nlw-journey-react","last_synced_at":"2026-04-15T10:34:13.719Z","repository":{"id":248194978,"uuid":"828034242","full_name":"PabloXT14/nlw-journey-react","owner":"PabloXT14","description":"Esta aplicação de nome Plann.er consiste em um site desktop para montar planos de viagem com amigos, registrar atividades e links úteis.","archived":false,"fork":false,"pushed_at":"2024-07-26T22:16:54.000Z","size":3728,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T12:19:02.595Z","etag":null,"topics":["axios","date-fns","radix-ui","react","react-day-picker","react-icons","react-query","react-router","sooner","tailwind-variants","tailwindcss","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"","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/PabloXT14.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-13T00:05:55.000Z","updated_at":"2024-07-26T22:19:29.000Z","dependencies_parsed_at":"2025-10-10T12:18:58.120Z","dependency_job_id":"b20557b1-c0cb-44fc-b9cc-bc8715bbefd1","html_url":"https://github.com/PabloXT14/nlw-journey-react","commit_stats":null,"previous_names":["pabloxt14/nlw-journey-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PabloXT14/nlw-journey-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2Fnlw-journey-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2Fnlw-journey-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2Fnlw-journey-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2Fnlw-journey-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PabloXT14","download_url":"https://codeload.github.com/PabloXT14/nlw-journey-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2Fnlw-journey-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31837224,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T10:26:52.245Z","status":"ssl_error","status_checked_at":"2026-04-15T10:26:51.649Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["axios","date-fns","radix-ui","react","react-day-picker","react-icons","react-query","react-router","sooner","tailwind-variants","tailwindcss","typescript","vite","zustand"],"created_at":"2024-11-29T00:13:58.360Z","updated_at":"2026-04-15T10:34:13.668Z","avatar_url":"https://github.com/PabloXT14.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg\n    src=\".github/nlw-journey-logo.png\"\n    title=\"Logo NLW Journey\"\n    alt=\"Logo NLW Journey\"\n    width=\"30px\"\n  /\u003e\n  NLW Journey (React)\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"GitHub language count\" src=\"https://img.shields.io/github/languages/count/pabloxt14/nlw-journey-react\"\u003e\n\n  \u003cimg alt=\"GitHub Top Language\" src=\"https://img.shields.io/github/languages/top/pabloxt14/nlw-journey-react\" /\u003e\n\n  \u003cimg alt=\"Repository size\" src=\"https://img.shields.io/github/repo-size/pabloxt14/nlw-journey-react\"\u003e\n  \n  \u003ca href=\"https://github.com/pabloxt14/nlw-journey-react/commits/master\"\u003e\n    \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/pabloxt14/nlw-journey-react\"\u003e\n  \u003c/a\u003e\n    \n   \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-blue\"\u003e\n\n   \u003ca href=\"https://github.com/pabloxt14/nlw-journey-react/stargazers\"\u003e\n    \u003cimg alt=\"Stargazers\" src=\"https://img.shields.io/github/stars/pabloxt14/nlw-journey-react?style=social\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cimg src=\".github/cover.png\" alt=\"Capa do projeto\" /\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e \n\t🚀 Aplicação finalizada 🚀\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#-about\"\u003eAbout\u003c/a\u003e | \n \u003ca href=\"#-layout\"\u003eLayout\u003c/a\u003e | \n \u003ca href=\"#-setup\"\u003eSetup\u003c/a\u003e | \n \u003ca href=\"#-technologies\"\u003eTechnologies\u003c/a\u003e | \n \u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 💻 About\n\nEsta aplicação de nome **Plann.er** consiste em um site desktop para montar planos de viagem com amigos, registrar atividades e links úteis.\n\nOs principais aprendizados neste projeto são a separação e componentização da interface em pequenas partes que podem ser reutilizadas, desta forma, facilitando também a manutenção futura. Ademais, também teve-se a implementação de roteamento com `React Route DOM` para a apresentação das rotas/paginas da aplicação de maneira dinâmica. Contudo, também vale destacar implementação de uma interface totalmente padronizada com princípios de um bom design usando o `Tailwind`.\n\nTodavia, essa aplicação foi desenvolvida durante o NLW Journey da [Rocketseat](https://www.rocketseat.com.br/) utilizando principalmente tecnologias como `React`, `TypeScript` e `Tailwind`.\n\n\n\u003c!-- ## 🔗 Deploy\n\nO deploy da aplicação pode ser acessada através da seguinte URL base: https://pabloxt14-nlw-expert-notes.vercel.app/ --\u003e\n\n\n## 🎨 Layout\n\nVocê pode visualizar o layout do projeto através [desse link](https://www.figma.com/community/file/1392276515495389646/nlw-journey-planejador-de-viagem). É necessário ter conta no [Figma](https://www.figma.com/) para acessá-lo.\n\nA seguir, veja uma demonstração das principais telas da aplicação:\n\n### Nova Viagem (Local e Data)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/new-trip_local-and-date.png\"\n    alt=\"New Trip - Local and Date\"\n    title=\"New Trip - Local and Date\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Nova Viagem (Pessoas)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/new-trip_people.png\"\n    alt=\"New Trip - People\"\n    title=\"New Trip - People\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Nova Viagem (Convidar)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/new-trip_invite.png\"\n    alt=\"New Trip - Invite\"\n    title=\"New Trip - Invite\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Nova Viagem (Finalizar)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/new-trip_finish.png\"\n    alt=\"New Trip - Finish\"\n    title=\"New Trip - Finish\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Nova Viagem (Confirmar)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/new-trip_confirm.png\"\n    alt=\"New Trip - Confirm\"\n    title=\"New Trip - Confirm\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Detalhes da Viagem (Full Page)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/trip-details_full.png\"\n    alt=\"Trip Details - Full\"\n    title=\"Trip Details - Full\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Detalhes da Viagem (Nova Atividade)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/trip-details_new-activity.png\"\n    alt=\"Trip Details - New Activity\"\n    title=\"Trip Details - New Activity\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Detalhes da Viagem (Novo Link)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/trip-details_new-link.png\"\n    alt=\"Trip Details - New Link\"\n    title=\"Trip Details - New Link\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n### Detalhes da Viagem (Confirmar Participante)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\".github/screens/trip-details_confirm-participant.png\"\n    alt=\"Trip Details - Confirm Participant\"\n    title=\"Trip Details - Confirm Participant\"\n    width=\"100%\"\n  /\u003e\n\u003c/p\u003e\n\n## ⚙ Setup\n\n### 📝 Requisites\n\nAntes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:\n\n* [Git](https://git-scm.com)\n* [NodeJS](https://nodejs.org/en/)\n* [NPM](https://www.npmjs.com/) ou [Yarn](https://yarnpkg.com/) \n* Para reproduzir o acesso a API back-end com os dados necessários para o front-end, clone o seguinte [repositório](https://github.com/pabloxt14/nlw-journey-node) que contem a API do nosso back-end feita em Node.js e execute na sua máquina.\n\nAlém disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)\n\n### Cloning and Running\n\nPasso a passo para clonar e executar a aplicação na sua máquina:\n\n```bash\n# Clone este repositório\n$ git clone git@github.com:pabloxt14/nlw-journey-react.git\n\n# Acesse a pasta do projeto no terminal\n$ cd nlw-journey-react\n\n# Instale as dependências\n$ npm install\n\n# Execute a API back-end\n\n# Execute a aplicação em modo de desenvolvimento\n$ npm run dev\n\n# A aplicação inciará em alguma porta disponível que poderá ser acessada pelo navegador\n```\n\n\n## 🛠 Technologies\n\nAs seguintes principais ferramentas foram usadas na construção do projeto:\n\n- **[React + Vite](https://vitejs.dev/)**\n- **[TypeScript](https://www.typescriptlang.org/)**\n- **[TailwindCSS](https://tailwindcss.com/)**\n- **[TailwindCSS Variants](https://www.tailwind-variants.org/)**\n- **[React Router DOM](https://reactrouter.com/)**\n- **[React Query](https://tanstack.com/query/latest)**\n- **[Zustand](https://zustand-demo.pmnd.rs/)**\n- **[React Icons](https://react-icons.github.io/react-icons/)**\n- **[Sooner](https://sonner.emilkowal.ski/)**\n- **[React Day Picker](https://daypicker.dev/)**\n- **[date-fns](https://date-fns.org/)**\n- **[Axios](https://axios-http.com/ptbr/docs/intro)**\n- **[Radix UI](https://www.radix-ui.com/)**\n\n\u003e Para mais detalhes das dependências gerais da aplicação veja o arquivo [package.json](./package.json)\n\n\n## 📝 License\n\nEste projeto está sob a licença MIT. Consulte o arquivo [LICENSE](./LICENSE) para mais informações\n\n\u003cp align=\"center\"\u003e\n  Feito com 💜 por Pablo Alan 👋🏽 \u003ca href=\"https://www.linkedin.com/in/pabloalan/\" target=\"_blank\"\u003eEntre em contato!\u003c/a\u003e  \n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpabloxt14%2Fnlw-journey-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpabloxt14%2Fnlw-journey-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpabloxt14%2Fnlw-journey-react/lists"}