great now write >100 ai dev prompts to setup generate test and deploy the front end.

Remember this ai can run npm commands and has file access.

We are using react and zod lets use vite and eslint, the ui layouts are based on jsonc but we still need the react native components and wiring.

First we need to make sure the specs are compiled.

Then we need go through setting up the actual front end in stages.

This is a very reactive application.

Universal top bar with search, navigation, user avatar.

Home page with site feed.

Site feed is mix of content.

Vendor Page with vendor art, title, description, location, order, contact, and menu

Menu Items with item art, title, description, add to card.

Order page – the actual order is handled by Stripe.

Vendor Dashboard:
– Pending orders!
– Add item
– Edit item
– Edit store details
– Order history
– Customer history
– Delivery history
– Order notification channels

Customer Dashboard:
– Order history
– Favorites
– Settings

Do not let a component get greater than 300 lines before breaking it down.

Have the AI write to the /client/ folder, write the with the complete package.json, have the ai run npm i, create our pages folder containing home, store, profile, order,

Look at our ui/*.jsonc files for reference look at the compiled output.

Systematically step through the jsonc layouts getting our front end ready to sync.

This front end is totally comprised of our single source of truth contracts.

It is imperative to keep them in sync and tested.

This is a large push so let’s generate >100 actually useful ai dev instructions as a downloadable csv.