{"id":26927447,"url":"https://github.com/g4br13l/weather-app","last_synced_at":"2026-04-11T09:46:45.394Z","repository":{"id":285672477,"uuid":"958180914","full_name":"g4br13l/weather-app","owner":"g4br13l","description":"The Weather App gets API climate data and shows the most updated information at its location. It was made using React, Tanstack Query, Tanstack Router, Tailwind, and ShadcnUI.","archived":false,"fork":false,"pushed_at":"2025-04-02T02:56:49.000Z","size":489,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T03:32:19.329Z","etag":null,"topics":["best-practices","front-end","frontend","react","reactjs","shadcn","shadcn-ui","tailwind","tailwindcss","tanstack-query","tanstack-react-query","tanstack-router","typescript","typescript-react","weather","weather-app"],"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/g4br13l.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":"2025-03-31T19:19:43.000Z","updated_at":"2025-04-02T03:12:35.000Z","dependencies_parsed_at":"2025-04-02T03:32:22.273Z","dependency_job_id":"59287f28-2854-4239-86c2-500ca3970113","html_url":"https://github.com/g4br13l/weather-app","commit_stats":null,"previous_names":["g4br13l/weather-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/g4br13l/weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4br13l%2Fweather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4br13l%2Fweather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4br13l%2Fweather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4br13l%2Fweather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/g4br13l","download_url":"https://codeload.github.com/g4br13l/weather-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4br13l%2Fweather-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31676210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"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":["best-practices","front-end","frontend","react","reactjs","shadcn","shadcn-ui","tailwind","tailwindcss","tanstack-query","tanstack-react-query","tanstack-router","typescript","typescript-react","weather","weather-app"],"created_at":"2025-04-02T04:15:53.531Z","updated_at":"2026-04-11T09:46:45.375Z","avatar_url":"https://github.com/g4br13l.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather app\n\nThe Weather App gets API climate data and shows the most updated information at its location.\u003cbr/\u003e\nIt was made using React, Tanstack Query, Tanstack Router, Tailwind, and ShadcnUI.\n\nhttps://github.com/user-attachments/assets/479edf65-64e0-404e-803b-07e224805e50\n\n\n## WeatherCard Component\nThe main application component includes a light mode for daytime use and a \ndark mode for nighttime use.\n\nAdditionally, this component features three background colors based on temperature:\n- Blue: for temperatures of 5ºC or lower\n- Orange: for temperatures greater than 5ºC and up to 25ºC\n- Red: for temperatures above 25ºC\n\n![img.png](img.png)\n\n\n# Getting Started\n\nTo run this application:\n\n```bash\nbun install\nbun run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nbun run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nbun run test\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n## Linting \u0026 Formatting\n\nThis project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:\n\n```bash\nbun run lint\nbun run format\nbun run check\n```\n\n## Routing\n\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router.\nWhich means that the routes are managed as files in `src/modules`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the \n`./src/modules` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation import the `Link` component \nfrom `@tanstack/react-router`.\n\n```tsx\nimport { Link } from '@tanstack/react-router'\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n\u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e\n```\n\nThis will create a link that will navigate to the `/about` route.\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/modules/__root.tsx`. \nAnything you add to the root route will appear in all the routes. \nThe route content will appear in the JSX where you use the `\u003cOutlet /\u003e` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from '@tanstack/react-router'\n\nexport const Route = createRootRouteWithContext\u003c{ queryClient: QueryClient }\u003e()({\n  component: RootComponent,\n})\n\nfunction RootComponent() {\n  return (\n    \u003cmain className=\"f-col w-full items-center\"\u003e\n\n      \u003cdiv className=\"f-col mb-32 w-full max-w-7xl\"\u003e\n        \u003cTopMenu /\u003e\n        \u003cOutlet /\u003e\n      \u003c/div\u003e\n\n      \u003cReactQueryDevtools /\u003e\n      \u003cTanStackRouterDevtools /\u003e\n    \u003c/main\u003e\n  )\n}\n```\n\nUse the `\u003cTanStackRouterDevtools /\u003e` and `\u003cReactQueryDevtools /\u003e` to debug the application.\n\u003cbr/\u003e\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n### React-Query\n\nReact-Query is an excellent addition or alternative to route loading.\nYou can use `useQuery` to fetch your data.\n\n```tsx\nimport { useQuery } from '@tanstack/react-query'\n\nimport './App.css'\n\nfunction App() {\n  const { data } = useQuery({\n    queryKey: ['people'],\n    queryFn: () =\u003e\n      fetch('https://swapi.dev/api/people')\n        .then((res) =\u003e res.json())\n        .then((data) =\u003e data.results as { name: string }[]),\n    initialData: [],\n  })\n\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {data.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nYou can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).\n\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg4br13l%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fg4br13l%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg4br13l%2Fweather-app/lists"}