{"id":22994365,"url":"https://github.com/donadam2/react-configurable-app","last_synced_at":"2025-08-13T22:31:41.604Z","repository":{"id":125808497,"uuid":"448902984","full_name":"DonAdam2/react-configurable-app","owner":"DonAdam2","description":"Create a configurable React app","archived":false,"fork":false,"pushed_at":"2024-07-09T13:52:13.000Z","size":2498,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-07-09T16:51:50.932Z","etag":null,"topics":["api","custom-hooks","react","redux"],"latest_commit_sha":null,"homepage":"","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/DonAdam2.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}},"created_at":"2022-01-17T13:23:09.000Z","updated_at":"2024-07-09T13:52:17.000Z","dependencies_parsed_at":"2024-03-17T13:38:39.573Z","dependency_job_id":null,"html_url":"https://github.com/DonAdam2/react-configurable-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"DonAdam2/webpack-react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-configurable-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-configurable-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-configurable-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-configurable-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/react-configurable-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229783794,"owners_count":18123557,"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","custom-hooks","react","redux"],"created_at":"2024-12-15T05:17:58.458Z","updated_at":"2024-12-15T05:17:59.097Z","avatar_url":"https://github.com/DonAdam2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### This app shows you how to create a configurable React app (controlled through an object from an API)\n\n- You will be able to control the following:\n  - Theme (background color, success color, danger color, text color and typography)\n  - Views (components to show on each page)\n\n## Prerequisites:\n\n- nodeJS \u003e 14.X.X or Docker\n\n## Installing / Getting Started:\n\n### Development (locally):\n\n- Clone repo =\u003e `git clone git@github.com:react-custom-projects/webpack-react-boilerplate.git`\n- `cd webpack-react-boilerplate`\n- Install dependencies =\u003e `yarn install`\n- Start the development server =\u003e `yarn start`\n\n### Development (using Docker):\n\n- Clone repo =\u003e `git clone git@github.com:react-custom-projects/webpack-react-boilerplate.git`\n- `cd webpack-react-boilerplate`\n- Install dependencies (required for prettier) =\u003e `yarn install`\n- Start the development server =\u003e `docker-compose up --build`\n\n## Configuring Prettier\n\nThis build relies on [Prettier formatter](https://prettier.io/) to enforce a code style. And [ESLint](https://eslint.org/) for identifying problematic patterns found in JavaScript code.\n\n- Setting up prettier:\n\n  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm [here](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher).\n\n  Notes:\n\n  - It's better to use the local `node_modules` version of prettier instead of a global one. This is to avoid version conflicts (in case the globally installed version does not match with the versions specified in `package.json`). So when setting up the file watcher when you follow the steps from the above link you can set `program` to `$ProjectFileDir$\\node_modules\\.bin\\prettier` (warning this assumes that node_modules sits in the root of your project. This will need to change if your directory structure changes).\n  - You will have to create two file watchers. One for JSX files and one for JS files. The webpack build tools are already configured to work with `eslint` and `prettier`. The only thing needed is the two file watchers.\n\n  2- Follow the next steps to set up **prettier** and **eslint** on **_VS Code_**:\n\n  - Install `prettier` plugin\n\n  - Install `eslint` plugin\n\n  - Open **_VS Code settings_** `CTRL + ,`:\n\n    a- Search for `formatter` =\u003e check **Format on save**\n\n    b- Search for `prettier` =\u003e add `.prettierrc` in **_Prettier: Config Path_** section \u0026\u0026 check **_Prettier: Require Config_**\n\n  3- Please refer to other tutorials if you are using a different IDE.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e\nIt will open [http://localhost:3000](http://localhost:3000) automatically in the browser to see your app.\n\nAll changes will be injected automatically without reloading the page.\u003cbr\u003e\n\nYou will see in the console the following:\n\n- All redux store related changes\n- Any of the following errors:\n  1. Linting errors.\n  2. Code format errors (because of [prettier](https://prettier.io/))\n\n### `yarn build`\n\nBuilds the app for production to the `dist` 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\n### `yarn build:serve`\n\nServes the app on `http://localhost:8080/` from the `dist` folder to check the production version.\n\n**_Note:_** Use this script only if you ran the build script `yarn build`.\n\n### `yarn analyze-bundle`\n\nIt allows you to analyze the bundle size.\n\n### `yarn test:all`\n\nIt runs all test files.\n\n### `yarn test:watch`\n\n- It runs all unit test files in `/src` directory using watch mode.\n- Will run all your tests once then again on every change of your source code\n\n### `yarn test:coverage`\n\nIt runs test coverage.\n\n### `yarn test:clear`\n\nClears test cache.\n\n### `yarn generate` **_component_** || **_container_** || **_page_** || **_hook_** || **_service_** || **_reducer_**\n\n- It creates a boilerplate for component, container, page, custom hook, service or reducer.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-configurable-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Freact-configurable-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-configurable-app/lists"}