Inspiration

I was pitched the idea to create OpenAsk by a friend on Twitter who connected me with his startup. They were looking for a frontend developer to help code a platform where users could ask questions to their favorite influencers, founders, and creatives and have them answered in an audio or text format. We would focus on Web 3 and Crypto creatives and integrate crypto payments on the platform. I was excited to work with a full team on my first commercialized product and thought this was an amazing opportunity to level up my skills!

It didn't take much convincing for me to get excited and agree to work on OpenAsk. As a prominent Twitter user with a decent sized following myself, I instantly saw the value that a platform like OpenAsk would bring to me. I get multiple DMs a week from people asking me about my thoughts on the market, how I learned to code, and what new investments I was interested in. But unfortunately, I just don't have enough time to thoughtfully respond to everyone.

OpenAsk takes this burden away by offering a financial incentive for someone like me to answer and connect with the person asking me a question. It acts as a spam filter and deters bots and scammers from contacting me. When someone attempts to connect with me on OpenAsk, it is a signal that they are serious about connecting and are willing to pay for my time.

With Ethereum Denver coming up, we decided this was the perfect oppurtunity to showcase this project at the hackathon.

Version 1

V1 of Open Ask was meant to be a barebones, working structure of the website. We wanted to focus on the core functionality and make sure that we could get a working product out the door. We decided to use React as our frontend framework and Firebase as our backend. We also decided to use the MUI library for our UI components. I was tasked with creating the frontend components and integrating them with the backend.

We require users to sign up for an account before they can browse the website. However, as getting a user to sign up is one of the hardest parts of building a product, we decided to streamline the login experience by simpling requiring users to connect their Twitter account instead. This way, we could return their username, handle, profile picture, and other information to automatically create a profile for them.

The Feed tab would be the first page that users would see when navigating to the website. This would be a standard social media feed where you could view popular and recent questions that were asked to a 'Sensei' (Our version of a professional).

The Sensei tab would contain all of our vetted influencers and creators. Sensei's are onboarded onto the platform as experts and are tasked with answering questions that are asked to them.

Within the Sensei tab would be a dedicated Sensei Profile page for each sensei. This would contain basic information such as Twitter followers, questions asked and answered, biography, etc.

The Questions Asked tab would contain all of the questions that the user has asked as well as the status of the question. The question status could be completed, waiting, and expired. Questions are labeled as expired if they are not answered within 48 hours and the money is transferred back to the users account.

The Questions Answered tab would contain all of the questions that the user has answered, or has yet to answer. For now, we only supported text answers.

Asking and answering questions would be very similar. In each case, you would be provided with an empty text box where you could either submit a question to a particular Sensei or answer a question that was asked to you.

The Transaction History tab would contain all of the transactions that the user has completed, whether it be asking questions or answering them.

Lastly, we included a wallet connection button to allow users to connect their wallet. This would allow them to withdraw and deposit crypto onto the platform to start claiming bounties and asking questions.

Version 2

Version 1 of OpenAsk was a great start, but we wanted to take it to the next level in terms of creating a better UI/UX and implementing blockchain technology.

We arrived to ETH Denver with Version 1 of OpenAsk and had the whole week to upgrade the software to a presentable format. To start, we hired a designer to design the components and we found a Solidity developer at the hackathon to help us implement the smart contracts.

We had 1 week to finish V2 of OpenAsk. Most of the week was spent upgrading our branding and implementing the crypto deposit and withdrawal functions. We also implemented a new feature called Eavesdrop which would allow users to peek in on questions that were asked to other Sensei's and see their answers.

Additionally, we added a Wallet tab to view your wallet balance as well as condensed the Questions and Answers tab to better reflect the status of the questions.

My responsibilities including connecting the crypto deposit and withdrawal functions to the custom smart contract we created. The smart contract would store the crypto in a wallet for 2 days until the question was answered by the targeted Sensei. If it was not answered, the use could withdraw the crypto back to their wallet from the smart contract.

Additionally, the eavesdrop contract was completely different. We wanted to create a feature where when someone eavesdropped a question, the payment would be split evenly between the user asking the question and the sensei answering the question. We had to crearte a custom splitter smart contract to accomplish this.

It was my first time working with solidity and implementing smart contracts with Javascript. It was a difficult process but I learned so much about how Solidity interacts with the frontend and all of the nuances that come with it.

We also added a few other key features to OpenAsk during this time. First, we changed our login method by implementing Web3Auth. Web3Auth allows users to login with any of the popular social media platforms such as Twitter, Facebook, and Google, as well as through an external crypto wallet such as Metamask. However, it also automatically creates a wallet for the user if they login through social media. We also started experimenting with audio answers for sensei's answering questions.

I had to work very closely with our designer who helped design the components in Figma. I was responsible for translating those Figma designs as accurately as possible into React components while adding the proper functionality. On one hand, it was nice to have help on the design aspect of the project, but on the other hand, it was difficult to translate the designs into code. It was a great learning experience and I am very proud of my work.

In the end, we narrowly completed the project in time for the Hackathon and were able to present to the judges. We ended up winning $2,000 in prizes and were very proud of our work! If you want to learn more about my experience participating in the ETH Denver hackathon, check out my Twitter post!

Below is the demo video we created for the hackathon: