How to build a food advisor UI for Strapi using GC & GraphQL

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • responsive-loader

    A webpack loader for responsive images

  • You can access any images or videos you drop in the studio via mediaFiles variable which is an object where file names are the keys. Implicitly there is a Webpack Responsive Loader involved which gives you src and placeholder.

  • css-modules

    Documentation about css-modules

  • For styling, although it feels like coding oldschool HTML and CSS, you'll be implicitly using CSS Modules. GlueCodes Studio gives you a beautiful balance between scoped and global styling. So, you can theme your app globally and at the same time style chosen parts of the UI in isolation. You'll simply be using CSS classes and because of the implicit scoping you can safely duplicate class names among different slots.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • gluecodes-framework

    Discontinued Non-trivial framework based on trivial principles

  • Static HTML has no built-in way to make it reactive. Hence GlueCodes Studio has a concept called extended tags which is named like: tagName + '-x' and has an embedded gc-as="listFieldPresenter" gc-provider="getCategories" gc-field="name" class="label">category name class="heading">Neighborhood class="filterSet"> gc-as="listItemPresenter" gc-provider="getNeighborhoods" class="filterItem"> type="radio"> gc-as="listFieldPresenter" gc-provider="getNeighborhoods" gc-field="name" class="label">neighborhood name class="heading">Language class="filterSet"> gc-as="listItemPresenter" gc-provider="getLanguages" class="filterItem"> type="radio"> gc-as="listFieldPresenter" gc-provider="getLanguages" gc-field="name" class="label">language name

  • Strapi

    πŸš€ Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.

  • It's a "how to" integrate with Strapi using GlueCodes Studio - the tool powering your every-day work in the ways you haven't seen elsewhere. It's for somebody who'd be pleased with loads of automation to deliver an extremely fast and scalable code i.e. build-time diffed JSX using SolidJS and organised around an implicit uni-directional data flow. Obviously you can use it for FREE. Without further "context drawing", let's begin.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts