{"id":13989671,"url":"https://github.com/simpletut/React-Starter-Kit","last_synced_at":"2025-07-22T11:31:05.273Z","repository":{"id":122182955,"uuid":"135571245","full_name":"simpletut/React-Starter-Kit","owner":"simpletut","description":"Open Source Universal React Redux GraphQL Boilerplate","archived":false,"fork":false,"pushed_at":"2018-06-18T14:10:35.000Z","size":261,"stargazers_count":217,"open_issues_count":1,"forks_count":63,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-29T08:39:25.214Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.react-starter-kit.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/simpletut.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}},"created_at":"2018-05-31T10:50:34.000Z","updated_at":"2024-02-10T18:29:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"afcada48-52b6-4976-b449-11f6be534f5f","html_url":"https://github.com/simpletut/React-Starter-Kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/simpletut/React-Starter-Kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FReact-Starter-Kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FReact-Starter-Kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FReact-Starter-Kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FReact-Starter-Kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simpletut","download_url":"https://codeload.github.com/simpletut/React-Starter-Kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FReact-Starter-Kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266483540,"owners_count":23936364,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":[],"created_at":"2024-08-09T13:01:56.324Z","updated_at":"2025-07-22T11:31:04.874Z","avatar_url":"https://github.com/simpletut.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# REACT STARTER KIT\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"http://git-assets.react-starter-kit.com/logo.png\"\u003e  \n\u003c/p\u003e\n\nOpen Source Universal React Redux GraphQL Boilerplate\n\n[Online Demo](https://react-starter-kit-demo.herokuapp.com)\n\n# Getting Started\n\nThis repository contains the source code for React-Starter-Kit. This documentation will cover the installation on your machine, project architecture, unit testing and working with the app in general.\n\nThis is a Universal React Redux GraphQL Node app.\n\n## YouTube Video Tutorials\n\n##### Introduction (Getting started)\n\n\u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=g2QWG9sAQqs\" target=\"_blank\"\u003e\n\t\u003cimg src=\"http://img.youtube.com/vi/g2QWG9sAQqs/0.jpg\" width=\"240\" height=\"180\" /\u003e\n\u003c/a\u003e\n\n\n##### Project architecture\n\n\u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=DfxmoBgPymI \" target=\"_blank\"\u003e\n\t\u003cimg src=\"http://img.youtube.com/vi/DfxmoBgPymI/0.jpg\" width=\"240\" height=\"180\" /\u003e\n\u003c/a\u003e\n\n## Preview\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"http://git-assets.react-starter-kit.com/preview.png\" style=\"max-width: 400px;\"\u003e  \n\u003c/p\u003e\n\n## Software \n\nBefore proceeding, please ensure you have the following software installed on your computer.\n\n* Node\n* Yarn (optional but recommended)\n* Git command line tools\n\n### Useful links\n\n* Download Git CLT - Windows: https://git-scm.com/download/windows Mac: https://git-scm.com/download/mac\n* Download Node - https://nodejs.org/en/\n* Download Yarn CLT - https://yarnpkg.com/lang/en/docs/install/\n* Download VSCode - https://code.visualstudio.com/\n\n\n## Installation\n\nPlease fork a copy of this repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Alternatively download or clone the master branch.\n\n1. Clone the repo to your machine \n\n```\n  git clone \u003cCloneURL\u003e\n```\n\n2. Within terminal or cmd ensure you have changed directory (into the new folder that has been cloned) and install the dependencies\n\n```\n  cd \u003cnew-dir\u003e \n  yarn install OR npm install\n```\n\n3. Before we can build, run or deploy our app it is important to ensure that the 'webConfig.json' is configured for our environment. Please change 'siteURL' to point to either your local or live url.\n\n```\n    {\n    \"siteURL\": \"http://localhost:3000\", ...\n\n    OR\n\n    {\n    \"siteURL\": \"http://mydomain.com\", ... \n```\n\n5. You must build the app before you can run it\n\n```\n  yarn run build OR npm run build\n```\n\n6. Run your build\n\n```\n  yarn run dev OR npm run dev\n```\n\nThis should launch the application and start running on: http://localhost:3000/\n\n\n## Notes\n\nFor specific versions of dependencies being used please reference the 'package.json' file within the main project directory.\n\n\n## Project architecture\n\nWithin the main project directory 'src' (source) folder, you will find the following folders:\n\n1. 'assets'\n\nThis folder contains important files that are referenced throughout the app.\n\n2. 'client'\n\nThis folder contains our source code. \n\n## A closer look\n\nPlease read the information below before making any changes to this project. You can reference this to gain an understanding of our design patterns, and help you find/write new code.\n\n### Inside the 'src' folder\n\n1. 'actions'\n\nAny actions we create should be exported from this file. (incl async)\n\n2. common\n\nThis folder contains code that is shared. For example form inupt types or form validation.\n\n3. components\n\nThis folder contains components which are not connected to the store. For example, you can find the header \u0026 footer components here.\n\n4. endpoints\n\nWe are using the axios library to handle our requests both on the server \u0026 client.\n\nI have created an axios instance with a 'baseURL' for our main API. This means when making a call we only need to supply the route and body of our request.\n\nPlease see the example:\n\n```\n  api.post(landingPageAPI, body).then(response =\u003e { ...\n``` \n\nPlease note: The 'baseURL' is defined within the 'webConfig' file. If you need to make a request to a completely different api, use axios without our instance.\n\n5. Layouts\n\nWe use layout components to render our routes. Upon configuration, we can define a unique layout component for any route. This can be useful for landing pages or pages that require unique functionality.\n\nPlease note that our routes will be rendered wherever we place the following code:\n\n```\n  {renderRoutes(this.props.route.routes)}\n```\n\n6. Pages\n\nThis folder is self-explanatory.\n\nPlease maintain the proper naming conventions. For example, 'namePage'.\n\n## Important\n\nWhilst most of our code is standard, please note the special 'loadData' function that is exported.\n\nAs you know, this is a universal application, which means that we need to configure our pages to run on both the server and client.\n\nThe 'loadData' function is used to tell the server what calls need to be complete before throwing down the initial html to the browser.\n\n7. Reducers\n\nThis folder is self-explanatory.\n\nPlease maintain the proper naming conventions. For example, 'nameReducer'. \n\nBefore we create a store, we combine our reducers. Please ensure any new reducers are imported into the main 'index' file within the directory and added to the combine reducers method/object.\n\n8. FILE: app.js\n\nYou can imagine this as the default layout of our application.\n\n9. FILE: routes.js\n\nThis file is self-explanatory.\n\nAlthough we are using 'React Router 4' as this is a universal app, I am using the static router.\n\nThis is because we need to handle two types of routing as it needs to run on both the client and the server.\n\nMore information can be found: \n\nhttps://github.com/ReactTraining/react-router/tree/master/packages/react-router-config\n\n\n## Deployment\n\nTo deploy the app, simply follow the steps:\n\n1. install dependencies\n\n2. run a build\n\n3. start the app via the following command - 'node build/bundle.js' \n\n\n# General info\n\n## Send emails:\n\nWe are using 'nodemailer' to handle the process of sending emails.\n\nWe have already intergrated into the project. See 'src/client/pages/contactPage.js' and the '/sendmail' route within our server file.\n\nFor more information, please reference: https://github.com/nodemailer/nodemailer\n\n## Fonts:\n\nThroughout the project we reference a single font family 'gt_walsheim', but have multiple font weights.\n\nWe have the following weights included within the project:\n\nUltra Thin: 100\nThin: 200\nLight: 300\nRegular: 400\nMedium: 500\nBold: 700\nUltra Bold: 900\n\nPlease reference 'src/assets/fonts/fonts.css' for more.\n\n## Reference a background image within css\n\nPlease ensure you copy all your images into the graphics folder. Whenever you compile the scss, webpack will prefix your path with the root domain defined within the 'webConfig' file.\n\nTo reference an image within css, please use the example below:\n\n```\nbackground-image: url('/assets/graphics/[name].[ext]'); \n```\n\n## Reference a image within HTML/components\n\nThere are a number of different methods that can be used to include graphics within our components. However once you begin using more complex routes, you might find some paths breaking.\n\nThe solution is to use absolute paths. This means that we prefix with the enviroment url. Please reference the example below:\n\n```\n   \u003cimg src={`${webConfig.siteURL}/assets/graphics/logo.png`} /\u003e\n```\n\nPlease note: ensure you have imported 'webConfig' before using it.\n\n## Carousels\n\nYou may wish to implement a carousel within the website. \n\nWhilst this is slightly more complex because this is a universal app, please reference the link below.\n\nThis app uses 'react-slick'. The relevant dependencies and css have already been included within the project.\n\nURL: https://www.npmjs.com/package/react-slick-ssr\n\n## Forms:\n\nWe are using 'Redux-form' throughout our application. This has made it simple to apply proper validation (inclu async), two-way data binding (initialize from store), and write cleaner, more reusable code (pre-defined input types \u0026 validation etc..).\n\n- input-type\n\nWe are currently exporting constants for the following field types:\n\n- Textfield\n- Textarea\n\nPlease ensure you export new constants from this file if you require any new field types. It is important to be aware that the styles for these inputs can be found within 'src/assets/scss/base/_forms.scss' and that each have multiple variations in terms of both functionality and design determined by the presence of additional classes. \n\nBe careful when manipulating the mark-up of these constants, as these field types are used throughout the application. \n\nThese input types can be utilized by passing the relevant const through as a prop to each 'Field' element as a 'component' within 'Redux-form'.\n\n## Styles\n\nWe are using SCSS (CSS pre-processor/bracketed version of SASS) to enable us to write cleaner and more reusable css code.\n\nOur main 'styles.scss' is compiled upon each save, once the project has been started from your terminal/cmd. Whilst the resulting 'styles.css' is the only 'css' called from within the project, the 'scss' version simply contains imports to the partial files created within folders.\n\n## CSS Rules\n\nIn order to ensure the integrity of the project and long-term maintainability, please conform the following rules:\n\n- Media queries should be written/maintained within the relevant 'partial' file.\n- REM CSS measurement units:\n\nWe are using rem's to style our app. Whilst you should not use any other measurement unit, it is correct to use ‘px’ for certain properties. For example, you should still use 'px' for setting a border or the width of a media query to ensure more accurate break points.\n\nThe root font size is set to '10px'. This means the calculation required to implement rem’s is simple: (target font size / 10 OR 18 / 10 = 1.8rem).\n\n- 'config.js' \n\nPlease utilize our configuration partial file wherever possible. This contains global variables for generic/brand colours, keyframes, mixins and more! For consistency please reference these instead of redefining where possible (or add to this file).\n\n\n## 12 Col Grid Boiler template\n \nWe are using a 12 Column Grid that works as follows:\n \nThe grid has 12 columns\n \nEach columns width is a % value that can be calculated using the following:\n\n```\nTarget Columns (Example '6')\nMinus Number of Total Columns (12)\nTimes 100 = 50%\n```\n\nExample HTML mark-up for a 2-column layout:\n\n```\n\u003cdiv class=\"grid\"\u003e\n \n  \u003cdiv class=\"column column_6_12\"\u003e\n    Half\n  \u003c/div\u003e\n  \n  \u003cdiv class=\"column column_6_12\"\u003e\n    Half\n  \u003c/div\u003e\n \n\u003cdiv\u003e\n```\n \nEach column has a ‘20px’ gutter/ Each column has 10px padding on either side.\n\nThe grid should not be used within areas that require custom mark-up (such as your header/footer) to avoid having to override default styling. This will ensure the integrity of the code. Please DO NOT apply any styling to the grid directly. These should be global classes which are not overridden (ensures you will not break styling in other places).\n\nTo centre your content, simply apply a 'max-width' to the parent wrapper '.grid'. You can either set this globally within the '_responsive-grid' partial file or target it specifically via a custom parent class.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpletut%2FReact-Starter-Kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimpletut%2FReact-Starter-Kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpletut%2FReact-Starter-Kit/lists"}