{"id":20208010,"url":"https://github.com/gkampitakis/small-react-projects","last_synced_at":"2025-03-03T10:15:36.517Z","repository":{"id":46184511,"uuid":"308960444","full_name":"gkampitakis/small-react-projects","owner":"gkampitakis","description":"Small React Projects practising my react and testing skills","archived":false,"fork":false,"pushed_at":"2022-01-24T18:09:53.000Z","size":21410,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T21:09:46.939Z","etag":null,"topics":["front-end","learning-by-doing","react","testing-library-react"],"latest_commit_sha":null,"homepage":"https://gkampitakis.github.io/small-react-projects","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gkampitakis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-31T19:50:24.000Z","updated_at":"2025-01-13T15:13:16.000Z","dependencies_parsed_at":"2022-09-25T05:30:20.723Z","dependency_job_id":null,"html_url":"https://github.com/gkampitakis/small-react-projects","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkampitakis%2Fsmall-react-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkampitakis%2Fsmall-react-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkampitakis%2Fsmall-react-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkampitakis%2Fsmall-react-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gkampitakis","download_url":"https://codeload.github.com/gkampitakis/small-react-projects/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241644554,"owners_count":19996179,"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":["front-end","learning-by-doing","react","testing-library-react"],"created_at":"2024-11-14T05:33:44.704Z","updated_at":"2025-03-03T10:15:36.489Z","avatar_url":"https://github.com/gkampitakis.png","language":"TypeScript","readme":"# Small React Projects\n\n[![Website gkampitakis.github.io/small-react-projects](https://img.shields.io/website-up-down-green-red/https/gkampitakis.github.io/small-react-projects.svg)](https://gkampitakis.github.io/small-react-projects/)\n[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/)\n\nThis is a repository for learning and practising concepts in React such as `Hooks` and `Testing`.\n\nIt follows this [React Course](https://www.youtube.com/watch?v=a_7Z7C_JCyo) and extends functionality in some projects.\n\nYou can [visit](https://gkampitakis.github.io/small-react-projects) and see the result of this repo.\n\n## Usage\n\nInstall dependencies: `npm run install`\n\nRun tests: `npm run test`\n\nRun it locally: `npm run start`\n\n## Contents\n\n-   You can find projects under `/projects` folder.\n-   You can find tests under `*.spec.ts` files.\n-   Some commonly used hooks are under `/src/hooks`.\n\n## Resources\n\nWhile working on this I used:\n\n### Learning \u0026 Articles\n\n-   [React Course](https://www.youtube.com/watch?v=a_7Z7C_JCyo) for project ideas.\n-   [Testing Library](https://testing-library.com/) for running tests and\n    [Kent C. Dodds'](https://kentcdodds.com/blog/) blog for testing best practices and tips.\n-   [Progressively Loading Images](https://codeburst.io/how-to-progressively-load-images-in-react-using-hooks-80c50fd447cd) and [React Blurhash](https://github.com/woltapp/react-blurhash) used in [Photo Album](https://gkampitakis.github.io/small-react-projects/photo-album).\n-   Implementations of useful react hooks https://usehooks.com/ and typescript https://usehooks-typescript.com/.\n-   Dark Theme in React by Kent C. Dodds, [css-variables](https://epicreact.dev/css-variables/).\n-   [Embracing modern image formats](https://www.joshwcomeau.com/performance/embracing-modern-image-formats/) Optimizing images.\n\n### Material\n\n-   [Undraw](https://undraw.co/illustrations) for images and illustrations.\n-   [Unsplash](https://unsplash.com/) The internet’s source of freely-usable images.\n\n\n### Notes: \n\n- Project Cocktails\n\n  On this project a context is used in order to inject data between components and share functions. Also there are some nested routes for navigating to `/cocktails/details` and `/cocktails/about`. One issue that was noticed is that the context gets re-rendered on every navigation. Not sure if this intended or can be resolved, the only solution I found is moving the context provider wrapping outside of the Router. ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkampitakis%2Fsmall-react-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgkampitakis%2Fsmall-react-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkampitakis%2Fsmall-react-projects/lists"}