Inspiration

Even when creating a UI on top of Ethereum smart contracts, it is more cumbersome than it should be to get an app up and running with your new contract. This is why packages like https://www.npmjs.com/package/create-eth-app and https://github.com/scaffold-eth/scaffold-eth find so much popularity.

Since Parachain projects are likely to be require a more diverse set of setups, it seemed like an idea worth exploring. I also because I didn't have much other ideas I thought I could build so this gave me an excuse to touch every project lightly and maybe get inspiration for a future hackathon.

What it does

For the hackathon it just sets up a boilerplate React project using create-react-app for the Subsocial, Crust, and Kilt parachains. The templates are deployed on NPM so it's just as easy as:

npx create-react-app my-subsocial-dapp --template cra-template-subsocial

How we built it

In the "Advanced" section of the React docs, there is a section about creating Custom Templates and so I just went through each tutorial to make a sample dapp with a sensible file structure to get started with.

Challenges we ran into

Prioritizing between getting stuck in on CSS to make the UI look good versus actually making as many valuable specific connections with each Parachain node. Of course a UI template shouldn't look like utter shit but since it is just a template to build off of, it shouldn't have much emphasis on the CSS and more on the hooks, contexts, @polkadotjs extended libraries, types, etc.

Accomplishments that we're proud of

Actually getting back in the habit of actually completing a smaller scoped and "good-enough" project rather than going too broad from the start and never getting it to a point where "perfect" to decide it's submit-able.

What we learned

This is my first time trying to build an actual developer experience project rather than a consumer type project, so it was actually difficult to focus on the value a developer might get out of it than wasting time on what a might upset a regular user.

It was also my first time building and publishing custom react templates to npm so that was pretty neat.

What's next for create-dot-app

Honestly I'm not sure if it's even a good idea but if people think it'd be useful I'd just keep building it out to be more fully fleshed out since for the hackathon I went broad not deep. Anyway there are a couple other Parachain projects that'd make sense to build a template for. Maybe ask paulberg and austingriffith for some advice.

Built With

  • create-react-app
  • crust
  • kilt
  • polkadotjs
  • react
  • subsocial
Share this project:

Updates