Web3 Frontend Starter Template

This is an opiniated web3 frontend starter template from TreasureDAO.

Tech Stack

• Remix
• Tailwind CSS
• GraphQL Codegen
• wagmi
• sonner (for toaster)
• Deployment on fly.io
• https://ui.shadcn.com/ for UI components using Radix UI and Tailwind CSS

Development

npm run dev

Open up localhost:3000 and you should be ready to go!

Working with graphQL

If you are fetching data from an external GraphQL endpoint, first add your endpoint in .env.

Write your query inside app.queries.ts. Theres an example in there. When you're done, run npm run codegen. Your autogenerated code will appear under the same file, /graphql

Then create a file called api.server.ts under utils. Naming it with a server prefix will tell Remix to not bundle that file in client JavaScript.

Something like this:

import { GraphQLClient } from "graphql-request";

import { getSdk } from "~/graphql/queries.generated";

// Passing URL here, since you'd want to have different endpoints depending on production or not
export const sdk = getSdk(
  new GraphQLClient(process.env.API_URL as string)
);

Now you can use this in your loaders, where it will fetch from that endpoint and server side render your app.

ex.

import { sdk } from "~/utils.api.server";

export const loader: LoaderFunction = async () => {
  return json<LoaderData>({
    data: await sdk.hello(),
  });
};

// then use it client like this:
export default function Index() {
  const data = useLoaderData<typeof loader>();

  return <div>{data.hello}</div>;
}

Deployment

1. run fly launch and configure the repo for fly.io deployement

2. npm run deploy