{"id":15785097,"url":"https://github.com/frontendwizard/usabilla-frontend-challenge","last_synced_at":"2026-05-09T07:06:29.821Z","repository":{"id":119586482,"uuid":"162053637","full_name":"frontendwizard/usabilla-frontend-challenge","owner":"frontendwizard","description":"Usabilla Frontend Developer Challenge","archived":false,"fork":false,"pushed_at":"2018-12-17T20:40:26.000Z","size":1054,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T00:34:59.420Z","etag":null,"topics":["hooks","prettier","react","react-testing-library","styled-components","styled-system"],"latest_commit_sha":null,"homepage":"https://frontendwizard-usabilla.now.sh","language":"JavaScript","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/frontendwizard.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":"2018-12-17T00:23:00.000Z","updated_at":"2018-12-17T20:40:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"371418c1-51fa-4cda-a37c-d32f51ae3335","html_url":"https://github.com/frontendwizard/usabilla-frontend-challenge","commit_stats":{"total_commits":74,"total_committers":1,"mean_commits":74.0,"dds":0.0,"last_synced_commit":"0cc195b98ea1d1371c5f4f15567c6c33770c11d6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/frontendwizard/usabilla-frontend-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendwizard%2Fusabilla-frontend-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendwizard%2Fusabilla-frontend-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendwizard%2Fusabilla-frontend-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendwizard%2Fusabilla-frontend-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontendwizard","download_url":"https://codeload.github.com/frontendwizard/usabilla-frontend-challenge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendwizard%2Fusabilla-frontend-challenge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32810388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["hooks","prettier","react","react-testing-library","styled-components","styled-system"],"created_at":"2024-10-04T20:20:59.227Z","updated_at":"2026-05-09T07:06:29.795Z","avatar_url":"https://github.com/frontendwizard.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Usabilla Front Developer Challenge\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Build Status](https://travis-ci.com/thefrontendwizard/usabilla-frontend-challenge.svg?branch=master)](https://travis-ci.com/thefrontendwizard/usabilla-frontend-challenge)\n[![codecov](https://codecov.io/gh/thefrontendwizard/usabilla-frontend-challenge/branch/master/graph/badge.svg?token=AxV2s66wK7)](https://codecov.io/gh/thefrontendwizard/usabilla-frontend-challenge)\n\nHi there. I'm Juliano Rafael and this is my solution the Usabilla Front End Developer Challenge. This was a weekend of non stop coding and fun. :D\n\nBefore you go into the code itself, I'd like to add some notes on choices I've made and why.\n\n### Stylabilla\n\nTo start with I faced the choice of either importing the whole stylabilla and using its classes or to take parts of it, create a few components and a theme. In my humble opinion, the latter suits React applications better, so that's what I went for. I felt like importing the whole stylesheet would be unnecessary. But, as an advocate of CSS-in-JS, I'm biased.\n\n### Prettier + ESLint\n\nEveryone got it's preferences over code styling. It's an endless discussion and in the end, it's a matter of preferences. Prettier solves this by being the annoying person who has the last word. This way, no one gets resentfull or hurt by its choices and everyone saves time by not arguing over with semis or without. Let Prettier be the guy who corrects spacing and style issues. Better yet, it abstracts away the most of configuration, so no one can sneak in that commit that disables the rule.\n\nPrettier solves the styling, but there's more to linting than styling, and that's where eslint comes in. Long story short, prettier does styling, eslint does the rest. I choose to extend the `standard` (because I tend to favor [standardjs](https://standardjs.com)) and react/recommended and prettier config (to disable the rules that prettier already handles).\n\n### Hooks\n\nSince this isn't going to production and hooks are just awesome, I figure this was a really nice change to explore what's this new api is about. Personally, I think it's awesome. It makes your component code way more organized and clean. State management and side effects go into hooks, UI goes into leaf components. It naturally leads to a more readable and easily testable codebase.\n\n### styled-system\n\nI love CSS-in-JS. I wrote a bit about this [here](https://blog.getty.io/developing-apps-with-styled-components-e9f56cd0f4c5). But this is not a silver bullet and it certainly does not solve all the issues with CSS scalability in the world. Because Usabilla already have a clear ~~and awesome~~ styleguide, I choose to use `styled-system` (~~and stole a bit css from stylabilla~~) to create a global theme make it waaay easier to build the UI. I dare say `styled-system` makes doing a style system with React almost natural. It's awesome.\n\n### List performance\n\nIf you tested the table, you're going to see that it's slow when it has to process all the 100 items. I memoized all the items to avoid unecessary rerenders, but that's still not perfect. Decoupling the list filtering from the search input or rating filter feedback and debouncing it will certainly improve the perceived performance. This could be achieved beautifully with redux-saga, but I think that's a bit too much for this challenge.\n\n### Elements and Components\n\nThere two types of components created here: elements and components. I called elements components that are primitives with a bit of usefull props to build upon it. I put into components the ones that were intended for final use and UI component.\n\n### react-testing-library\n\nLast but not least, I choose `react-testing-library` to test my components. I have a couple of reasons for that but the major reason is that this library allows me to test my components as they are actually rendered in the browser.\n\n\u003e [The more your tests resemble the way your software is used, the more confidence they can give you.](https://twitter.com/kentcdodds/status/977018512689455106)\n\nKent does a way better job at selling this lib than I do, so check [this](https://github.com/kentcdodds/react-testing-library#this-solution) out if you want to know more about it.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendwizard%2Fusabilla-frontend-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontendwizard%2Fusabilla-frontend-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendwizard%2Fusabilla-frontend-challenge/lists"}