Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bogas04/pickily-pwa
https://github.com/bogas04/pickily-pwa
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bogas04/pickily-pwa
- Owner: bogas04
- Created: 2021-12-03T11:38:11.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T11:33:28.000Z (over 2 years ago)
- Last Synced: 2023-03-23T05:26:51.587Z (almost 2 years ago)
- Language: TypeScript
- Homepage: pickily-pwa.vercel.app
- Size: 19.7 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My thoughts on making this PWA PoC
- Some of the features of react-router/remix are essential in building app like interfaces where the back button actually closes a modal/dialog, for example.
- framer-motion makes shared element transitions quite simple, but I'm not too sure about its runtime cost and some of the bugs I'm facing (pretty sure I'm using it incorrectly)
- While API response has been mocked, 100ms delay was added to simulate a somewhat ideal backend
- vercel provides excellent CD experience with preview links for branches & PRs.
- deployments through vercel go through in under a minute
- interactions do take quite a bit of time on an old 7xx Snapdragon phone, I notice it a lot during route transitions
- Maybe the way I use framer-motion in [ScreenTransition](./app/components/ScreenTransition.tsx) isn't quite performant.
- Mounting and unmounting large DOM trees is surely a bottleneck. Deferred Rendering helps but ideally we'd like to wait for Concurrent Rendering from react team
- bubblewrap & PWABuilder helped in making the PWA within 1 hour
- there's a bug with PWABuilder generated apk where killing default browser (if it's not Chrome) from recent apps causes app to freeze at splash screen
- Development time for making all the widgets, pages, server, deployment etc was extremely low. Took me a sunday+monday even if I used a new-ish framework around react. I think we can get much more web devs > RN devs > Flutter devs with similar proficiency.
- Remix's dev env runs in 325ms. The feedback loop is very quick compared to an emulator.
- vercel.app is a free-tier hosting service so it may not be the best one when it comes to Time To First Byte
---
# Welcome to Remix!
- [Remix Docs](https://remix.run/docs)
## Deployment
After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
```sh
npm i -g vercel
vercel
```
It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
## Development
To run your Remix app locally, make sure your project's local dependencies are installed:
```sh
npm install
```
Afterwards, start the Remix development server like so:
```sh
npm run dev
```
Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.