{"id":15516681,"url":"https://github.com/alexvcasillas/react-spotify","last_synced_at":"2026-05-07T18:48:40.867Z","repository":{"id":82707020,"uuid":"90034268","full_name":"alexvcasillas/react-spotify","owner":"alexvcasillas","description":"Spotify Web Client built with React","archived":false,"fork":false,"pushed_at":"2017-05-03T08:03:35.000Z","size":144,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T21:28:47.748Z","etag":null,"topics":["client","mobx","react","react-router","spotify"],"latest_commit_sha":null,"homepage":"https://alexvcasillas.com","language":"JavaScript","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/alexvcasillas.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-02T13:04:30.000Z","updated_at":"2017-08-28T14:05:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"8795a6e0-cf8b-45a9-b4a3-8e327f9e7eed","html_url":"https://github.com/alexvcasillas/react-spotify","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/alexvcasillas%2Freact-spotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-spotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-spotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Freact-spotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexvcasillas","download_url":"https://codeload.github.com/alexvcasillas/react-spotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246088043,"owners_count":20721617,"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":["client","mobx","react","react-router","spotify"],"created_at":"2024-10-02T10:09:28.733Z","updated_at":"2026-05-07T18:48:35.830Z","avatar_url":"https://github.com/alexvcasillas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mobx-router\n\n![3RMXi Logotype](https://raw.githubusercontent.com/alexvcasillas/react-mobx-router/master/3RMXi.jpg)\n\n### React Create App with React Router and MobX and Internationalization\n\nAKA: **3RMXi** (for the sake of brevity!)\n\n❕❕ **New:** Now supports Internationalization!\n\n❕❕ **New:** i18n now supports nested language resource objects for a better structuring!\n\nThis project is a personal boilerplate as a quickstart for development with [react-create-app](https://github.com/facebookincubator/create-react-app) + [react-router](https://github.com/ReactTraining/react-router) and [MobX](https://github.com/mobxjs/mobx) to maintain the state of the App.\n\nThis boilerplate implements [custom-react-scripts](https://github.com/kitze/custom-react-scripts) to be able to implement @decorators and CSS Modules for Sass/Less/Stylus implementations.\n\nI'm not interested in creating an opinionated boilerplate with strict rules about how to do stuff. The beauty of Javascript is that, you can do it as you want, the way you feel more confortable with so, **you should** modify the project structure as you want while it's easier for you to work with, also changing any other aspect of the execution.\n\n### Getting Started\n\nTo get started using this boilerplate you only need to follow a few steps. First of all\nyou should run `yarn` on your favorite terminal to initialize Yarn and install all the required\ndependencies.\n\nIf you want to start developing your project you should run `yarn start`, this will generate\na development build (without optimizing the code for easy debug and all that stuff) based on a webpack dev-server\nwith hot-reload and all those cool development features that we, programmers, love.\n\nIf you want a production build of your project you should run `yarn build`, this will create a build folder in the root\ndirectory of the project and bundle your `src` folder and optimize all the code to get the best possible performance. This build will be minified and the filenames will include the hashes.\n\nYour app will be ready to be deployed!!\n\nPS: This development and build process is exactly the same as you will do with [react-create-app](https://github.com/facebookincubator/create-react-app).\n\n### Internationalization\n\nI've created an `Language` component just for you to handle internationalization (i18n) the easiest way ever possible.\n\nBut it's not all sorcery and auto-magic stuff. You need a little configuration, but don't worry, it's painless (I think...).\n\nFirst of all you should see a `stores` folder in the root of your project. This folder is where all the Stores for MobX \"should be\"\ncreated. If you take a closer look at the files inside, you should see a `language.js` file, well, this is the file that handles all the\n_Language State_ stuff like: current language, change language, and a few more easy configurations.\n\n**Note:** This will be improved in a future (sooner than expected) release to handle automatically all your language resource files\nbut, meanwhile, you will need to do this little thing manually.\n\nThe first thing you will see at this file will be the following lines:\n\n```\nimport esES from '../language/i18n/es';\nimport enUS from '../language/i18n/en';\n```\n\nWell, technically will be this:\n\n```\nimport { observable, computed, action, reaction } from 'mobx';\n\nimport esES from '../language/i18n/es';\nimport enUS from '../language/i18n/en';\n```\n\nBut we will skip the first line for the sake of brevity because it's just MobX imports 😀\n\nNow let's take a look where this things come from. This language files will contain a single javascript object with\na `key/value` structure so we can easily access the _language resource_ that we need.\n\nLet's look at an example:\n\n```\n// ENGLISH LANGUAGE RESOURCES\nconst RESOURCES = {\n  CHANGE_SPANISH: 'Change to Spanish',\n  CHANGE_ENGLISH: 'Change to English',\n  USER_TITLE: 'User',\n  XP_TITLE: 'Experience',\n  AGE_TITLE: 'Age',\n  APP_DESCRIPTION: 'React Create App with React Router and MobX and Internationalization.',\n  ACTIONS: {\n    INCREASE_XP: 'Increase Experience Points!',\n    CHANGE_NAME: 'Change My Name!',\n    CHANGE_LASTNAME: 'Change My Last Name!'\n  }\n};\n\nexport default RESOURCES;\n\n```\n\nAs you can see, we've defined for example a `CHANGE_SPANISH` key with a value of `'Change to Spanish'`.\n\nAt the very last line of the file, we export this object to access it from the `Language Store`.\n\nNote that this **Keys** should be exactly the same in each of the language folders you create. If the key resource is not found\nnothing will be shown (I don't want to throw exceptions and all that stuff that breaks and stops the app). If you want it, you can create a function that process the required key resource to see if it exists or it's not empty and the `Language` component.\n\nNow, to change the current App Language you only need to call (previously injected language store at the desired component) `this.props.language.changeLanguageTo('es')` from anywhere inside that component (an onClick={} method for example) and if it's a valid key the one you passed to the method it will automatically change the language, the resources and re-render the `\u003cLanguage resource=\"CHANGE_SPANISH\" /\u003e` with the new `CHANGE_SPANISH` value, in this case, will replace _'Change to Spanish'_  with _'Cambiar a Español'_. It's not that hard, see?\n\nYou can also see that you have the possibility to use **nested language resource objects** for a more structured language organization. To have access to this **nested language resource objects** you only need to call the language component with the following structure `\u003cLanguage resource=\"ACTIONS.INCREASE_XP\" /\u003e` for example and will render the given resource string into the component. Piece of cake!\n\n**Note:** You should look at the `\u003cLanguage /\u003e` react component located at `src/components/language` to see that it's not a big deal, it just injects the `LanguageStore` and being an `@observer` so it will re-render when an `@observable` property (in this case, `language.resource[resource]`) has changed.\n\n**Pending Internationalization Tasks:**\n\n✅ Expose the current language value to check it at any point/state of the App.\n\n⬜ Automatize the language resources fetch.\n\n---\n\nHope you find this useful.\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Freact-spotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexvcasillas%2Freact-spotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Freact-spotify/lists"}