{"id":15587261,"url":"https://github.com/victoriacheng15/rest-countries-api-ts","last_synced_at":"2025-03-07T09:31:19.537Z","repository":{"id":103983430,"uuid":"571102010","full_name":"victoriacheng15/rest-countries-api-ts","owner":"victoriacheng15","description":"Using TypeScript, React, Jest, and Tailwind CSS, this app lets users explore country info with search \u0026 select features. Dive into specific country details too!","archived":false,"fork":false,"pushed_at":"2023-03-30T16:12:36.000Z","size":6702,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-24T23:01:39.364Z","etag":null,"topics":["api-rest","react","react-router","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://rest-countries-api-ts-vc.netlify.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/victoriacheng15.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":"2022-11-27T06:48:09.000Z","updated_at":"2025-01-14T21:51:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"bb5530ec-b717-4bdf-9c69-e82e780551cc","html_url":"https://github.com/victoriacheng15/rest-countries-api-ts","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/victoriacheng15%2Frest-countries-api-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victoriacheng15%2Frest-countries-api-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victoriacheng15%2Frest-countries-api-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victoriacheng15%2Frest-countries-api-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victoriacheng15","download_url":"https://codeload.github.com/victoriacheng15/rest-countries-api-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242367432,"owners_count":20116310,"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":["api-rest","react","react-router","tailwindcss","typescript","vite"],"created_at":"2024-10-02T22:01:13.261Z","updated_at":"2025-03-07T09:31:18.956Z","avatar_url":"https://github.com/victoriacheng15.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REST Countries API - TypeScript Version\n\n![screenshot](./country-information-app.jpg)\n\nThis is an app that I rebuilt with TypeScript. You can see the [JS version](https://github.com/victoriacheng15/fem-rest-countries-api#readme).\n\nAn app contains `search` and `dropdown` features where users can use a search box to search the desired country and use the dropdown to filter countries by regions (Africa, Americas, Asia, Europe, and Oceania). The users also can click a country to view more detailed information.\n\nThe user should be able to:\n\n- [x] See all countries from the API on the homepage with pagination\n- [x] Search for a country using an `input` field\n- [x] Filter countries by region\n- [x] Click on a country to see more detailed information on a separate page\n- [x] Click through to the border countries on the detail page\n- [x] Toggle the color scheme between light and dark mode\n\n[View the site live here](https://rest-countries-api-ts-vc.netlify.app/)\n\n## Tech stack:\n\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge\u0026logo=TypeScript\u0026logoColor=white) ![React](https://img.shields.io/badge/React-61DAFB.svg?style=for-the-badge\u0026logo=React\u0026logoColor=black) ![React Router](https://img.shields.io/badge/React%20Router-CA4245.svg?style=for-the-badge\u0026logo=React-Router\u0026logoColor=white) ![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4.svg?style=for-the-badge\u0026logo=Tailwind-CSS\u0026logoColor=white) ![Vite](https://img.shields.io/badge/Vite-646CFF.svg?style=for-the-badge\u0026logo=Vite\u0026logoColor=white) ![Testing Library](https://img.shields.io/badge/Testing%20Library-E33332.svg?style=for-the-badge\u0026logo=Testing-Library\u0026logoColor=white)\n\n## Screenshots/GIFs\n\n\u003cdetails close\u003e\n\u003csummary\u003eSearch Demo\u003c/summary\u003e\n\n![Search Demo](./media/search.gif)\n\n\u003c/details\u003e\n\n\u003chr /\u003e\n\n\u003cdetails close\u003e\n\u003csummary\u003eFilter by Region Demo\u003c/summary\u003e\n\n![Filter by region Demo](./media/filter-region.gif)\n\n\u003c/details\u003e\n\n\u003chr /\u003e\n\n\u003cdetails close\u003e\n\u003csummary\u003eTheme Switch Demo\u003c/summary\u003e\n\n![Theme Switch Demo](./media/theme-switch.gif)\n\n\u003c/details\u003e\n\n\u003chr /\u003e\n\n\u003cdetails close\u003e\n\u003csummary\u003ePagination Demo\u003c/summary\u003e\n\n![Pagination Demo](./media//pagination.gif)\n\n\u003c/details\u003e\n\n\u003chr /\u003e\n\n## Installation\n\n```bash\ngit clone git@github.com:victoriacheng15/rest-countries-api-ts.git\n```\n\n```bash\ncd rest-countries-api-ts\n```\n\n```bash\npnpm install\n# or your preference of package manager\n```\n\n```bash\npnpm dev\n```\n\n## What I learned\n\n**TypeScript**\n\n- Learned about 4 ways to assign types in TypeScript: `interface`, `type`, `enum`, and `as`.\n- Discovered that as is not a common way to assign types in TypeScript.\n- Encountered a tricky aspect of type checking for the API because the API may have several levels of nested objects.\n- Learned how to use `mapped types` to assign types to nested objects.\n- Created several TypeScript interfaces to define the structure of data used in the project.\n- Used a TypeScript context to provide and consume data across the project.\n\n**useReducer**\n\n- Learned how to use useReducer hook to bundle all state updates into one function with one hook.\n- Recognized that useReducer can be beneficial for larger state updates with multiple actions.\n\n**useMemo**\n\n- Learned how to use the useMemo hook to cache the result of a calculation between re-renders.\n- Discovered that useMemo can be used to optimize the performance of an app.\n\nAdditionally, I wrote blogs on `useReducer` and `useMemo` hooks to improve my understanding of both:\n\n- [React Hooks - useReducer](https://victoriacheng15.vercel.app/blog/react-hooks-usereducer)\n- [React Hooks - useMemo](https://victoriacheng15.vercel.app/blog/react-hooks-useMemo)\n\n### Continued development\n\nI am looking to add React Testing Library for this project to solidify my knowledge of Test-Driven Development.\n\n### Resources\n\n- [useMemo hook](https://beta.reactjs.org/apis/react/useMemo)\n- [useCallback hook](https://beta.reactjs.org/apis/react/useCallback)\n- [React TypeScript cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context)\n\n## Author\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2.svg?style=for-the-badge\u0026logo=LinkedIn\u0026logoColor=white)](https://www.linkedin.com/in/victoriacheng15/) [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white)](https://twitter.com/viktoriacheng15)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictoriacheng15%2Frest-countries-api-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictoriacheng15%2Frest-countries-api-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictoriacheng15%2Frest-countries-api-ts/lists"}