CMS Website with NextJS, tailwindUI, Prismic, Arweave & Solana

Frontend WebApp

We are going to use tailwindCSS / tailwindUI for speeding up frontend development.

1. Create your new NextJS project
   1. Follow https://tailwindcss.com/docs/guides/nextjs
   2. Follow https://tailwindui.com/documentation#react-installing-dependencies
2. Create custom pages and components
   1. Now you can use tailwindUI markup from the their markup examples
   2. Choose what you need and like, build your layout and page skeleton.
   3. Build your own reusable components from the pasted snippets and build your app.<
3. Extend website by a blog based on prismic.io
   1. Follow https://prismic.io/docs/technologies/nextjs
      1. Install dependencies
      2. Create helper/queries files
      3. Add the prismic builder (for managing slices aka sections)
      4. Run & get used to the builder
   2. Install and run storybook
      1. Follow the notices in slicemashine to install storybook (for mockup data while managing slices)
      2. Hint: You need to run "yarn run storybook" in your projects root folder, not in the slicemachine folder
   3. Create model with Slice Builder
      1. Follow https://prismic.io/docs/technologies/create-and-model-a-component-nextjs
         1. root: npm run storybook
         2. root/.slicemachine: npm run slicemachine
         3. Open slice builder
         4. Create slice
         5. Save/update
      2. Hints
         1. You will see slices already created in prismic before, popping up in your slicemachine. You can create new slices with the exact naming, upload them, and existing slices will be overwritten. Duplicates will disappear then in prismic and slicemachine.
         2. Slices created within the slicemachine are "shared" and cannot be edited in prismic anymore.
         3. slicemachine will create all files required for editing your components at ./slicemachine/assets/slices