├── .env.development ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── feature_request.yml └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── config ├── copyFiles.js ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js ├── package-lock.json ├── package.json ├── public ├── index.html ├── robots.txt └── web.config └── src ├── App.css ├── App.js ├── App.test.js ├── Routes.js ├── assets ├── NotFound │ ├── 404.svg │ ├── astronaut.svg │ ├── earth.svg │ ├── moon.svg │ ├── overlay_stars.svg │ └── rocket.svg ├── logo.svg └── root │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── components ├── withMediaQuery │ └── index.js └── withRouter │ └── index.js ├── constants └── routes.json ├── containers ├── About.js ├── Contact.js ├── Home.js └── pageNotFound │ ├── index.js │ └── styles.css ├── index.css ├── index.js ├── manifest.json ├── reportWebVitals.js ├── service-worker.js ├── serviceWorkerReg.js ├── serviceWorkerRegistration.js ├── services └── Client.js ├── setupTests.js ├── splash-screen.html ├── src-sw.js └── store ├── aboutSlice.js ├── homeSlice.js ├── index.js └── reducers.js /.env.development: -------------------------------------------------------------------------------- 1 | REACT_APP_ENDPOINT_URL='' -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": ["eslint:recommended", "plugin:react/recommended", "airbnb", "prettier"], 8 | "settings": { 9 | "react": { 10 | "version": "detect" 11 | } 12 | }, 13 | "parserOptions": { 14 | "ecmaFeatures": { 15 | "jsx": true 16 | }, 17 | "ecmaVersion": "latest", 18 | "sourceType": "module" 19 | }, 20 | "plugins": [ 21 | "react", 22 | "prettier" //always keep prettier at last so it can override anything coming before it 23 | ], 24 | "rules": { 25 | "react/react-in-jsx-scope": "off", 26 | "import/prefer-default-export": "warn", 27 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 28 | "react/jsx-props-no-spreading": ["warn"], 29 | "spaced-comment": [2, "always"], 30 | "react/function-component-definition": [ 31 | "error", 32 | { 33 | "namedComponents": ["function-declaration", "arrow-function"], 34 | "unnamedComponents": "arrow-function" 35 | } 36 | ], 37 | "no-undef": 0, 38 | "react/destructuring-assignment": "off", 39 | "no-unsafe-optional-chaining": "warn", 40 | "no-undefined": 0, 41 | "comma-dangle": [2, "never"], 42 | "quotes": [1, "single"], 43 | "semi": "off", 44 | "semi-style": ["error", "last"], 45 | "guard-for-in": 2, 46 | "no-eval": 2, 47 | "no-with": 2, 48 | "valid-typeof": 2, 49 | "no-continue": 1, 50 | "no-extra-semi": 1, 51 | "no-unreachable": 1, 52 | "no-unused-expressions": 1, 53 | "no-magic-numbers": 0, 54 | "react/prop-types": 0, 55 | "max-len": [1, 250, 4], 56 | "react/prefer-es6-class": 1, 57 | "import/no-cycle": "off", 58 | "no-plusplus": "off", 59 | "arrow-body-style": ["off", "as-needed"], 60 | "prefer-destructuring": "off", 61 | "jsx-a11y/no-autofocus": "off", 62 | "dot-notation": "off", 63 | "no-useless-escape": "off", 64 | "no-param-reassign": "off", 65 | "no-unused-vars": 2, 66 | "no-underscore-dangle": "off", 67 | "no-nested-ternary": "off", 68 | "no-lonely-if": "off", 69 | "no-return-await": "off", 70 | "react/no-did-update-set-state": "off", 71 | // first argument: 0 - silent, 1 - warning, 2 - error 72 | "strict": [2, "safe"], 73 | "no-debugger": 2, 74 | "brace-style": [ 75 | 2, 76 | "1tbs", 77 | { 78 | "allowSingleLine": true 79 | } 80 | ], 81 | "no-trailing-spaces": 2, 82 | "keyword-spacing": 2, 83 | "react/forbid-prop-types": "off", 84 | "import/no-unused-modules": [ 85 | 1, 86 | { 87 | "unusedExports": true 88 | } 89 | ], 90 | "import/no-extraneous-dependencies": "off", 91 | "import/newline-after-import": ["error", { "count": 1 }], 92 | "import/no-unresolved": "off", 93 | "no-else-return": [ 94 | 2, 95 | { 96 | "allowElseIf": true 97 | } 98 | ] 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: Report a problem you encountered 3 | title: "[Bug]: " 4 | labels: ["bug"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: Thanks for taking the time to complete this bug report! 9 | - type: checkboxes 10 | id: terms 11 | attributes: 12 | label: Guidelines 13 | description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/jessesquires/.github/blob/main/CONTRIBUTING.md). 14 | options: 15 | - label: I agree to follow this project's Contributing Guidelines. 16 | required: true 17 | - type: input 18 | id: project 19 | attributes: 20 | label: Project Version 21 | description: Which project versions are affected? 22 | placeholder: "1.0, 2.2, 3.5.1" 23 | validations: 24 | required: true 25 | - type: input 26 | id: platform 27 | attributes: 28 | label: Platform and OS Version 29 | description: Which platforms or operating systems are affected? 30 | placeholder: "iOS 12.1, tvOS 13.0, macOS 10.15.1, Safari 12" 31 | validations: 32 | required: true 33 | - type: input 34 | id: devices 35 | attributes: 36 | label: Affected Devices 37 | description: Does this only occur on specific devices? 38 | placeholder: "All, iPhone X, iPhone SE, iPad Air, MacBook Pro" 39 | validations: 40 | required: true 41 | - type: input 42 | id: existing-issues 43 | attributes: 44 | label: Existing Issues 45 | description: Are there any similar existing issues? 46 | placeholder: "#42" 47 | validations: 48 | required: false 49 | - type: textarea 50 | id: what-happened 51 | attributes: 52 | label: What happened? 53 | description: Clearly and concisely describe the bug. 54 | placeholder: Tell us what happened. 55 | validations: 56 | required: true 57 | - type: textarea 58 | id: repro-steps 59 | attributes: 60 | label: Steps to reproduce 61 | value: | 62 | 1. 63 | 2. 64 | 3. 65 | ... 66 | validations: 67 | required: true 68 | - type: textarea 69 | id: expected-behavior 70 | attributes: 71 | label: Expected behavior 72 | description: What should have happened? 73 | placeholder: What did you expect to happen? 74 | validations: 75 | required: true 76 | - type: textarea 77 | id: attachments 78 | attributes: 79 | label: Attachments 80 | description: Please include code snippets, stack traces, or compiler errors. 81 | placeholder: Paste code snippets, stack traces, and compiler errors here 82 | validations: 83 | required: false 84 | - type: textarea 85 | id: screenshots 86 | attributes: 87 | label: Screenshots or Videos 88 | description: Add screenshots, gifs, or videos to help explain your problem. 89 | placeholder: Upload screenshots, gifs, and videos here 90 | validations: 91 | required: false 92 | - type: textarea 93 | id: additional 94 | attributes: 95 | label: Additional Information 96 | description: Add any other useful information about the problem here. 97 | placeholder: Is there any additional helpful information you can share? 98 | validations: 99 | required: false 100 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature request 2 | description: Suggest an idea for this project 3 | title: "[Feature]: " 4 | labels: ["feature request", "enhancement", "feature"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: Thanks for taking the time to complete this form! 9 | - type: checkboxes 10 | id: terms 11 | attributes: 12 | label: Guidelines 13 | description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/jessesquires/.github/blob/main/CONTRIBUTING.md). 14 | options: 15 | - label: I agree to follow this project's Contributing Guidelines. 16 | required: true 17 | - type: textarea 18 | id: description 19 | attributes: 20 | label: Description 21 | description: Clearly and concisely describe what you would like to change, add, or implement. 22 | placeholder: Tell us your idea. 23 | validations: 24 | required: true 25 | - type: textarea 26 | id: problem 27 | attributes: 28 | label: Problem 29 | description: Is your feature request related to a problem? 30 | placeholder: What problem will this solve? 31 | validations: 32 | required: true 33 | - type: textarea 34 | id: solution 35 | attributes: 36 | label: Proposed Solution 37 | description: How should this be solved? 38 | placeholder: How do you think this should be implemented? 39 | validations: 40 | required: true 41 | - type: textarea 42 | id: alternatives 43 | attributes: 44 | label: Alternatives Considered 45 | description: Are there other possible approaches? 46 | placeholder: Can you think of any other options? 47 | validations: 48 | required: true 49 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | *Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.* 4 | 5 | ### Features: 6 | * Closes # (feature) 7 | 8 | ### Issues: 9 | * Fixes # (issue) 10 | 11 | ## Type of change 12 | - [ ] Bug fix (non-breaking change which fixes an issue) 13 | - [ ] New feature (non-breaking change which adds functionality) 14 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 15 | - [ ] This change requires a documentation update 16 | 17 | # How Has This Been Tested? 18 | 19 | *Please describe the tests that you ran to verify your changes. 20 | Provide instructions so we can reproduce. Please also list any relevant details for your test configuration* 21 | 22 | - [ ] Test A 23 | - [ ] Test B 24 | 25 | # Checklist: 26 | 27 | - [X] My code follows the style guidelines of this project 28 | - [X] I have performed a self-review of my own code 29 | - [X] I have commented my code, particularly in hard-to-understand areas 30 | - [X] I have made corresponding changes to the documentation 31 | - [X] My changes generate no new warnings/errors 32 | - [X] I have added tests that prove my fix is effective or that my feature works 33 | - [X] New and existing unit tests pass locally with my changes 34 | - [X] Any dependent changes have been merged and published in downstream modules 35 | 36 | ## Terms and Conditions 37 | - [ ] I agree that the information provided above is accurate, and any inaccuracies found will lead to the dismissal of the Pull Request. 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # github 15 | /github 16 | 17 | # misc 18 | CODE_OF_CONDUCT.md 19 | CONTRIBUTING.md 20 | README.md 21 | SECURITY.md 22 | LICENSE 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run lint 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "tabWidth": 2, 4 | "useTabs": true, 5 | "printWidth": 100, 6 | "singleQuote": true, 7 | "trailingComma": "none", 8 | "jsxBracketSameLine": true 9 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, caste, color, religion, or sexual 11 | identity and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the overall 27 | community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or advances of 32 | any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email address, 36 | without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official email address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | srikanth.lakshminarayanan@gmail.com. 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series of 87 | actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or permanent 94 | ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within the 114 | community. 115 | 116 | 130 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | *Pull requests, bug reports, and all other forms of contribution are welcomed and highly encouraged!* :octocat: 4 | 5 | ### Contents 6 | 7 | - [Code of Conduct](#book-code-of-conduct) 8 | - [Asking Questions](#bulb-asking-questions) 9 | - [Opening an Issue](#inbox_tray-opening-an-issue) 10 | - [Feature Requests](#love_letter-feature-requests) 11 | - [Triaging Issues](#mag-triaging-issues) 12 | - [Submitting Pull Requests](#repeat-submitting-pull-requests) 13 | - [Writing Commit Messages](#memo-writing-commit-messages) 14 | - [Code Review](#white_check_mark-code-review) 15 | - [Coding Style](#nail_care-coding-style) 16 | - [Certificate of Origin](#medal_sports-certificate-of-origin) 17 | - [Credits](#pray-credits) 18 | 19 | > **This guide serves to set clear expectations for everyone involved with the project so that we can improve it together while also creating a welcoming space for everyone to participate. Following these guidelines will help ensure a positive experience for contributors and maintainers.** 20 | 21 | ## :book: Code of Conduct 22 | 23 | Please review our [Code of Conduct](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/blob/master/CODE_OF_CONDUCT.md). It is in effect at all times. We expect it to be honored by everyone who contributes to this project. Acting like an asshole will not be tolerated. 24 | 25 | ## :inbox_tray: Opening an Issue 26 | 27 | Before [creating an issue](https://help.github.com/en/github/managing-your-work-on-github/creating-an-issue), check if you are using the latest version of the project. If you are not up-to-date, see if updating fixes your issue first. 28 | 29 | ### :lock: Reporting Security Issues 30 | 31 | Review our [Security Policy](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/blob/master/SECURITY.md). **Do not** file a public issue for security vulnerabilities. 32 | 33 | ### :beetle: Bug Reports and Other Issues 34 | 35 | A great way to contribute to the project is to send a detailed issue when you encounter a problem. We always appreciate a well-written, thorough bug report. :v: 36 | 37 | In short, since you are most likely a developer, **provide a ticket that you would like to receive**. 38 | 39 | - **Review the documentation** before opening a new issue. 40 | 41 | - **Do not open a duplicate issue!** Search through existing issues to see if your issue has previously been reported. If your issue exists, comment with any additional information you have. You may simply note "I have this problem too", which helps prioritize the most common problems and requests. 42 | 43 | - **Prefer using [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)**, not comments, if you simply want to "+1" an existing issue. 44 | 45 | - **Fully complete the provided issue template.** The bug report template requests all the information we need to quickly and efficiently address your issue. Be clear, concise, and descriptive. Provide as much information as you can, including steps to reproduce, stack traces, compiler errors, library versions, OS versions, and screenshots (if applicable). 46 | 47 | - **Use [GitHub-flavored Markdown](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).** Especially put code blocks and console outputs in backticks (```). This improves readability. 48 | 49 | ## :love_letter: Feature Requests 50 | 51 | Feature requests are welcome! While we will consider all requests, we cannot guarantee your request will be accepted. We want to avoid [feature creep](https://en.wikipedia.org/wiki/Feature_creep). Your idea may be great, but also out-of-scope for the project. If accepted, we cannot make any commitments regarding the timeline for implementation and release. However, you are welcome to submit a pull request to help! 52 | 53 | - **Do not open a duplicate feature request.** Search for existing feature requests first. If you find your feature (or one very similar) previously requested, comment on that issue. 54 | 55 | - **Fully complete the provided issue template.** The feature request template asks for all necessary information for us to begin a productive conversation. 56 | 57 | - Be precise about the proposed outcome of the feature and how it relates to existing features. Include implementation details if possible. 58 | 59 | ## :mag: Triaging Issues 60 | 61 | You can triage issues which may include reproducing bug reports or asking for additional information, such as version numbers or reproduction instructions. Any help you can provide to quickly resolve an issue is very much appreciated! 62 | 63 | ## :repeat: Submitting Pull Requests 64 | 65 | We **love** pull requests! Before [forking the repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [creating a pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/proposing-changes-to-your-work-with-pull-requests) for non-trivial changes, it is usually best to first open an issue to discuss the changes, or discuss your intended approach for solving the problem in the comments for an existing issue. 66 | 67 | For most contributions, after your first pull request is accepted and merged, you will be [invited to the project](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) and given **push access**. :tada: 68 | 69 | *Note: All contributions will be licensed under the project's license.* 70 | 71 | - **Smaller is better.** Submit **one** pull request per bug fix or feature. A pull request should contain isolated changes pertaining to a single bug fix or feature implementation. **Do not** refactor or reformat code that is unrelated to your change. It is better to **submit many small pull requests** rather than a single large one. Enormous pull requests will take enormous amounts of time to review, or may be rejected altogether. 72 | 73 | - **Coordinate bigger changes.** For large and non-trivial changes, open an issue to discuss a strategy with the maintainers. Otherwise, you risk doing a lot of work for nothing! 74 | 75 | - **Prioritize understanding over cleverness.** Write code clearly and concisely. Remember that source code usually gets written once and read often. Ensure the code is clear to the reader. The purpose and logic should be obvious to a reasonably skilled developer, otherwise you should add a comment that explains it. 76 | 77 | - **Follow existing coding style and conventions.** Keep your code consistent with the style, formatting, and conventions in the rest of the code base. When possible, these will be enforced with a linter. Consistency makes it easier to review and modify in the future. 78 | 79 | - **Include test coverage.** Add unit tests or UI tests when possible. Follow existing patterns for implementing tests. 80 | 81 | - **Update the example project** if one exists to exercise any new functionality you have added. 82 | 83 | - **Add documentation.** Document your changes with code doc comments or in existing guides. 84 | 85 | - **Update the CHANGELOG** for all enhancements and bug fixes. Include the corresponding issue number if one exists, and your GitHub username. (example: "- Fixed crash in profile view. #123 @Srikanth-LSharma") 86 | 87 | - **Use the repo's default branch.** Branch from and [submit your pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) to the repo's default branch. Usually this is `main`, but it could be `dev`, `develop`, or `master`. 88 | 89 | - **[Resolve any merge conflicts](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/resolving-a-merge-conflict-on-github)** that occur. 90 | 91 | - **Promptly address any CI failures**. If your pull request fails to build or pass tests, please push another commit to fix it. 92 | 93 | - When writing comments, use properly constructed sentences, including punctuation. 94 | 95 | - Use spaces, not tabs. 96 | 97 | ## :memo: Writing Commit Messages 98 | 99 | Please [write a great commit message](https://chris.beams.io/posts/git-commit/). 100 | 101 | 1. Separate subject from body with a blank line 102 | 1. Limit the subject line to 50 characters 103 | 1. Capitalize the subject line 104 | 1. Do not end the subject line with a period 105 | 1. Use the imperative mood in the subject line (example: "Fix networking issue") 106 | 1. Wrap the body at about 72 characters 107 | 1. Use the body to explain **why**, *not what and how* (the code shows that!) 108 | 1. If applicable, prefix the title with the relevant component name. (examples: "[Docs] Fix typo", "[Profile] Fix missing avatar") 109 | 110 | ``` 111 | [TAG] Short summary of changes in 50 chars or less 112 | 113 | Add a more detailed explanation here, if necessary. Possibly give 114 | some background about the issue being fixed, etc. The body of the 115 | commit message can be several paragraphs. Further paragraphs come 116 | after blank lines and please do proper word-wrap. 117 | 118 | Wrap it to about 72 characters or so. In some contexts, 119 | the first line is treated as the subject of the commit and the 120 | rest of the text as the body. The blank line separating the summary 121 | from the body is critical (unless you omit the body entirely); 122 | various tools like `log`, `shortlog` and `rebase` can get confused 123 | if you run the two together. 124 | 125 | Explain the problem that this commit is solving. Focus on why you 126 | are making this change as opposed to how or what. The code explains 127 | how or what. Reviewers and your future self can read the patch, 128 | but might not understand why a particular solution was implemented. 129 | Are there side effects or other unintuitive consequences of this 130 | change? Here's the place to explain them. 131 | 132 | - Bullet points are okay, too 133 | 134 | - A hyphen or asterisk should be used for the bullet, preceded 135 | by a single space, with blank lines in between 136 | 137 | Note the fixed or relevant GitHub issues at the end: 138 | 139 | Resolves: #123 140 | See also: #456, #789 141 | ``` 142 | 143 | ## :white_check_mark: Code Review 144 | 145 | - **Review the code, not the author.** Look for and suggest improvements without disparaging or insulting the author. Provide actionable feedback and explain your reasoning. 146 | 147 | - **You are not your code.** When your code is critiqued, questioned, or constructively criticized, remember that you are not your code. Do not take code review personally. 148 | 149 | - **Always do your best.** No one writes bugs on purpose. Do your best, and learn from your mistakes. 150 | 151 | - Kindly note any violations to the guidelines specified in this document. 152 | 153 | ## :nail_care: Coding Style 154 | 155 | Consistency is the most important. Following the existing style, formatting, and naming conventions of the file you are modifying and of the overall project. Failure to do so will result in a prolonged review process that has to focus on updating the superficial aspects of your code, rather than improving its functionality and performance. 156 | 157 | For example, if all private properties are prefixed with an underscore `_`, then new ones you add should be prefixed in the same way. Or, if methods are named using camelcase, like `thisIsMyNewMethod`, then do not diverge from that by writing `this_is_my_new_method`. You get the idea. If in doubt, please ask or search the codebase for something similar. 158 | 159 | When possible, style and format will be enforced with a linter. 160 | 161 | ## :medal_sports: Certificate of Origin 162 | 163 | *Developer's Certificate of Origin 1.1* 164 | 165 | By making a contribution to this project, I certify that: 166 | 167 | > 1. The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or 168 | > 1. The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or 169 | > 1. The contribution was provided directly to me by some other person who certified (1), (2) or (3) and I have not modified it. 170 | > 1. I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved. 171 | 172 | ## [No Brown M&M's](https://en.wikipedia.org/wiki/Van_Halen#Contract_riders) 173 | 174 | If you are reading this, bravo dear user and (hopefully) contributor for making it this far! You are awesome. :100: 175 | 176 | To confirm that you have read this guide and are following it as best as possible, **include this emoji at the top** of your issue or pull request: :black_heart: `:black_heart:` 177 | 178 | ## :pray: Credits 179 | 180 | *Many of the ideas and prose for the statements in this document were based on or inspired by work from the following communities:* 181 | 182 | - [Alamofire](https://github.com/Alamofire/Alamofire/blob/master/CONTRIBUTING.md) 183 | - [CocoaPods](https://github.com/CocoaPods/CocoaPods/blob/master/CONTRIBUTING.md) 184 | - [Docker](https://github.com/moby/moby/blob/master/CONTRIBUTING.md) 185 | - [Linux](https://elinux.org/Developer_Certificate_Of_Origin) 186 | 187 | *We commend them for their efforts to facilitate collaboration in their projects.* 188 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Srikanth L 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

