RFC :: Getting Started App

[bhavya2611]

Context

We had a great discussion about how we are getting started app in the product jam yesterday, this is a discussion to align the team on the same page and hear any thoughts before we start building it.

People who were in the meeting - @saulmc @elisealix22 @jhaaaa @darickdang @bhavya2611 (Please feel free to add comments if I miss anything)

Target Audience for the App

The getting started app will be built for developers who need an example of how XMTP works. The assumptions here are that the developers understand how a wallet works and know Javascript and React.

Purpose of the App

The app will serve three purposes, we will write a document explaining the code, the code itself will then further help as a way for developers to understand how to tie it all up to work with Xmtp-JS SDK, and finally, this project can become a starting point for developers who participate in hackathons. @jhaaaa described the above things, and we resonated with it.

Bonus - This app can also become a starting point for us to showcase advanced features of XMTP

Tech Stack for the App

I suggest using vanilla JS, React, and CSS for this. We can use advanced technologies like Tailwind, Next, and Typescript but they add friction and if the purpose is clear that this is to help you get started, I believe using anything more advanced than what I stated might be noise.

Features of the App

1. Connecting Wallet - Only support Metamask for now (For all other wallet integrations there are a lot of tutorials out there, we don't need to have it in our app. Will help us keep it minimal)
2. Connecting to Xmtp-JS SDK
3. Send and Recieve Messages
4. Messages Streams

UI for the App

We could not come to a conclusion as to what the UI should look like. @elisealix22 had a brilliant point about making it look visually different than the current example-app, and I think all of us agree with that. @darickdang will further be guiding us on this. We are open to ideas here.

Next Steps

• @bhavya2611 and @jhaaaa will discuss what the document that explains "How to get started with Xmtp-JS" should look like and accordingly @bhavya2611 will try to break down the whole app into GitHub Gists. (Are open to other ways too)
• @darickdang will help with designs
• @bhavya2611 will work on the actual app and make it ready for production

PS - We also discussed having video tutorials for this app and for future features that we launch. Also, we had a thought that the whole Tech Team should be able to build this app independently, so all of us are aware of how it works and can in the future help developers if they ever have to interact with them.

[elisealix22]

Love it @bhavya2611 ❤️ . Building it in JS makes sense to me. Maybe one day we can have a script that generates our getting started app where we can apply a typescript template similar to how RN supports getting started with both:

npx react-native init AwesomeTSProject --template react-native-template-typescript

In terms of UX, I would prefer to keep the side panel with a conversations list since I think it's a common pattern & a useful starting point, but I don't have a full understanding of how much overhead that introduces. Excited to see what the visuals look like when we get there!

[saulmc]

A conversations list panel feels like one of the first components we'll build in a plug-and-play system. I can imagine a tutorial for swapping in that component instead of whatever lowest common denominator version of that UI that we land on here.

[darickdang]

I actually have the beginnings of a conversation list panel component being built right now so this would be a great place to showcase/test that out.

[galligan]

Thanks for pulling this together @bhavya2611

Connecting Wallet - Only support Metamask for now (For all other wallet integrations there are a lot of tutorials out there, we don't need to have it in our app. Will help us keep it minimal)

I appreciate the desire to keep things minimal, but this particular one feels like it comes with a heavy cost—the inability to use other wallets, especially when that's desirable or required. For instance, someone may want to develop an app that exists exclusively on mobile, where injection through MetaMask would be required but not desirable. Adding support for other wallets also feels like the immediate first step someone would take when trying to take this further—so why not at least take that step for them?

Alternatively, I could see some modularity here where the wallet connection part could be easily swapped—for something like RainbowKit, Coinbase Wallet SDK, ConnectKit, etc.

[saulmc]

@galligan The approach of starting with Metamask injection provides ripe opportunity for a modular approach in the future. Instead of choosing one of the competing wallet connection libraries today, we start with a lowest common denominator and then build up tutorials / code for each of the libraries.

[bhavya2611]

We can maybe use walletconnect for now, and only support Metamask, then we can keep adding more. We need one library for sure, I was initially thinking to use metamask library directly. But if we have to use one library we can choose which one and support only Metamask from it.

One factor to consider should also be to choose something which requires minimal code

[darickdang]

I've been working on building out a default/starter theme for the component library and I think I will use this getting started app as a place to start testing out this theme. It's intentionally bare (so I can quickly add colors/fonts to it when making mockups) and I'm continuing to strip it of style and content so the focus can be more on the flows and scalability of the components.

Here's a quick preview of how basic it currently looks: