{"id":17223982,"url":"https://github.com/bradbyte/react-tunes","last_synced_at":"2025-03-25T16:25:09.003Z","repository":{"id":166036396,"uuid":"42605979","full_name":"bradbyte/react-tunes","owner":"bradbyte","description":"Simple React app to test developer's competencies ","archived":false,"fork":false,"pushed_at":"2015-09-17T19:33:30.000Z","size":1237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-30T14:35:05.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/bradbyte.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":"2015-09-16T18:32:31.000Z","updated_at":"2015-09-16T20:19:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"a2bbd739-ac81-4b8b-9bea-afb2d218c2a2","html_url":"https://github.com/bradbyte/react-tunes","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/bradbyte%2Freact-tunes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradbyte%2Freact-tunes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradbyte%2Freact-tunes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradbyte%2Freact-tunes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradbyte","download_url":"https://codeload.github.com/bradbyte/react-tunes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245498075,"owners_count":20625115,"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":[],"created_at":"2024-10-15T04:09:44.535Z","updated_at":"2025-03-25T16:25:08.992Z","avatar_url":"https://github.com/bradbyte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tunes\nA simple React app to test competencies. Utilizes the Spotify API to display an artist and albums matching the search input.\n\n\u003e React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.\n\n## Objectives\nThe goal is to turn this basic, non-optomized app into a React efficient and functional app. Currently, it is just a jQuery app that utilizes DOM manipulation to render the UI. React does all of this out of the box when handled correctly.\n\n1. **Restructure into components**.\n  Anything that is repeated, or outside of the context of the current component (logical serparation) should be it's own component (i.e. generating UI from strings like ` html = \"\u003cdiv\u003e...\u003c/div\u003e\"` is **bad**).\n2. **Implement state/props**.\n  Data sould flow down from the parent components to the children. Props are immutatble and should be tired to a parent's mutable state.\n3. **Fetch Data**.\n  API callouts should directly feed component state.\n4. **(Bonus)** Implement Bootstrap for styling (not just the css, but think through using the right Bootstrap components for the best UX).\n\n## Running\n\nWhile you are only building a client side app, we are using nodejs to run the server. If you do not have node installed, [download the latest version here](https://nodejs.org/en/). Once you have installed node, it would be wise to install npm as well. Simply run `sudo npm install npm -g` (remove `sudu` from windows). You can also use homebrew to install node if you're using a mac. Ensure you run `brew update` first.\n\nClone the repo to your local system. Navigate to the folder in your terminal or command prompt. Run `npm start` to fire up the node server on localhost. Then, go to `http://localhost:3000/` to access the app.\n\n## Links\n\n- [React Docs](https://facebook.github.io/react/docs/getting-started.html)\n- [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)\n- [Spotify API](https://developer.spotify.com/web-api/search-item/)\n- [Bootstrap](http://getbootstrap.com/components/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradbyte%2Freact-tunes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradbyte%2Freact-tunes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradbyte%2Freact-tunes/lists"}