Genie App is a set of tools that make it easier to create a content manageable site with unique features.
Use any framework, meta framework, or language you want (React, Next, Remix, Astrol Svelte, Qwik, Vue, Solid or even something like HTMX with a Go backend)
❗Genie App is early on so creating the stack is manual process... for now❗
❗See https://brown-dog-biscuits.pages.dev/ for an in progress example ❗
-
Get full featured API, GraphQL API, Authentication, Access Control, Image storage and more running on Cloudflare's global network
-
Powered by Sonic JS
- Get your content, fully typed, with GraphQL
- https://github.com/acoreyj/brown-dog-biscuits
import { graphql } from 'gql.tada';
import { GraphQLClient } from 'graphql-request';
// Create your query, with autocomplete!
const getProductsQuery = graphql(`
query Products {
products {
id
title
description
image
skus {
id
title
description
price
size
}
}
}
`);
const graphQLClient = new GraphQLClient(
'https://content.GENIEAPP.com/graphql'
);
// get your data, fully typed!
const data = await graphQLClient.request(getProductsQuery);
if (data?.products) {
return {
products: data.products
};
}-
Choose from over 200,000 icons from Iconify
-
Configure a range of sizes, colors, transformations, blank areas
-
Example with different backgrounds at different screen widths, with different cutouts for the dogs image
- Use Cloudinary and their API to get image renditions (size, format, crop, etc) but use Cloudflare to cache and serve them quickly.
- https://github.com/acoreyj/cf-worker-images
- Not only fast, but avoids the bandwidth costs from Cloudinary and compute costs from Cloudflare
- Create an image component so your users get the best image for their device
- Examples