{"id":14989824,"url":"https://github.com/jch254/starter-pack","last_synced_at":"2025-07-24T19:17:00.551Z","repository":{"id":74458456,"uuid":"59483354","full_name":"jch254/starter-pack","owner":"jch254","description":"Combines React (ft. hooks), Redux, Redux-saga and TypeScript with Auth0 as a starting point for modern web apps with solid authentication","archived":false,"fork":false,"pushed_at":"2023-07-22T03:45:41.000Z","size":1773,"stargazers_count":208,"open_issues_count":3,"forks_count":20,"subscribers_count":9,"default_branch":"typescript","last_synced_at":"2025-06-16T08:11:36.206Z","etag":null,"topics":["auth0","auth0-lock","authentication","code-splitting","react","redux","redux-saga","starter-kit","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://starter-pack-typescript.603.nz","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/jch254.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":"2016-05-23T13:03:18.000Z","updated_at":"2024-06-05T04:36:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"fbc6d10f-9a61-4911-9dfc-80bdf4b347af","html_url":"https://github.com/jch254/starter-pack","commit_stats":{"total_commits":73,"total_committers":3,"mean_commits":"24.333333333333332","dds":0.0273972602739726,"last_synced_commit":"e6584443ecaed34621ef5dbffa2f1100e80f2c05"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jch254/starter-pack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Fstarter-pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Fstarter-pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Fstarter-pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Fstarter-pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jch254","download_url":"https://codeload.github.com/jch254/starter-pack/tar.gz/refs/heads/typescript","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Fstarter-pack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266890600,"owners_count":24001581,"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-24T02:00:09.469Z","response_time":99,"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":["auth0","auth0-lock","authentication","code-splitting","react","redux","redux-saga","starter-kit","typescript","webpack"],"created_at":"2024-09-24T14:18:58.664Z","updated_at":"2025-07-24T19:17:00.462Z","avatar_url":"https://github.com/jch254.png","language":"TypeScript","readme":"# [Starter Pack](https://starter-pack-typescript.603.nz)\n\n![Build Status](https://codebuild.ap-southeast-2.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiK2RUODZJTEw1YStIMDBhQmoyNGZuQmJzVi9FZFRoVGIrWWxCZVRuRlRZUlVOeFRLZzl1azA0Sm1mUEVLU3d6YWxoR2c4bHlpNHZVNnBpb09aOEVUMUdFPSIsIml2UGFyYW1ldGVyU3BlYyI6IjdKSzZqbGtVVHRDY2xjemoiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D\u0026branch=typescript)\n\n## Overview\n\nStarter Pack combines React (ft. hooks), Redux and Redux-saga with Auth0's Universal Login as a starting point \nfor modern web apps with solid authentication. Why reinvent the wheel? The app utilises Rebass to\nkeep things looking decent. I built this as a way to quickly prototype new ideas.\n\nWebpack (ft. various loaders/plugins/tools) is used to run a local development server and build\nthe production version. [Code splitting](https://webpack.js.org/guides/code-splitting)\n(with [long-term caching](https://webpack.js.org/guides/caching) in the production version) has\nbeen set up via Webpack and React. Webpack's SplitChunksPlugin is used to split vendor\ncode. [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy) is used for\nasync component-centric code splitting and loading - see [App.tsx](./src/app/App.tsx) as an\nexample of creating a split point (restart the dev server if the new chunk is not emitted).\nMiniCssExtractPlugin is used to split CSS. HtmlWebpackPlugin is used to generate an index.html\nwith the appropriate output assets injected, the Webpack manifest is inlined into index.html to save requests.\n\nThe app contains a 'locked down' Books page which requires a user to log in/sign up before content\nwill be visible. The data is read from a local JSON file as this is a only demonstration/starting\npoint. In the real world data would be fetched from an API - see [apiService.ts](./src/apiService.ts).\nProtected routes in the API should check validity of the JWT token and return unauthorised\nif invalid. The app should then prompt the user to log in again. See\n[Serverless API](https://github.com/jch254/serverless-node-dynamodb-api) for a more detailed example\nof authentication in action.\n\nThis branch utilises [TypeScript for type checking](https://www.youtube.com/watch?v=V1po0BT7kac) and\ntranspliation to browser-friendly ES5 JavaScript while the [master branch](https://github.com/jch254/starter-pack/tree/master)\nis a JavaScript implementation. ESLint (ft. plugins) is run on compilation and will fail the build\nif errors are reported. [Eslint-plugin-css-modules](https://github.com/atfzl/eslint-plugin-css-modules) provides\ntype checking of CSS modules - identifying CSS files with unused classes and components using undefined CSS classes\ne.g. `styles.doesNotExist`.\n\n![Main](https://img.jch254.com/Main.png)\n\n![Modal](https://img.jch254.com/Login.png)\n\n![Recommended](https://img.jch254.com/Books.png)\n\n## Tools Used\n\n* [React](https://github.com/facebook/react)\n* [Redux](https://github.com/reactjs/redux) (ft. various middleware)\n* [Redux Saga](https://github.com/yelouafi/redux-saga)\n* [Auth0 SDK for Single Page Applications](https://github.com/auth0/auth0-spa-js)\n* [React Router](https://github.com/ReactTraining/react-router)\n* [Reselect](https://github.com/jxnblk/rebass)\n* [Rebass](https://github.com/jxnblk/rebass)\n* [Webpack](https://github.com/webpack/webpack)\n* [TypeScript](https://github.com/Microsoft/TypeScript)\n* [ESLint](https://github.com/typescript-eslint/typescript-eslint)\n* [Node.js](https://github.com/nodejs/node)\n\n**AUTH0_CLIENT_ID and AUTH0_DOMAIN environment variable must be set before `yarn run` commands below.**\n\nE.g. `AUTH0_CLIENT_ID=YOUR_CLIENT_ID AUTH0_DOMAIN=YOUR_DOMAIN yarn run dev`\n\n## Running locally (with hot reloading)\n\n1. Sign up and create a new [Auth0 app](https://auth0.com)\n1. Add http://localhost:3001 as an Allowed Origin (CORS) for your newly created app (don't forget to press save)\n1. Run the following commands in the app's root directory then open http://localhost:3001\n\n```\nyarn install\nyarn run dev\n```\n\n## Building the production version\n1. Run the following commands in the app's root directory then check the /dist folder\n\n```\nyarn install\nyarn run build\n```\n\n## Running production version locally\n\n1. Run the following commands in the app's root directory then open http://localhost:3001\n\n```\nyarn install\nyarn run prod\n```\n\n## Running in Docker container\n1. Run the following commands in the app's root directory then submit requests to http://localhost:3001.\n\n```\ndocker build -t starter-pack .\ndocker run -p 3001:3001 -e AUTH0_CLIENT_ID=YOUR_CLIENT_ID -e AUTH0_DOMAIN=YOUR_DOMAIN starter-pack SCRIPT_NAME\n```\n\nThe SCRIPT_NAME value must be one of the npm script names in [package.json](./package.json) - e.g. dev or prod. Omitting the SCRIPT_NAME variable \nwill cause the container to exit with a 'No command specified' error and list the available commands.\n\n## Deployment/Infrastructure\n\nRefer to the [/infrastructure](./infrastructure) directory.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjch254%2Fstarter-pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjch254%2Fstarter-pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjch254%2Fstarter-pack/lists"}