Make the boilerplate more framework agnostic

[vplasencia]

It would be nice to create the boilerplate in a way that it's as framework-agnostic as possible. Right now it's hard to reproduce the boilerplate if you don't know much about React. There are some developers using other frameworks like Vue or Angular. It may be good for hackers at hackathons to easily reproduce the boilerplate in case they want to use another framework. We could replace React hooks with functions. What do you think?

[cedoor]

I agree with the need to make the boilerplate more framework-agnostic 👍🏽 How can we do it though?

The approach we have taken so far has been to use some of the most popular technologies in blockchain/zk projects: Nextjs and React. Looks like a good compromise between the use of modern technology and usability considering the average dev background, but it still doesn't support all devs. In particular, it doesn't support devs without any knowledge of React and NextJS, as you pointed out.

We could replace the hooks with functions that can be used with the other frameworks as well, but how can we build components that can be easily re-used in both Vue, Angular, and React?

We might consider using Web Components directly, which are framework-agnostic and supported by modern browsers.

Another alternative that comes to my mind could be to create a CLI template for each of the main front-end frameworks/libraries.

[vplasencia]

To create reusable code, we could use TypeScript code instead of hooks and context (which are React concepts). We could use just components and TypeScript code. Most JS frameworks support TS and the concept of components.

For example, this project is using Semaphore with Next.js without hooks and context: https://github.com/bandada-infra/bandada-semaphore-demo

Another interesting point is the CSS library (Chakra UI) which is attached to React. We could consider using a framework like tailwindcss since it's easier to migrate an app because it uses HTML and is compatible with many JS frameworks. We could also keep Chakra here since the CLI templates use CSS and devs can use the CSS framework/library they prefer.

[cedoor]

That makes sense. #334 could be a CLI template directly! Why not?

[vplasencia]

Yes, let's do that. Keep the boilerplate with good practices for React and Nextjs and then create a template with HTML, CSS and TS that can be helpful for any JS framework.

Should the issue title and description #334 be modified to use TypeScript instead of JavaScript?

[cedoor]

Yes, I think so. TypeScript is definitely much more common today.

[vplasencia]

Great! I just updated the issue title and description.

[cedoor]

Thank you 🙏🏽