Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coding-nerfilio/mindfulness
https://github.com/coding-nerfilio/mindfulness
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/coding-nerfilio/mindfulness
- Owner: coding-nerfilio
- Created: 2024-06-10T01:26:38.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-06-10T01:44:53.000Z (5 months ago)
- Last Synced: 2024-06-10T02:42:43.171Z (5 months ago)
- Language: TypeScript
- Size: 374 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔥 Firebase PWA Starter
This is an opinionated Progressive Web App (PWA) starter. This template focuses on emulating a seamless native mobile experience, ensuring there's no unnecessary overscroll. Get ready to build powerful PWAs with a touch of elegance!
## Tech Stack
React PWA with Material UI and Firebase
## Preview
No overscroll or mismatching status bars, looks just like a native mobile application! 😊
## Getting Started
### Local Development
Follow these steps to set up the project for local development:
1. Run the command to spin up the PWA starter:
```bash
npx create-react-app my-app --template cra-template-firebase-pwa-starter
```
or if you are already in a new directory for your project
```bash
npx create-react-app . --template cra-template-firebase-pwa-starter
```
This also installs all the necessary dependencies to get you started.
2. Start the development server:
```bash
npm start
```
3. Congratulations! Now you have a working PWA. Now if you want to deploy your PWA on Firebase, please follow the guide in the next few sections.
## Optional
### Firebase Setup
First setup your project in Firebase
1. Create a Firebase account
2. Go to your Firebase Console
3. Create a new project. [guide]
4. Register your app [guide]
### Deployment
Please make sure you have a firebase project setup.
To deploy your application to a staging environment and access it on your mobile device, follow these steps.
Make sure you have Firebase CLI installed
```bash
npm install -g firebase-tools
```
If you haven't already, log in to Firebase and initialize it in your repository.
For a step-by-step deployment guide, check out this article
Once initialization is completed, you can use the following scripts for deployment:
### `deploy:dev`
Deploys to the Firebase `development` environment for preview.
### `deploy:prod`
Deploys to the Firebase `live` production environment.
### `deploy:list`
Shows a list of running environments.
## Building New Pages
When creating new pages, you'll should create the page components in the `src/views` folder. These components serve as the main content body.
The parent container uses a class called `PageContainer`, which enables overscroll, touch action, and overflow.
```tsx
const AboutPage = () => {
return (
// Child elements and components here
)
}
export default AboutPage
```
Take a look at the `src/views/Home` component for reference.
For style customizations, check out `src/App.css`.