Skip to content

A boilerplate for Progresive web app built using create-react-app and configured with redux, eslint, precommits and other best practices

License

Notifications You must be signed in to change notification settings

Srikanth-PSIOG/React-PWA-Redux-boilerplate

 
 

Repository files navigation

React-PWA-Boilerplate


Description

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.

Features

  • React framework for modern web development

  • Progressive Web App (PWA) support with pre-configured offline functionality

  • Service worker integration for seamless caching and improved performance

  • Workbox integration with webpack for faster build and smoother development experience

  • Addition of ESLint and Pre-commits for better code quality

  • Integration of redux-toolkit for state management

  • Pre-configured application routing with the addition of an animated 404 Not Found page

  • Usage of interceptors for handling API calls

Tech Used

React Static Badge JavaScript HTML5 MUI Static Badge NPM React Router Static Badge

Installation Guide

  1. Clone the repository
git clone https://github.com/Srikanth-LSharma/React-PWA-Redux-boilerplate.git
  1. Change the working directory
cd React-PWA-Redux-boilerplate
  1. Install dependencies
npm install
  1. Run the app
npm start
  1. To serve the app on production or build mode
npm run serve

🌟 You are all set! 🌟

Repository structure

`-- config`  ............................... 1. Configuration files, for tools like webpack.
|       |-- webpack.common.js
`-- public`  ............................... 2. Directory containing publicly accessible files, like index.html.
|       |-- index.html 
`-- src`
|       `-- assets` ........................ 3. Resources used in the project, such as images or fonts.
|       |   `-- NotFound` .................. 4. Specific asset directory for resources related to specific pages.
|       |       |-- 404.svg
|       `-- components` .................... 5. Reusable UI components
|       |   `-- withMediaQuery ............. 6. Component or utility related to media queries and other custom hooks can be included inside of /components folder.
|       |       |-- index.js
|       `-- containers` .................... 7. Components that represent entire pages or larger parts of the UI.
|       |   `-- pageNotFound`
|       |       |-- index.js
|       |       |-- styles.css
|       |   |-- Home.js
|       `-- store` ......................... 8. Files related to state management, such as Redux/Toolkit
|       |   |-- index.js 
|       |   |-- reducers.js 
|       |-- App.js 
|       |-- index.js
|       |-- Routes.js ...................... 9. File defining application routing.
|       |-- src-sw.js ...................... 10. Service worker file for progressive web app functionality.
|       |-- serviceWorkerRegistration.js
|-- env.development ........................ 11. Environment-specific configuration file for development (can add more of these files for other environments ex: env.prod)
|-- package.json ........................... 12. File defining project dependencies and scripts.
|-- README.md
|-- CONTRIBUTING.md
|-- CODE_OF_CONDUCT.md
|-- LICENSE

Contributing

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.

Feel free to suggest a new feature or contribute to the project by creating a pull request and please report issues if you come across any.

We have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to this project.

Good First Issues

To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started.

License

This project is MIT licensed.

About

A boilerplate for Progresive web app built using create-react-app and configured with redux, eslint, precommits and other best practices

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.6%
  • CSS 18.9%
  • HTML 12.3%
  • Shell 0.2%