Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

infra: Dev uses a front-end framework #1

Closed
2 tasks done
toshify opened this issue Feb 18, 2020 · 1 comment · Fixed by #13
Closed
2 tasks done

infra: Dev uses a front-end framework #1

toshify opened this issue Feb 18, 2020 · 1 comment · Fixed by #13
Assignees
@toshify
Labels
front end infrastructure

Comments

@toshify
Copy link
Collaborator

toshify commented Feb 18, 2020 •
edited
Loading

We're building a Progressive Web App (PWA) Single Page Application (SPA) to meet two major goals:

  • smooth access
    • ease of discovery - easy to share link
    • low barrier to begin to use - just click link
    • ease of installation - no app store
    • allow offline
  • iterate fast

To simplify development, we use a front-end framework. This issue tracks trialing vue.js and react.js and settling on a final framework for moving forward.

Requires

  • Prototypes deployment of vue.js PWA
  • Prototypes deployment of react.js PWA
@toshify toshify self-assigned this Feb 18, 2020
@toshify toshify added this to the i20-02-18-Infrastructure milestone Feb 18, 2020
@toshify toshify linked a pull request Mar 26, 2020 that will close this issue
feat: add startup splash, instruction overlay, tech foundation #13
Merged
@toshify
Copy link
Collaborator Author

toshify commented May 7, 2020

I've eventually settled into a flow with VueJS. I may come back to React to recreate the functionality from the Vue app, but for now, I've settled on VueJS.

@toshify toshify mentioned this issue May 21, 2020
Merged
toshify pushed a commit that referenced this issue May 21, 2020
@toshify
[#8] Adds splash screen, instructions overlay, technology foundation
1ad9aae 
PR #8
Issue #1, #2, #6, #8

✔️ **All tests passing!**

- adds inital splash screen on load both in browser and in PWA from
  phone's start screen.
- adds splash animation inline in index.html awaiting App component
- adds proper TypeScrip formatting
- adds linting
- generates icons and splash with pwa-assets-generator
- adds delay to mount if time since navStart>2000
- configures splash delay to only delay in prod
- aligns ios splash with loader ani
- adds vuetify material design and get instructions graphic
- adds vuetify svg icons as well as font icons
- configures vuetify to use mdiSvg
- configures vuetify to make custom properties available for css
- updates Home to use vuetify for layout
- moves push to s3 script into packages.json scripts section
- gets eslint in vscode working (see .eslinrc.js)
- adds html overflow-y auto to index to avoid scroll bar when NOT on
mobile
- adds functional navigation bar
- adds typescript shims for handling svg files as objects
- updates @vue/cli and plugins to latest
- adds yarn versioning and local yarn
- adds workspace cfg and starts trigger on instructions button
- adds amplify cfg at root

All tests passing!
toshify added a commit that referenced this issue May 14, 2021
@toshify
[#8] Adds splash screen, instructions overlay, technology foundation
b4805bf 
PR #8
Issue #1, #2, #6, #8

✔️ **All tests passing!**

- adds inital splash screen on load both in browser and in PWA from
  phone's start screen.
- adds splash animation inline in index.html awaiting App component
- adds proper TypeScrip formatting
- adds linting
- generates icons and splash with pwa-assets-generator
- adds delay to mount if time since navStart>2000
- configures splash delay to only delay in prod
- aligns ios splash with loader ani
- adds vuetify material design and get instructions graphic
- adds vuetify svg icons as well as font icons
- configures vuetify to use mdiSvg
- configures vuetify to make custom properties available for css
- updates Home to use vuetify for layout
- moves push to s3 script into packages.json scripts section
- gets eslint in vscode working (see .eslinrc.js)
- adds html overflow-y auto to index to avoid scroll bar when NOT on
mobile
- adds functional navigation bar
- adds typescript shims for handling svg files as objects
- updates @vue/cli and plugins to latest
- adds yarn versioning and local yarn
- adds workspace cfg and starts trigger on instructions button
- adds amplify cfg at root

All tests passing!
@toshify toshify changed the title Dev uses a front-end framework infra: Dev uses a front-end framework May 21, 2021
toshify added a commit that referenced this issue Jun 27, 2021
@toshify
feat: Add splash screen, instructions, tech foundation (#8)
391e469 
Because the learner should know that the app is loading and not frozen,
and easily find instructions when needed,
this commit will:
  - add inital splash screen on load in both browser and PWA
  - add splash animation inline in index.html awaiting App component
  - add barebones instructions overlay
  - add functional navigation bar
  - remove unnecessary scroll bar when NOT on mobile
  - update icons and splash graphics

For the benefit of developer efficiency, this commit will:
  - fix linting
  - use Vuetify.js for layout
  - update @vue/cli and plugins to latest
  - add amplify cfg to Vue.js project
  - move 'push to s3' script into packages.json scripts section
  - move dev wiki to separate repo
  - add yarn versioning and local yarn

Closes #1, #2, #6, #8

Signed-off-by: toshify <4579559+toshify@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@toshify toshify

Labels
front end infrastructure
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add startup splash, instruction overlay, tech foundation nodepa/seedlingo
1 participant
@toshify