shelrothman/cartotype

a Shopping Cart with Administrative Capabilities

Cartotype

Prototype of a Shopping Cart with Administrative Capabilities

Tools intentionally used for groking

1. custom hooks a. useMultiStepForm b. useLocalStorage
2. context API,
3. advanced TypeScript,
4. reducing effect dependencies,
5. use reducer to extract state logic into
6. querying a series of state updates (aka batch updates)
7. Multi-step forms with state management
8. Forwarding refs

Aim is to keep components “pure” without overcomplicating modularization.

Run the app locally

- go to the root directory
- `npm install`
- `npm run dev`
- go to http://localhost:5173

This app is also a collection of agnostic components intended to be able to be plugged into any React app

cartotype's Issues

clean up

• find all TODOs and either do them, or create an issue for them
• clean up all the code, remove anything not used, modulate, etc

streamline ui bits

streamline the design of all the subcomponents to be modern and clean and in sync with one another

lazy load images in the storeItem cards

implement lazy loading using the react-skeleton-loader within in image SO THAT the user doesnt see the ugly white squares when loading

and also just perpetual lazy loading as you scroll for when the db grows

• #6

render cog in lower left of Note Item Cards

cog: edit, view, delete...(popuot)

add linking between all data.. i,e. where a note is, link to it, storeTag -> link to it, vica versa

Create links between:

• individual storeItemTag in noteList -> storeItem
• storeItemTag in note view -> storeItem
• note in storeItem shop -> note
  (little toggler to view..)
• note in storeItem admin (each step spot) -> note
• #16

add view option on each store item

add a view btn on each storeItem SO THAT when clicked, it pops up the StoreItemView modal on top of the document

allow deleting in admin : editForm

put a small x at top right of each item when in the select-item step of editForm

Future: create categories for the store Items SO THAT the user can select the category or filter by it OR FILTER BY TAGS ... i.e. filter the storeItems to display ones with specific tags attached to notes that are attached to it

UI | Render the storeItemTags logic to display

• seperate type of tag by color
• #11
• display in Note view mode
• #26
• store : display on each storeItem Card in /Store -> hover over to view notes attached
• admin : edit : on each item in selectionList AND in the edit details part
  • i.e. each of the preview cards
• admin: preview
• admin : add : add option in the deailForm to put them in there...
• #9
• #12
• #3

add credit text to each unsplash image

• apply whats shown in addForm to the select elements in the editForm
• save/persist the urls and user data for each store item
  • update the db table and all cruding to it
• render them to display in editForm
  • for the previews
    • in editForm
    • in addForm
    • in storeItemView
  • for the store

Refactor Routing

the routing is not the way it should really be if keeping it all like on the client.. issues w the routes or like refreshing..is bc its stuck in being like express routes... its not... so think about it like react with state and context and all that..

parent routes like /store cant refresh./..

fix up the display in store page

have it with a container like it does in editForm select

Convert over all styles to new Themeing Sass

Still to do:

• convert to modulated css files
• side popout cart convert
• adjust styled links in Home
• add primary background to the divs in form steps (Admin)

once all organized -> then can start actually implementing the store-tag changes. i.e. make actual changes

display the tags in each little note card in NoteList

future: have ability to copy a note, select from dropdown, and paste to new item

Turn it into a Component Library

turn into component library
personal
store tags correlate to the Items which are components
tags correlate to tags still, eg 'modal' 'react'.. like the ones on Stack Overflow

offset the modal based on position in document

eg. if on the right.. scoot it left.. vica versa

noteList in storeItem view -> link forEach note (and in edit vie?)

First:

• actually attach notes to the storeItems in the db
  use the same approach as the storeItems col in notes

in Note View, display proper store tags and add tooltips to each row

make it be just click to select for the edit store items

and on the callback, the icons get chagned to selected

an option for filtering by storeTag in the pages/Notes, in the form component

• add within the same row for querying by storeTag

sync storeItem with upsertedNote

• update storeItem in db when adding storeItem tags to a Note.