React-PWA-Boilerplate

6 |


7 |
8 | 9 | 10 | ## Description 11 | A standalone boilerplate for building Progressive Web Apps (PWAs) using React. This boilerplate provides a solid foundation with essential features like service worker implementation, webpack implementation, and offline functionality. Kickstart your PWA development with ease using this customizable and modern React boilerplate. 12 | 13 | ## Features 14 | 15 | - **React framework for modern web development** 16 | 17 | - **Progressive Web App (PWA) support with pre-configured offline functionality** 18 | 19 | - **Service worker integration for seamless caching and improved performance** 20 | 21 | - **Workbox integration with webpack for faster build and smoother development experience** 22 | 23 | - **Addition of ESLint and Pre-commits for better code quality** 24 | 25 | - **Integration of redux-toolkit for state management** 26 | 27 | - **Pre-configured application routing with the addition of an animated `404 Not Found` page** 28 | - **Usage of interceptors for handling API calls** 29 | 30 | 31 | 32 | 33 | ## Tech Used 34 | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Static Badge](https://img.shields.io/badge/Progressive%20Web%20App-green.svg?style=for-the-badge&logo=PWA&logoColor=%235f17ca&labelColor=%23eeeeee&color=%23eeeeee) 35 | ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=material-ui&logoColor=white) ![Static Badge](https://img.shields.io/badge/Redux%20Toolkit-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) 36 | ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![Static Badge](https://img.shields.io/badge/Workbox-green.svg?style=for-the-badge&logo=workbox&logoColor=black&labelColor=black&color=%20%23f58008) 37 | 38 | 39 | ## Installation Guide 40 | 41 | 1. Clone the repository 42 | 43 | ```bash 44 | git clone https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate.git 45 | ``` 46 | 47 | 2. Change the working directory 48 | 49 | ```bash 50 | cd React-PWA-Redux-boilerplate 51 | ``` 52 | 53 | 3. Install dependencies 54 | 55 | ```bash 56 | npm install 57 | ``` 58 | 59 | 4. Run the app 60 | 61 | ```bash 62 | npm start 63 | ``` 64 | 65 | 4. To serve the app on production or build mode 66 | 67 | ```bash 68 | npm run serve 69 | ``` 70 | 71 | 🌟 You are all set! 🌟 72 | 73 | 74 | ## Repository structure 75 | 76 | ``` 77 | `-- config` ............................... 1. Configuration files, for tools like webpack. 78 | | |-- webpack.common.js 79 | `-- public` ............................... 2. Directory containing publicly accessible files, like index.html. 80 | | |-- index.html 81 | `-- src` 82 | | `-- assets` ........................ 3. Resources used in the project, such as images or fonts. 83 | | | `-- NotFound` .................. 4. Specific asset directory for resources related to specific pages. 84 | | | |-- 404.svg 85 | | `-- components` .................... 5. Reusable UI components 86 | | | `-- withMediaQuery ............. 6. Component or utility related to media queries and other custom hooks can be included inside of /components folder. 87 | | | |-- index.js 88 | | `-- containers` .................... 7. Components that represent entire pages or larger parts of the UI. 89 | | | `-- pageNotFound` 90 | | | |-- index.js 91 | | | |-- styles.css 92 | | | |-- Home.js 93 | | `-- store` ......................... 8. Files related to state management, such as Redux/Toolkit 94 | | | |-- index.js 95 | | | |-- reducers.js 96 | | |-- App.js 97 | | |-- index.js 98 | | |-- Routes.js ...................... 9. File defining application routing. 99 | | |-- src-sw.js ...................... 10. Service worker file for progressive web app functionality. 100 | | |-- serviceWorkerRegistration.js 101 | |-- env.development ........................ 11. Environment-specific configuration file for development (can add more of these files for other environments ex: env.prod) 102 | |-- package.json ........................... 12. File defining project dependencies and scripts. 103 | |-- README.md 104 | |-- CONTRIBUTING.md 105 | |-- CODE_OF_CONDUCT.md 106 | |-- LICENSE 107 | ``` 108 | 109 | 110 | ## Contributing 111 | 112 | The main purpose of this repository is to refine and expand the features of existing Progressive Web App (PWA) boilerplates, by aiming to enhance its performance and user experience. We welcome contributions from the community to help address issues and introduce new features & improvements. Please review the guidelines below to learn how you can participate in advancing this project. 113 | 114 | Feel free to suggest a [new feature](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/issues/new?assignees=&labels=feature+request%2Cenhancement%2Cfeature&projects=&template=feature_request.yml&title=%5BFeature%5D%3A+) or contribute to the project by creating a [pull request](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/compare) and please report [issues](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml&title=%5BBug%5D%3A+) if you come across any. 115 | 116 | 117 | ### [Code of Conduct](./CODE_OF_CONDUCT.md) 118 | 119 | We have adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](./CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated. 120 | 121 | ### [Contributing Guide](./CONTRIBUTING.md) 122 | 123 | Read our [contributing guide](./CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to this project. 124 | 125 | ### Good First Issues 126 | 127 | To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started. 128 | 129 | ### License 130 | 131 | This project is [MIT licensed](./LICENSE). 132 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | If you discover a security issue, please bring it to our attention right away! 4 | 5 | ## Reporting a Vulnerability 6 | 7 | Please **DO NOT** file a public issue to report a security vulberability, instead send your report privately to **[Code Owner](mailto:srikanth.lakshminarayanan@gmail.com)**. This will help ensure that any vulnerabilities that are found can be [disclosed responsibly](https://en.wikipedia.org/wiki/Responsible_disclosure) to any affected parties. 8 | 9 | ## Supported Versions 10 | 11 | Project versions that are currently being supported with security updates vary per project. 12 | Please see specific project repositories for details. 13 | If nothing is specified, only the latest major versions are supported. 14 | -------------------------------------------------------------------------------- /config/copyFiles.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | 3 | // Copy service-worker.js to the build folder post build. 4 | const serviceWorkerSourcePath = './src/service-worker.js'; 5 | const serviceWorkerDestinationPath = './build/service-worker.js'; 6 | 7 | if (fs.existsSync(serviceWorkerDestinationPath)) { 8 | fs.unlinkSync(serviceWorkerDestinationPath); 9 | } 10 | 11 | fs.copySync(serviceWorkerSourcePath, serviceWorkerDestinationPath); 12 | 13 | // Copy manifest.json to the build folder post build. 14 | const manifestSourcePath = './public/manifest.json'; 15 | const manifestDestinationPath = './build/manifest.json'; 16 | 17 | if (fs.existsSync(manifestDestinationPath)) { 18 | fs.unlinkSync(manifestDestinationPath); 19 | } 20 | 21 | fs.copySync(manifestSourcePath, manifestDestinationPath); 22 | -------------------------------------------------------------------------------- /config/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); 5 | const Dotenv = require('dotenv-webpack'); 6 | const { EsbuildPlugin } = require('esbuild-loader'); 7 | // const WorkboxPlugin = require('workbox-webpack-plugin'); 8 | 9 | module.exports = { 10 | mode: process.env.REACT_APP_WEBPACK_MODE, 11 | performance: { 12 | hints: false 13 | }, 14 | entry: { 15 | Bundle: path.resolve(__dirname, '..', './src/index.js') 16 | }, 17 | output: { 18 | path: path.resolve(__dirname, '..', 'build'), 19 | filename: '[name].[chunkhash].js' 20 | }, 21 | optimization: { 22 | splitChunks: { 23 | chunks: 'all' 24 | }, 25 | minimize: true, 26 | minimizer: [ 27 | new ImageMinimizerPlugin({ 28 | minimizer: { 29 | implementation: ImageMinimizerPlugin.imageminMinify, 30 | options: { 31 | // Lossless optimization with custom option 32 | // Feel free to experiment with options for better result for you 33 | plugins: [ 34 | ['optipng', { optimizationLevel: 5 }], 35 | // Svgo configuration here https://github.com/svg/svgo#configuration 36 | [ 37 | 'svgo', 38 | { 39 | plugins: [ 40 | { 41 | name: 'preset-default', 42 | params: { 43 | overrides: { 44 | removeViewBox: false, 45 | addAttributesToSVGElement: { 46 | params: { 47 | attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }] 48 | } 49 | } 50 | } 51 | } 52 | } 53 | ] 54 | } 55 | ] 56 | ] 57 | } 58 | } 59 | }), 60 | new EsbuildPlugin({ 61 | target: 'es2015', 62 | css: true 63 | }) 64 | ] 65 | }, 66 | module: { 67 | rules: [ 68 | { 69 | test: /\.(jpe?go|pngo|gifo|svgo)$/i, 70 | type: 'asset' 71 | }, 72 | // Use esbuild to compile JavaScript & TypeScript 73 | { 74 | // Match `.js`, `.jsx`, `.ts` or `.tsx` files 75 | test: /\.[jt]sx?$/, 76 | exclude: path.resolve(__dirname, '..', 'node_modules'), 77 | loader: 'esbuild-loader', 78 | options: { 79 | // Treat `.js` files as `.jsx` files 80 | loader: 'jsx', 81 | // JavaScript version to compile to 82 | target: 'es2015' 83 | } 84 | }, 85 | { 86 | test: /\.(scss|css)$/, 87 | exclude: path.resolve(__dirname, 'node_modules'), 88 | use: [ 89 | 'style-loader', 90 | 'css-loader', 91 | { 92 | loader: 'esbuild-loader', 93 | options: { 94 | minify: true 95 | } 96 | } 97 | ] 98 | }, 99 | // { 100 | // test: /\.(scss|css)$/, 101 | // use: [ 102 | // MiniCssExtractPlugin.loader, 103 | // { 104 | // loader: 'css-loader', 105 | // options: { 106 | // importLoaders: 2, 107 | // sourceMap: false, 108 | // modules: false 109 | // } 110 | // } 111 | // ] 112 | // }, 113 | { 114 | test: /\.(png|jpg|gif|ico)$/, 115 | use: [ 116 | { 117 | loader: 'url-loader', 118 | options: { name: '[name].[ext]' } 119 | } 120 | ] 121 | }, 122 | { 123 | test: /\.svg$/, 124 | use: [ 125 | { 126 | loader: 'svg-url-loader', 127 | options: { 128 | limit: 10000 129 | } 130 | } 131 | ] 132 | }, 133 | { 134 | test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/, 135 | use: [ 136 | { 137 | loader: 'file-loader', 138 | options: { 139 | name: '[name].[ext]', 140 | outputPath: 'assets/fonts/' 141 | } 142 | } 143 | ] 144 | }, 145 | { 146 | test: /\.config$/, 147 | use: [ 148 | { 149 | loader: 'file-loader', 150 | options: { name: '[name].[ext]' } 151 | } 152 | ] 153 | }, 154 | { 155 | type: 'javascript/auto', 156 | test: /\.json$/, 157 | use: [ 158 | { 159 | loader: 'json-loader', 160 | options: { name: '[name].[ext]' } 161 | } 162 | ] 163 | }, 164 | { 165 | test: /\.ya?ml$/, 166 | use: 'yaml-loader' 167 | } 168 | ] 169 | }, 170 | plugins: [ 171 | new HtmlWebpackPlugin({ 172 | template: path.resolve(__dirname, '..', 'public/index.html'), 173 | favicon: path.resolve(__dirname, '..', './src/assets/root/favicon.ico') 174 | }), 175 | // new MiniCssExtractPlugin({ 176 | // filename: 'styles.[contenthash].css', 177 | // chunkFilename: '[id].css' 178 | // }), 179 | new Dotenv({ 180 | path: path.resolve(__dirname, '..', '.env.development') 181 | }) 182 | // , 183 | // new WorkboxPlugin.GenerateSW({ 184 | // // these options encourage the ServiceWorkers to get in there fast 185 | // // and not allow any straggling "old" SWs to hang around 186 | // clientsClaim: true, 187 | // skipWaiting: true 188 | // }), 189 | 190 | ] 191 | }; -------------------------------------------------------------------------------- /config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const path = require('path'); 3 | const commonConfig = require('./webpack.common'); 4 | // const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | // const Dotenv = require('dotenv-webpack'); 6 | // const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); 7 | // const { EsbuildPlugin } = require('esbuild-loader'); 8 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 9 | 10 | module.exports = merge(commonConfig, { 11 | mode: 'development', 12 | performance: { 13 | hints: false 14 | }, 15 | devtool: 'eval-cheap-module-source-map', 16 | devServer: { 17 | compress: true 18 | }, 19 | entry: { 20 | Bundle: path.resolve(__dirname, '..', './src/index.js') 21 | }, 22 | output: { 23 | path: path.resolve(__dirname, '..', 'build'), 24 | filename: '[name].[chunkhash].js' 25 | } 26 | }); -------------------------------------------------------------------------------- /config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const path = require('path'); 3 | const CompressionPlugin = require('compression-webpack-plugin'); 4 | const { InjectManifest } = require('workbox-webpack-plugin'); 5 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 | const commonConfig = require('./webpack.common'); 7 | // const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | // const Dotenv = require('dotenv-webpack'); 9 | // const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); 10 | // const { EsbuildPlugin } = require('esbuild-loader'); 11 | // const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 12 | 13 | 14 | module.exports = merge(commonConfig, { 15 | mode: 'production', 16 | performance: { 17 | hints: false 18 | }, 19 | devtool: 'eval-cheap-module-source-map', 20 | devServer: { 21 | compress: true, 22 | historyApiFallback: true, 23 | contentBase: './', 24 | hot: true 25 | }, 26 | entry: { 27 | Bundle: path.resolve(__dirname, '..', './src/index.js') 28 | }, 29 | output: { 30 | path: path.resolve(__dirname, '..', 'build'), 31 | filename: '[name].[chunkhash].js', 32 | publicPath: '/' 33 | }, 34 | plugins: [ 35 | new CopyWebpackPlugin({ 36 | patterns: [ 37 | { from: './src/assets/root/favicon.ico', to: '' }, 38 | { from: './src/assets/root/logo192.png', to: '' }, 39 | { from: './src/assets/root/logo512.png', to: '' }, 40 | { from: './src/manifest.json', to: '' }, 41 | { from: './public/web.config', to: '' } 42 | ] 43 | }), 44 | new InjectManifest({ 45 | swSrc: './src/src-sw.js', 46 | swDest: 'sw.js' 47 | }), 48 | new CompressionPlugin({ 49 | filename: '[path][base].gz', 50 | algorithm: 'gzip', 51 | test: /\.js$|\.css$|\.html$/, 52 | threshold: 10240, 53 | minRatio: 0.8 54 | }) 55 | ] 56 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-pwa", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.11.1", 7 | "@emotion/styled": "^11.11.0", 8 | "@mui/joy": "^5.0.0-beta.18", 9 | "@mui/material": "^5.15.0", 10 | "@reduxjs/toolkit": "^2.0.1", 11 | "@testing-library/jest-dom": "^5.17.0", 12 | "@testing-library/react": "^13.4.0", 13 | "@testing-library/user-event": "^13.5.0", 14 | "axios": "^1.6.2", 15 | "json-loader": "^0.5.7", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-redux": "^9.0.4", 19 | "react-router": "^6.21.0", 20 | "react-router-dom": "^6.21.0", 21 | "react-scripts": "5.0.1", 22 | "web-vitals": "^2.1.4", 23 | "workbox-background-sync": "^6.6.0", 24 | "workbox-broadcast-update": "^6.6.0", 25 | "workbox-cacheable-response": "^6.6.0", 26 | "workbox-core": "^6.6.0", 27 | "workbox-expiration": "^6.6.0", 28 | "workbox-google-analytics": "^6.6.0", 29 | "workbox-navigation-preload": "^6.6.0", 30 | "workbox-precaching": "^6.6.0", 31 | "workbox-range-requests": "^6.6.0", 32 | "workbox-routing": "^6.6.0", 33 | "workbox-strategies": "^6.6.0", 34 | "workbox-streams": "^6.6.0", 35 | "workbox-window": "^7.0.0" 36 | }, 37 | "scripts": { 38 | "dev": "rimraf build", 39 | "start": "env-cmd -f .env.development webpack-dev-server --history-api-fallback --config=./config/webpack.dev.js --open", 40 | "build": "env-cmd -f .env.development npm run dev && webpack --config=./config/webpack.prod.js", 41 | "serve": "npm run build && serve -s build", 42 | "test": "react-scripts test", 43 | "eject": "react-scripts eject", 44 | "lint": "eslint .", 45 | "lint:fix": "eslint src/ --fix", 46 | "format": "prettier --write './**/*.{js,jsx,md,json}' --config ./.prettierrc", 47 | "prepare": "husky install" 48 | }, 49 | "eslintConfig": { 50 | "extends": [ 51 | "react-app", 52 | "react-app/jest" 53 | ] 54 | }, 55 | "browserslist": { 56 | "production": [ 57 | ">0.2%", 58 | "not dead", 59 | "not op_mini all" 60 | ], 61 | "development": [ 62 | "last 1 chrome version", 63 | "last 1 firefox version", 64 | "last 1 safari version" 65 | ] 66 | }, 67 | "devDependencies": { 68 | "babel-loader": "^9.1.3", 69 | "cjs-loader": "^0.1.0", 70 | "compression-webpack-plugin": "^10.0.0", 71 | "copy-webpack-plugin": "^12.0.2", 72 | "css-loader": "^6.10.0", 73 | "dotenv-webpack": "^8.0.1", 74 | "env-cmd": "^10.1.0", 75 | "esbuild-loader": "^4.0.2", 76 | "eslint": "^8.56.0", 77 | "eslint-config-airbnb": "^19.0.4", 78 | "eslint-config-prettier": "^9.1.0", 79 | "eslint-formatter-pretty": "^6.0.0", 80 | "eslint-plugin-prettier": "^5.0.1", 81 | "eslint-plugin-react": "^7.33.2", 82 | "eslint-plugin-react-hooks": "^4.6.0", 83 | "file-loader": "^6.2.0", 84 | "html-loader": "^5.0.0", 85 | "html-webpack-plugin": "^5.6.0", 86 | "husky": "^8.0.0", 87 | "image-minimizer-webpack-plugin": "^3.8.3", 88 | "image-webpack-loader": "^8.1.0", 89 | "imagemin": "^8.0.1", 90 | "imagemin-optipng": "^8.0.0", 91 | "imagemin-svgo": "^10.0.1", 92 | "lint-staged": "^15.2.0", 93 | "mini-css-extract-plugin": "^2.7.6", 94 | "prettier": "^3.1.1", 95 | "sass-loader": "^14.1.0", 96 | "style-loader": "^3.3.4", 97 | "svg-url-loader": "^8.0.0", 98 | "url-loader": "^4.1.1", 99 | "webpack-cli": "^5.1.4", 100 | "webpack-dev-server": "^4.15.1", 101 | "webpack-merge": "^5.10.0", 102 | "workbox-webpack-plugin": "^7.0.0", 103 | "yaml-loader": "^0.8.0" 104 | }, 105 | "husky": { 106 | "hooks": { 107 | "pre-commit": "lint-staged" 108 | } 109 | }, 110 | "lint-staged": { 111 | "./src/*.{js,jsx}": [ 112 | "npm run format", 113 | "npm run lint:fix" 114 | ] 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | 17 | .App-header { 18 | background-color: #282c34; 19 | min-height: 100vh; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | font-size: calc(10px + 2vmin); 25 | color: white; 26 | } 27 | 28 | .App-link { 29 | color: #61dafb; 30 | } 31 | 32 | @keyframes App-logo-spin { 33 | from { 34 | transform: rotate(0deg); 35 | } 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import logo from './assets/logo.svg'; 3 | import './App.css'; 4 | import AppRouter from './Routes'; 5 | 6 | function App() { 7 | return ( 8 |
9 | {/*
10 | logo 11 |

12 | Edit 13 | {' '} 14 | src/App.js 15 | {' '} 16 | and save to reload.11 17 |

18 | 24 | Learn React 25 | 26 |
*/} 27 | 28 |
29 | ); 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Routes.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-named-as-default */ 2 | import React from 'react'; 3 | // import PropTypes from 'prop-types'; 4 | import { Routes, Route } from 'react-router-dom'; 5 | import urls from './constants/routes.json'; 6 | import Home from './containers/Home'; 7 | import About from './containers/About'; 8 | import Contact from './containers/Contact'; 9 | import NotFound from './containers/pageNotFound'; 10 | 11 | function AppRouter() { 12 | return ( 13 | 14 | } /> 15 | } /> 16 | } /> 17 | } /> 18 | 19 | ) 20 | } 21 | 22 | AppRouter.propTypes = {}; 23 | 24 | export default AppRouter; 25 | -------------------------------------------------------------------------------- /src/assets/NotFound/404.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | 404 -------------------------------------------------------------------------------- /src/assets/NotFound/astronaut.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | astronaut_1 -------------------------------------------------------------------------------- /src/assets/NotFound/earth.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | earth -------------------------------------------------------------------------------- /src/assets/NotFound/moon.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | moon_1 -------------------------------------------------------------------------------- /src/assets/NotFound/overlay_stars.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | overlay_stars_1 -------------------------------------------------------------------------------- /src/assets/NotFound/rocket.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | rocket_1 -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/root/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sri-Ln/React-PWA-Redux-boilerplate/ec4e08ccd892ebb14c3534a5f5d824721bf4830f/src/assets/root/favicon.ico -------------------------------------------------------------------------------- /src/assets/root/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sri-Ln/React-PWA-Redux-boilerplate/ec4e08ccd892ebb14c3534a5f5d824721bf4830f/src/assets/root/logo192.png -------------------------------------------------------------------------------- /src/assets/root/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sri-Ln/React-PWA-Redux-boilerplate/ec4e08ccd892ebb14c3534a5f5d824721bf4830f/src/assets/root/logo512.png -------------------------------------------------------------------------------- /src/components/withMediaQuery/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useMediaQuery } from '@mui/material'; 3 | 4 | const withMediaQuery = (queries = []) => Component => props => { 5 | const mediaProps = {}; 6 | queries.forEach(q => { 7 | mediaProps[q[0]] = useMediaQuery(q[1]); 8 | }); 9 | return ; 10 | }; 11 | 12 | export default withMediaQuery; -------------------------------------------------------------------------------- /src/components/withRouter/index.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | import React from "react"; 3 | 4 | export const withRouter = (Component) => { 5 | const Wrapper = (props) => { 6 | const navigate = useNavigate(); 7 | return ( 8 | 12 | ); 13 | }; 14 | 15 | return Wrapper; 16 | }; -------------------------------------------------------------------------------- /src/constants/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "HOME":"/", 3 | "ABOUT":"/About", 4 | "CONTACT":"/Contact" 5 | } -------------------------------------------------------------------------------- /src/containers/About.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | // import { connect } from 'react-redux'; 5 | 6 | export const About = (props) => { 7 | return
About
; 8 | }; 9 | 10 | About.propTypes = { 11 | }; 12 | 13 | // const mapStateToProps = (state) => ({}); 14 | 15 | // const mapDispatchToProps = {}; 16 | 17 | export default About; 18 | -------------------------------------------------------------------------------- /src/containers/Contact.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | // import { connect } from 'react-redux'; 5 | 6 | export const Contact = (props) => { 7 | return
Contact
; 8 | }; 9 | 10 | Contact.propTypes = { 11 | }; 12 | 13 | // const mapStateToProps = (state) => ({}); 14 | 15 | // const mapDispatchToProps = {}; 16 | 17 | export default Contact; 18 | -------------------------------------------------------------------------------- /src/containers/Home.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | // import { connect } from 'react-redux'; 5 | 6 | export const Home = (props) => { 7 | return
Home
; 8 | }; 9 | 10 | Home.propTypes = { 11 | }; 12 | 13 | // const mapStateToProps = (state) => ({}); 14 | 15 | // const mapDispatchToProps = {}; 16 | 17 | export default Home; 18 | -------------------------------------------------------------------------------- /src/containers/pageNotFound/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/button-has-type */ 2 | /* eslint-disable jsx-a11y/alt-text */ 3 | import React from 'react'; 4 | import './styles.css'; 5 | import Error from '../../assets/NotFound/404.svg'; 6 | import Astronaut from '../../assets/NotFound/astronaut.svg'; 7 | import Moon from '../../assets/NotFound/moon.svg'; 8 | import Rocket from '../../assets/NotFound/rocket.svg'; 9 | import Earth from '../../assets/NotFound/earth.svg' 10 | import { withRouter } from '../../components/withRouter'; 11 | 12 | function NotFound(props) { 13 | return ( 14 | 15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 |
24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 | ) 42 | } 43 | 44 | export default withRouter(NotFound); -------------------------------------------------------------------------------- /src/containers/pageNotFound/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | VIEW IN FULL SCREEN MODE 3 | FULL SCREEN MODE: http://salehriaz.com/404Page/404.html 4 | 5 | DRIBBBLE: https://dribbble.com/shots/4330167-404-Page-Lost-In-Space 6 | */ 7 | 8 | @import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500'); 9 | 10 | @-moz-keyframes rocket-movement { 100% {-moz-transform: translate(750px,-600px);} } 11 | @-webkit-keyframes rocket-movement {100% {-webkit-transform: translate(750px,-600px); } } 12 | @keyframes rocket-movement { 100% {transform: translate(750px,-600px);} } 13 | @-moz-keyframes spin-earth { 100% { -moz-transform: rotate(-360deg); transition: transform 20s; } } 14 | @-webkit-keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transition: transform 20s; } } 15 | @keyframes spin-earth{ 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); transition: transform 20s; } } 16 | @keyframes moon-movement { 17 | 0% { 18 | transform: rotate(0deg) translate(150px, 0); /* Start with a circular motion */ 19 | } 20 | 50% { 21 | transform: rotate(-180deg) translate(150px, 0); /* Half circle */ 22 | } 23 | 100% { 24 | transform: rotate(-360deg) translate(150px, 0); /* End with elliptical motion */ 25 | } 26 | } 27 | 28 | @-moz-keyframes move-astronaut { 29 | 100% { -moz-transform: translate(-160px, -160px);} 30 | } 31 | @-webkit-keyframes move-astronaut { 32 | 100% { -webkit-transform: translate(-160px, -160px);} 33 | } 34 | @keyframes move-astronaut{ 35 | 100% { -webkit-transform: translate(-160px, -160px); transform:translate(-160px, -160px); } 36 | } 37 | @-moz-keyframes rotate-astronaut { 38 | 100% { -moz-transform: rotate(-720deg);} 39 | } 40 | @-webkit-keyframes rotate-astronaut { 41 | 100% { -webkit-transform: rotate(-720deg);} 42 | } 43 | @keyframes rotate-astronaut{ 44 | 100% { -webkit-transform: rotate(-720deg); transform:rotate(-720deg); } 45 | } 46 | 47 | @-moz-keyframes glow-star { 48 | 40% { -moz-opacity: 0.3;} 49 | 90%,100% { -moz-opacity: 1; -moz-transform: scale(1.2);} 50 | } 51 | @-webkit-keyframes glow-star { 52 | 40% { -webkit-opacity: 0.3;} 53 | 90%,100% { -webkit-opacity: 1; -webkit-transform: scale(1.2);} 54 | } 55 | @keyframes glow-star{ 56 | 40% { -webkit-opacity: 0.3; opacity: 0.3; } 57 | 90%,100% { -webkit-opacity: 1; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); border-radius: 999999px;} 58 | } 59 | 60 | .spin-earth-on-hover{ 61 | 62 | transition: ease 200s !important; 63 | transform: rotate(-3600deg) !important; 64 | } 65 | 66 | html{ 67 | margin: 0; 68 | font-family: 'Dosis', sans-serif; 69 | font-weight: 300; 70 | -webkit-user-select: none; /* Safari 3.1+ */ 71 | -moz-user-select: none; /* Firefox 2+ */ 72 | -ms-user-select: none; /* IE 10+ */ 73 | user-select: none; /* Standard syntax */ 74 | } 75 | 76 | .bg-purple{ 77 | background: radial-gradient(at 50% bottom, #1b264d 5%, #000f2b 95%) ; 78 | background-repeat: repeat-x; 79 | background-size:cover; 80 | background-position:center; 81 | overflow: hidden; 82 | min-height:100vh; 83 | display: flex; 84 | justify-content: center; 85 | align-items: center; 86 | } 87 | 88 | .custom-navbar{ 89 | padding-top: 15px; 90 | } 91 | 92 | .brand-logo{ 93 | margin-left: 25px; 94 | margin-top: 5px; 95 | display: inline-block; 96 | } 97 | 98 | .navbar-links{ 99 | display: inline-block; 100 | margin-right: 15px; 101 | text-transform: uppercase; 102 | 103 | 104 | } 105 | 106 | li a { 107 | display: block; 108 | color: white; 109 | text-align: center; 110 | text-decoration: none; 111 | letter-spacing : 2px; 112 | font-size: 12px; 113 | 114 | -webkit-transition: all 0.3s ease-in; 115 | -moz-transition: all 0.3s ease-in; 116 | -ms-transition: all 0.3s ease-in; 117 | -o-transition: all 0.3s ease-in; 118 | transition: all 0.3s ease-in; 119 | } 120 | 121 | li a:hover { 122 | color: #ffcb39; 123 | } 124 | 125 | .btn-request{ 126 | padding: 10px 25px; 127 | border: 1px solid #FFCB39; 128 | border-radius: 100px; 129 | font-weight: 400; 130 | } 131 | 132 | .btn-request:hover{ 133 | background-color: #FFCB39; 134 | color: #fff; 135 | transform: scale(1.05); 136 | box-shadow: 0px 20px 20px rgba(0,0,0,0.1); 137 | } 138 | 139 | .btn-go-home{ 140 | position: relative; 141 | z-index: 200; 142 | margin: 15px auto; 143 | width: 100px; 144 | padding: 10px 15px; 145 | background-color: #FFCB39; 146 | border: 1px solid #FFCB39; 147 | border-radius: 100px; 148 | font-weight: 600; 149 | display: block; 150 | color: black; 151 | text-align: center; 152 | text-decoration: none; 153 | letter-spacing : 2px; 154 | font-size: 11px; 155 | 156 | -webkit-transition: all 0.1s ease-in; 157 | -moz-transition: all 0.1s ease-in; 158 | -ms-transition: all 0.3s ease-in; 159 | -o-transition: all 0.3s ease-in; 160 | transition: all 0.1s ease-in; 161 | } 162 | 163 | .btn-go-home:hover{ 164 | background-color: #FFCB39; 165 | color: #fff; 166 | transform: scale(1.1); 167 | cursor: pointer; 168 | box-shadow: 0px 20px 20px rgba(0,0,0,0.1); 169 | } 170 | 171 | .central-body{ 172 | /* width: 100%;*/ 173 | padding: 17% 5% 10% 5%; 174 | text-align: center; 175 | display: flex; 176 | flex-direction: column; 177 | justify-content: center; 178 | align-items: center; 179 | } 180 | 181 | .objects img{ 182 | z-index: 90; 183 | pointer-events: none; 184 | } 185 | 186 | .object_rocket{ 187 | z-index: 95; 188 | position: absolute; 189 | transform: translateX(-50px); 190 | top: 75%; 191 | pointer-events: none; 192 | animation: rocket-movement 200s linear infinite both running; 193 | } 194 | 195 | .object_earth{ 196 | position: absolute; 197 | top: 20%; 198 | left: 15%; 199 | z-index: 90; 200 | animation: spin-earth 100s infinite linear both; 201 | } 202 | 203 | .object_moon{ 204 | position: absolute; 205 | top: 20%; 206 | left: 15%; 207 | 208 | transform: rotate(45deg); 209 | transition: transform ease-in 999999s; 210 | animation: moon-movement 65s linear infinite both running; 211 | } 212 | 213 | 214 | .object_astronaut{ 215 | animation: rotate-astronaut 200s infinite linear both alternate; 216 | } 217 | 218 | .box_astronaut{ 219 | z-index: 110 !important; 220 | position: absolute; 221 | top: 60%; 222 | right: 20%; 223 | will-change: transform; 224 | animation: move-astronaut 50s infinite linear both alternate; 225 | } 226 | 227 | .image-404{ 228 | position: relative; 229 | z-index: 100; 230 | pointer-events: none; 231 | } 232 | 233 | .stars{ 234 | background: url(../../assets/NotFound/overlay_stars.svg); 235 | background-repeat: repeat; 236 | background-size: contain; 237 | background-position: left top; 238 | } 239 | 240 | .glowing_stars .star{ 241 | position: absolute; 242 | border-radius: 100%; 243 | background-color: #fff; 244 | width: 3px; 245 | height: 3px; 246 | opacity: 0.3; 247 | will-change: opacity; 248 | } 249 | 250 | .glowing_stars .star:nth-child(1){ 251 | top: 80%; 252 | left: 25%; 253 | animation: glow-star 2s infinite ease-in-out alternate 1s; 254 | } 255 | .glowing_stars .star:nth-child(2){ 256 | top: 20%; 257 | left: 40%; 258 | animation: glow-star 2s infinite ease-in-out alternate 3s; 259 | } 260 | .glowing_stars .star:nth-child(3){ 261 | top: 25%; 262 | left: 25%; 263 | animation: glow-star 2s infinite ease-in-out alternate 5s; 264 | } 265 | .glowing_stars .star:nth-child(4){ 266 | top: 75%; 267 | left: 80%; 268 | animation: glow-star 2s infinite ease-in-out alternate 7s; 269 | } 270 | .glowing_stars .star:nth-child(5){ 271 | top: 90%; 272 | left: 50%; 273 | animation: glow-star 2s infinite ease-in-out alternate 9s; 274 | } 275 | 276 | @media only screen and (max-width: 600px){ 277 | .navbar-links{ 278 | display: none; 279 | } 280 | 281 | .custom-navbar{ 282 | text-align: center; 283 | } 284 | 285 | .brand-logo img{ 286 | width: 120px; 287 | } 288 | 289 | .box_astronaut{ 290 | top: 70%; 291 | } 292 | 293 | .central-body{ 294 | padding-top: 25%; 295 | } 296 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import './index.css'; 5 | import App from './App'; 6 | import serviceWorkerRegistration from './serviceWorkerReg'; 7 | import reportWebVitals from './reportWebVitals'; 8 | 9 | const root = ReactDOM.createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want your app to work offline and load faster, you can change 19 | // unregister() to register() below. Note this comes with some pitfalls. 20 | // Learn more about service workers: https://cra.link/PWA 21 | serviceWorkerRegistration(); 22 | 23 | // If you want to start measuring performance in your app, pass a function 24 | // to log results (for example: reportWebVitals(console.log)) 25 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 26 | reportWebVitals(); 27 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React_PWA", 3 | "name": "React PWA Boilerplate", 4 | "author":"Srikanth Lakshminarayan", 5 | "icons": [ 6 | { 7 | "src": "favicon.ico", 8 | "sizes": "64x64 32x32 24x24 16x16", 9 | "type": "image/x-icon" 10 | }, 11 | { 12 | "src": "logo192.png", 13 | "type": "image/png", 14 | "sizes": "192x192" 15 | }, 16 | { 17 | "src": "logo512.png", 18 | "type": "image/png", 19 | "sizes": "512x512" 20 | } 21 | ], 22 | "start_url": ".", 23 | "display": "standalone", 24 | "theme_color": "#000000", 25 | "background_color": "#ffffff" 26 | } 27 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ 4 | getCLS, getFID, getFCP, getLCP, getTTFB 5 | }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-restricted-globals */ 2 | 3 | // This service worker can be customized! 4 | // See https://developers.google.com/web/tools/workbox/modules 5 | // for the list of available Workbox modules, or add any other 6 | // code you'd like. 7 | // You can also remove this file if you'd prefer not to use a 8 | // service worker, and the Workbox build step will be skipped. 9 | 10 | import { clientsClaim } from 'workbox-core'; 11 | import { ExpirationPlugin } from 'workbox-expiration'; 12 | import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; 13 | import { registerRoute } from 'workbox-routing'; 14 | import { StaleWhileRevalidate } from 'workbox-strategies'; 15 | 16 | clientsClaim(); 17 | 18 | // Precache all of the assets generated by your build process. 19 | // Their URLs are injected into the manifest variable below. 20 | // This variable must be present somewhere in your service worker file, 21 | // even if you decide not to use precaching. See https://cra.link/PWA 22 | precacheAndRoute(self.__WB_MANIFEST); 23 | 24 | // Set up App Shell-style routing, so that all navigation requests 25 | // are fulfilled with your index.html shell. Learn more at 26 | // https://developers.google.com/web/fundamentals/architecture/app-shell 27 | // eslint-disable-next-line prefer-regex-literals 28 | const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$'); 29 | registerRoute( 30 | // Return false to exempt requests from being fulfilled by index.html. 31 | ({ request, url }) => { 32 | // If this isn't a navigation, skip. 33 | if (request.mode !== 'navigate') { 34 | return false; 35 | } // If this is a URL that starts with /_, skip. 36 | 37 | if (url.pathname.startsWith('/_')) { 38 | return false; 39 | } // If this looks like a URL for a resource, because it contains // a file extension, skip. 40 | 41 | if (url.pathname.match(fileExtensionRegexp)) { 42 | return false; 43 | } // Return true to signal that we want to use the handler. 44 | 45 | return true; 46 | }, 47 | createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`) 48 | ); 49 | 50 | // An example runtime caching route for requests that aren't handled by the 51 | // precache, in this case same-origin .png requests like those from in public/ 52 | registerRoute( 53 | // Add in any other file extensions or routing criteria as needed. 54 | ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst. 55 | new StaleWhileRevalidate({ 56 | cacheName: 'images', 57 | plugins: [ 58 | // Ensure that once this runtime cache reaches a maximum size the 59 | // least-recently used images are removed. 60 | new ExpirationPlugin({ maxEntries: 50 }) 61 | ] 62 | }) 63 | ); 64 | 65 | // This allows the web app to trigger skipWaiting via 66 | // registration.waiting.postMessage({type: 'SKIP_WAITING'}) 67 | self.addEventListener('message', (event) => { 68 | if (event.data && event.data.type === 'SKIP_WAITING') { 69 | self.skipWaiting(); 70 | } 71 | }); 72 | 73 | // Any other custom service worker logic can go here. 74 | -------------------------------------------------------------------------------- /src/serviceWorkerReg.js: -------------------------------------------------------------------------------- 1 | import { Workbox } from "workbox-window"; 2 | 3 | export default function registerServiceWorker() { 4 | if (process.env.NODE_ENV !== 'production') return; 5 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 6 | const wb = new Workbox('sw.js'); 7 | 8 | wb.addEventListener('install', event => { 9 | if (event.isUpdate) { 10 | // eslint-disable-next-line no-restricted-globals 11 | if (confirm('New app update is available, click ok to refresh')) { 12 | window.location.reload(); 13 | } 14 | } 15 | }) 16 | wb.register(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/serviceWorkerRegistration.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://cra.link/PWA 12 | /* eslint-disable */ 13 | 14 | const isLocalhost = Boolean( 15 | window.location.hostname === 'localhost' 16 | // [::1] is the IPv6 localhost address. 17 | || window.location.hostname === '[::1]' 18 | // 127.0.0.0/8 are considered localhost for IPv4. 19 | || window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) 20 | ); 21 | 22 | export function register(config) { 23 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 24 | // The URL constructor is available in all browsers that support SW. 25 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 26 | if (publicUrl.origin !== window.location.origin) { 27 | // Our service worker won't work if PUBLIC_URL is on a different origin 28 | // from what our page is served on. This might happen if a CDN is used to 29 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 30 | return; 31 | } 32 | 33 | window.addEventListener('load', () => { 34 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 35 | 36 | if (isLocalhost) { 37 | // This is running on localhost. Let's check if a service worker still exists or not. 38 | checkValidServiceWorker(swUrl, config); 39 | 40 | // Add some additional logging to localhost, pointing developers to the 41 | // service worker/PWA documentation. 42 | navigator.serviceWorker.ready.then(() => { 43 | console.log( 44 | 'This web app is being served cache-first by a service ' 45 | + 'worker. To learn more, visit https://cra.link/PWA' 46 | ); 47 | }); 48 | } else { 49 | // Is not localhost. Just register service worker 50 | registerValidSW(swUrl, config); 51 | } 52 | }); 53 | } 54 | } 55 | 56 | function registerValidSW(swUrl, config) { 57 | navigator.serviceWorker 58 | .register(swUrl) 59 | .then((registration) => { 60 | registration.onupdatefound = () => { 61 | const installingWorker = registration.installing; 62 | if (installingWorker == null) { 63 | return; 64 | } 65 | installingWorker.onstatechange = () => { 66 | if (installingWorker.state === 'installed') { 67 | if (navigator.serviceWorker.controller) { 68 | // At this point, the updated precached content has been fetched, 69 | // but the previous service worker will still serve the older 70 | // content until all client tabs are closed. 71 | console.log( 72 | 'New content is available and will be used when all ' 73 | + 'tabs for this page are closed. See https://cra.link/PWA.' 74 | ); 75 | 76 | // Execute callback 77 | if (config && config.onUpdate) { 78 | config.onUpdate(registration); 79 | } 80 | } else { 81 | // At this point, everything has been precached. 82 | // It's the perfect time to display a 83 | // "Content is cached for offline use." message. 84 | console.log('Content is cached for offline use.'); 85 | 86 | // Execute callback 87 | if (config && config.onSuccess) { 88 | config.onSuccess(registration); 89 | } 90 | } 91 | } 92 | }; 93 | }; 94 | }) 95 | .catch((error) => { 96 | console.error('Error during service worker registration:', error); 97 | }); 98 | } 99 | 100 | function checkValidServiceWorker(swUrl, config) { 101 | // Check if the service worker can be found. If it can't reload the page. 102 | fetch(swUrl, { 103 | headers: { 'Service-Worker': 'script' } 104 | }) 105 | .then((response) => { 106 | // Ensure service worker exists, and that we really are getting a JS file. 107 | const contentType = response.headers.get('content-type'); 108 | if ( 109 | response.status === 404 110 | || (contentType != null && contentType.indexOf('javascript') === -1) 111 | ) { 112 | // No service worker found. Probably a different app. Reload the page. 113 | navigator.serviceWorker.ready.then((registration) => { 114 | registration.unregister().then(() => { 115 | window.location.reload(); 116 | }); 117 | }); 118 | } else { 119 | // Service worker found. Proceed as normal. 120 | registerValidSW(swUrl, config); 121 | } 122 | }) 123 | .catch(() => { 124 | console.log('No internet connection found. App is running in offline mode.'); 125 | }); 126 | } 127 | 128 | export function unregister() { 129 | if ('serviceWorker' in navigator) { 130 | navigator.serviceWorker.ready 131 | .then((registration) => { 132 | registration.unregister(); 133 | }) 134 | .catch((error) => { 135 | console.error(error.message); 136 | }); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /src/services/Client.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | // import { useNavigate } from 'react-router-dom'; 3 | // import { CheckExpiry } from './TokenExpiry'; 4 | // import * as notifications from '../store/notifyActions'; 5 | 6 | const API_URL = process.env.REACT_APP_ENDPOINT_URL; 7 | 8 | const Client = axios.create({ 9 | baseURL: API_URL, 10 | headers: { 11 | Accept: 'application/json' 12 | }, 13 | timeout: 300000 14 | }); 15 | 16 | Client.interceptors.request.use( 17 | config => { 18 | const accessToken = sessionStorage.getItem('token'); 19 | console.log("accessToken:", accessToken); 20 | if (accessToken) { 21 | config.headers.authorization = `Bearer ${sessionStorage.getItem('token')}`; 22 | } 23 | return config; 24 | }, 25 | error => { 26 | console.log("error: ", error); 27 | Promise.reject(error.response || error.message); 28 | } 29 | ); 30 | 31 | Client.interceptors.response.use( 32 | (response) => { 33 | console.log("response:", response); 34 | return response; 35 | }, 36 | (error) => { 37 | console.log("error in intercepter: ", error); 38 | if (error.response.status === 401) { 39 | console.log("erorr in 401") 40 | // notifications.addNotification({ message: 'Unauthorized Access', type: 'error' }); 41 | window.location.href = '/'; 42 | } 43 | return Promise.reject(error); 44 | } 45 | ); 46 | 47 | // const mapDispatchToProps = dispatch => 48 | // bindActionCreators( 49 | // { 50 | // ...notifications 51 | // }, 52 | // dispatch 53 | // ); 54 | 55 | export default Client; -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/splash-screen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sample React App 6 | 142 | 143 | 144 | 145 |
146 | 147 |
148 |
149 |
150 |

