How can I keep infrastructure the same across both projects?

Bulletproof

- [x] Copy over plop
- [x] set proper repo
- [x] add MSW from [react-query-auth-demo - CodeSandbox](https://codesandbox.io/s/react-query-auth-demo-fvvvt?file=/src/index.tsx) to get login working
	> It was already in there, just not working
- [ ] evaluate Cypress vs Jest
- [x] use [plopjs](https://plopjs.com/) with [bulletproof example](https://github.com/alan2207/bulletproof-react/blob/ff8308ffe773782937e96a1883185eccebfd931e/generators/component/index.js) to generate features
- [x] use [plopjs](https://plopjs.com/) with [bulletproof example](https://github.com/alan2207/bulletproof-react/blob/ff8308ffe773782937e96a1883185eccebfd931e/generators/component/index.js) to generate slice
- [x] use [plopjs](https://plopjs.com/) with [bulletproof example](https://github.com/alan2207/bulletproof-react/blob/ff8308ffe773782937e96a1883185eccebfd931e/generators/component/index.js) to generate component
- [ ] port over my changes from Mapware
- [ ] port over my changes from Points

Mapware

- [ ] #fetch configure endpoint
- [ ] #fetch create the project specific fetch function for codegen
- [ ] #fetch integrate graphql generation
- [ ] create top level routing work / login
- [ ] move all routing to `features`
- [ ] pull in google analytics (and leave a place for our better stats)
- [ ] breadcrumbs nav
- [ ] share link

Bulletproof Infrastructure

for each directory/file- write up what is different and the tasks i need to move it over to my project

• /.github

• /.husky

• /cypress

  • integration vs e2e - "integrationFolder": "cypress/e2e",
  • how to record test
  • create tests
  • add dashboard
    • what constitutes a test result (that would get charged for) is it each .spec is it each .it is it succeful runs
  • how does dashboard work with Github
  • add visual regression
  • cypress specific eslint.js
  • what's "fileServerFolder": "dist",
  • what does testing-library provide

• coverage

• /public

  • copy files
  • create replacement files
  • document instructions to change them

• postcssrc.json

• .stylelintrc.json

• index.html

• package.json - mostly scripts and lint-staged

• tailwind.config.js

• vercel.json

• vite.config.ts

• add GitHub - tailwindlabs/tailwindcss-forms

• how to add lighthouse measurements to github

• create constants and utils

• move all tests to their proper /__test__

• create doc explaining feature, routing, and index.jss

• use direnv or something to make proper .env in accordance with what vite expects

• try to add and test with GQL https://mswjs.io/docs/api/graphql/query https://mswjs.io/docs/getting-started/mocks/graphql-api https://www.btw.so/open-source-alternatives/auth0-alternatives

• add sentry

UX

• Add Tailwind
• Create Composed Tailwind Classes
• pull in basic tailwind for a better style
• Pick Tailwind Theme
• Pick Component Library (Presentation | Material Tailwind by Creative Tim ?) Tailwind UI - Official Tailwind CSS Components
• does tailwind have vertical rhythm
• celebration on click

Performance

• add web-vitals
  • https://create-react-app.dev/docs/measuring-performance/
  • what do these numbers mean?
• use https://github.com/wtchnm/Vitamin for Lighthouse
• how to identify critical css
• poke julian about that whole HTTP/2 file serving

Points

Backlog

• https://github.com/react-tags/react-tags
• pick GitHub - yury-dymov/react-autocomplete-input: Autocomplete input field for React or https://github.com/webscopeio/react-textarea-autocomplete or GitHub - signavio/react-mentions: @mention people in a textarea
• create slice
• view list
  • remove item
  • edit item
  • add single item
  • promote item
  • add bulk
  • use liqe to sort/filter
• offline
• add redux history
• quick state editor https://www.npmjs.com/package/jsoneditor-react
• add daily tasks
• login https://firebase.google.com/docs/auth/web/firebaseui
  • points how to code up deadlines
• why does removing something from the list lock scrolling
• clear input after submit
• redux history
• wire in redux dev tools

Permissions

• Building RBAC in Node - DEV Community
• @casl/ability - npm
• accesscontrol - npm
• acl - npm
• https://www.npmjs.com/package/easy-rbac
• jwt-rbac - npm
• https://www.npmjs.com/package/rbac
• nestjs-rbac - npm
• Role based access control in React-Redux apps - DEV Community

CICD

• raise coverage limit
• report coverage
• do I want to add snyk to the github workflow https://docs.snyk.io/features/integrations/ci-cd-integrations/github-actions-integration
• have a console.log that outputs the last commit id so I can know if I'm really looking at the last change
• how to convert my CI/CD to apply for all branches
• get push notifications from github if pipeline fails
• add eslint to pr req
• use build:prod for deployments
• how are React-Query's PRs setup?
• try adding try adding this to points https://app.ponicode.com/turbo-cov/projects

Security

• can I set limits for firestore
• Firebase Security
  • auth based security
  • javascript - Is it safe to expose Firebase apiKey to the public? - Stack Overflow
  • how do Firebase say to secure my keys
  • How to secure your Firebase project even when your API key is publicly available | by Devesu | Medium
  • How to keep your Firebase project safe and secure from everyone - DEV Community
  • Hiding API Keys with Environment Variables
  • does dotenv secure anything or just make it easier
  • how does GitHub - prescottprue/firething secure env
  • Dotenv Action · Actions · GitHub Marketplace · GitHub
  • how does bulletproof-react secure it's api
  • environment variables - How do I use an env file with GitHub Actions? - Stack Overflow
• env based keys

Confidence

• Get Unit tests working
• How to intercept Firestore prescottprue/cypress-firebase
• Easy Error Boundries
• Port Reacts Error Layer
• Add Sentry
• Chaos Frontend Toolkit - Tools to break your web apps and find ways to improve them | Product Hunt

V2

• define types as GQL Scheme
• How to mutate
• Create BE
• Convert to React Native
• create composable Task reducer

Reading/Planning

• GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
• GitHub - wtchnm/Vitamin: Opinionated Vite starter template.
• An Introduction to GraphQL | Tania Rascia
• How and Why You Should Store React UI State in the URL
• Tao of React - Software Design, Architecture & Best Practices | Alex Kondov - Software Engineer
• React Architecture: How to Structure and Organize a React Application | Tania Rascia
• React folder structure for enterprise level applications
• 📝 my goal for personal points is to do away with due and bear

Toys

• try copilot-docs/gettingstarted.md at main · github/copilot-docs · GitHub
• give Use WebWorkers in Vite with comlink! a try when I need a web worker
• Introduction to Remix
• NLP
• https://www.chromatic.com/?utm_source=ui_dev_bytes&utm_medium=sponsorship&utm_campaign=q1_2022&ck_subscriber_id=478727104

---

• walk through https://www.twilio.com/blog/2018/06/installable-web-apps-practical-introduction-progressive-web-apps.html
• create prod & dev data (with a "sync" button)
• sort history by done date
• Deploy
  • convert all firebase config to env
  • use https://vercel.com/new/import?s=https%3A%2F%2Fgithub.com%2FeasilyBaffled%2Fpoints-streaks for first deploy
  • how to tie vercel's new with github actions
  • might be good https://aaronfrancis.com/2021/the-perfect-vercel-github-actions-deployment-pipeline
• grids (or flex wrap) for points

The longer you wait to add infra like eslint, coverage, responsive, the harder it is to add So when coding features hits a lul I should take the opportunity to add cov

• reduce vite logging
• Could Not Complete: update reporting to only show broken tests
• get tests to pass
• Cypress Doesn't have an option: how to have cy watch and notify locally
• Cy GitHub Actions
• CICD
  • why is my pipeline breaking
  • the pipeline should install and/or cache build
  • lint, test, and so on
  • if all things pass properly deploy anew
• create prod data
• create PROD switch for build
• eslint
  • add eslint
  • fix eslint issues
  • add the no-import rule from bulletproof
• unit tests
  • collect coverage
  • error on coverage
• add @ path alias
  • add jsconfig.json
  • update vite.config.js
  • run tests to make sure everything still works
• why did i lose state

So I have finally hit a major refactoring point. I want to add standard tasks, ones that I can create, complete, move to history, and move back if necessary. I am going to have to recover from shooting myself in the foot first, because I named all the streak stuff "task" so the first thing is to refactor that to be just streaks And in looking forward I am going to have to be a little careful because I am also going to want daily tasks, that are like teh standard task but it doesn't get moved to history. I can think about how that gets implemented later, but it's more that I need to keep things open, so I can easily adapt it later.

• how can I read that I am in a test env to disable firebase?
• create cypress watch so I can make my changes and get live updates
• refactor /task to be /streaks
• move Task component to a shared /component location
• update Task component so that it can be composed with other type of tasks
• create exports necessary for tests
• create tests for task CRUD
• create entities for "tasks" and "history",
• add create task input
• add task list to UI
• add history list
• add tabbed view for active/history
• add restore task button
• add handler to bank to move task's value
• fix eslint issues
• https://rebassjs.org/ or Tailwind
• keep a history of actions on each task
• transfer streaks to app
• display bank

So I know that I am doing things very wrong writing everything to the Firestore everytime I make a change to state. And there are certainly a number of things I could do to improve the situation but honestly right now I just need this thing to move along. So all improvements I can think of will go to Ideal Cloud/DB, but for now the job is GET IT DONE.

• FireStore Persist
  • locate my persist code in the previous points
  • port over persist
  • read the new docs
    • collection> Gets a CollectionReference Not too much I can do with it, so I need to use getDoc(s)
    • getDoc> Reads the document referred to by this DocumentReference.

getDocs lets you specify a query and get an array, but if I'm only playing by myself then I don't need to query. But really I care about DocumentReference A DocumentSnapshot contains data read from a document in your Firestore database. The data can be extracted with .data() or .get() to get a specific field.

• setDoc> Writes to the document referred to by this DocumentReference. If the document does not yet exist, it will be created.

If you provide merge or mergeFields, the provided data can be merged into an existing document. Perhaps I can in the future send just the chunk of state that has been updated, rather than sending the whole thing

• set up persisting an object
• get object persist working

OK I have finally hit the wall that I feel I always run into and then drop Cloud Storage. At savepoint I need a database. I wish to high hell that I could just save my entire redux store on every change but that doesn't seem to be possible. My wish would be something like immer-to-firestore where I could perform JS actions on an object and that would be translated to firestore/supabase/what-ever. It's possible my answer still lies with GraphQL, but that's going to require a lot of reading and learning. I may end up splitting my time between learning that and forward progress on streaks. So I am going to need to do some thinking For the time being I think I need to do some quick and dirty work on streaks to keep it going, namely use my redux-persist hack where I write the whole string of my state to firebase through redux-persist. I presume it's "gross" but it also let's me maintian my forward progress on this app, while I figure out what I am looking for

my number one concern is not having to work in two projects, so no client/server situation. Even if they both live in the same project, I really don't want to have to maintain a front and backend

• Magic Wand DB
  • draft what the "magic wand" option would be
  • why don't I think Apollo is that option
  • draft what I think existing tools I could use for that would be
  • draft how I could abstract all of my work with RTK to that
  • could redux-deep-diff help?
  • could redux-undo help
  • could microdiff help
  • can I get the patch notes from immer to use with immer-to-firestore
• Apollo Odyssey
  • LIFT-OFF I: BASICS
  • Lift-off II: Resolvers
  • LIFT-OFF III: ARGUMENTS
  • LIFT-OFF IV: MUTATIONS

ok so that last "Train of Thought" probably went on for long enoug, so this is where the new one starts. Once again I am going to try and stay away from all of that good foundational scaffolding that I'm working on in bulletproof in exchange for speed of getting things done here I can feel my motivation waning a bit so I really need to be good about laying out small chunks and reminding myself how much faster this will make my mornings, and just think once streaks are done I can start with regular tasking and automating the backlog

• create Task Feature

• move task store to feature

• create component for Task

• port over component for streak sandbox

• set my defaults for layout

• use Custom CSS Reset

• add the React Error Overlay

• wire up toggle tasks

• wire up resolve day

• why does resolve day break? (I was doing { payload: { bank } } destructuring on {}, and there's no good messaging for destructuring errors)

• persist state

  • localStorage
  • [x]

add firebase connections

• add emulation https://firebase.google.com/docs/emulator-suite & https://firebase.google.com/docs/emulator-suite/connect_and_prototype?database=Firestore
• Firestore QuickStart
• rect-redux-firebase + redux-persist

• [x]

read React and Firebase without Redux

• just add basic read Use with Redux-Persist
• wire up firebase/supabase to persistence react-redux-firebase
• RTK-Query?
• Persist v2
  • how to do persistence with state migration ?

I am trying to build to resolveDay and to that end the next piece that I think I need is Bank So I am working on that. BUT I still don't have a way to solve the global state issue, so I am not creating a bankSlice Rather I am defining the object that would be used in createSlice that way if I chose I can work it into a globalSlice with the other pieces.

• how do i define selectors
• define a selector that produces the point value of a pizza and amount of pizza
• should I use selectors in my unit tests?
• bank unit tests
• create redux slice sandbox for experiments redux/toolkit sandbox
• https://redux.js.org/understanding/history-and-design/middleware#the-final-approach
• https://redux-toolkit.js.org/api/getDefaultMiddleware
• can I tell when state has or will change in the middleware?
• how does the default middleware work?
• what if I only return the updated action
• sketch out resolveDay as a middleware that will serve as the director reading state, and dictating to each reducer what it will need to do
• create tests based on the scenarios assuming a full redux store
• create store based on the sandbox
• create selectors for resolve day
• # resolveDaySelectors get value of completed tasks for the bank
• # resolveDaySelectors create action detailer
• test resolveDay with the bank and getDaysPoints
• load initialState for tests
• create actual initialState

I don't really want to get too bogged down in the infrastructure, like I would with Bulletproof, this is really to get the thing off the ground. because nothing is more valuable than just using the damn thing. So this is, "just enough to use it" which includes:

• create repo
• pick cloud place to work for now
• use vite to create a project
• add readme.md
• add .gitignore
• add redux toolkit requirements
• add Cypress for unit testing
• add the fun script to update deps if PRs Pass
• https://docs.cypress.io/guides/continuous-integration/github-actions?utm_source=Test+Runner&utm_medium=CI+Prompt+1&utm_campaign=GitHub&utm_content=Automatic
• add .eslint
• configure prettier-eslint