Launching App...

151 |
152 | 153 | 154 | -------------------------------------------------------------------------------- /src/src-sw.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-restricted-globals */ 2 | import { precacheAndRoute } from 'workbox-precaching'; 3 | import { clientsClaim } from 'workbox-core'; 4 | 5 | precacheAndRoute(self.__WB_MANIFEST); 6 | 7 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 8 | 9 | // import { PrecacheRoute } from 'workbox-precaching'; 10 | // This clientsClaim() should be at the top level 11 | // of your service worker, not inside of, e.g., 12 | // an event handler. 13 | clientsClaim(); 14 | 15 | self.skipWaiting(); 16 | } -------------------------------------------------------------------------------- /src/store/aboutSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const initialState = { 4 | data: {}, 5 | sampleArray: [] 6 | }; 7 | 8 | export const aboutSlice = createSlice({ 9 | name: 'about', 10 | initialState, 11 | reducers: { 12 | setData: (state, action) => { 13 | const { user } = action.payload; 14 | state.user = user; 15 | } 16 | } 17 | }); 18 | 19 | // eslint-disable-next-line import/no-unused-modules 20 | export const { setData } = aboutSlice.actions; -------------------------------------------------------------------------------- /src/store/homeSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const initialState = { 4 | data: [] 5 | }; 6 | 7 | export const homeSlice = createSlice({ 8 | name: 'home', 9 | initialState, 10 | reducers: { 11 | setData: (state, action) => { 12 | const { solver } = action?.payload; 13 | state?.data?.push(solver); 14 | } 15 | } 16 | }); 17 | 18 | export const { setData } = homeSlice.actions; -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import rootReducer from './reducers'; 3 | 4 | const store = configureStore({ 5 | reducer: rootReducer, 6 | middleware: getDefaultMiddleware => 7 | getDefaultMiddleware({ 8 | serializableCheck: false 9 | }) 10 | }); 11 | 12 | export default store; -------------------------------------------------------------------------------- /src/store/reducers.js: -------------------------------------------------------------------------------- 1 | import { aboutSlice } from './aboutSlice'; 2 | import { homeSlice } from './homeSlice'; 3 | 4 | const reducers = { 5 | about: aboutSlice.reducer, 6 | home: homeSlice.reducer 7 | }; 8 | 9 | export default reducers; --------------------------------------------------------------------------------