Overview

Series on Hackfest 2023 Journey: Series link

Product Landing Page URL: ShowwcaseXS landing page

Live product URL: ShowwcaseXS_Chrome_webstore

GitHub URL: Github repository for ShowwcaseXS

Product's Twitter handle: Twitter profile

Demo Video :

It hit me really hard when Aditya Siripragada said this in his talk:

" We are good at Turing concepts into Real products "

because that's what I always try to do as an individual and that's what I have done in this Hackfest also.

Okay! Let me start from scratch and tell you about my development journey.

Development Journey of ShowwcaseXS:

If you want to read a detailed version of my development journey of ShowwcaseXS, I recommend reading my series: Documenting my Hackfest Journey

In this series, I discuss the challenges I faced each day, how I tackled them, and many other interesting things.

Here is a summary of my journey, divided into three phases:

Phase-1: Ideation

When I heard about the Showwcase Hackathon, Hackfest 2023, I knew I wanted to create a Chrome extension. I had never created one before and wanted to take that as a challenge. But the question was, what product should I build? And how could I make it useful for everyone?

My initial idea for this Hackfest was to create a toolbox, which will be shown under every Showwcase profile, that would allow users to store content from various social media platforms and blogs. This content could then be reused or referenced to create shows or series on Showwcase. However, the solution for this was complex and outside the scope of the Showwcase APIs, so I dropped that idea.

After brainstorming and doing deep research on the Showwcase APIs, I finalized an idea for a Chrome extension that would provide a user interface in the form of a sidebar. This sidebar would allow users to operate the entire Showwcase platform, from feeds to posting threads.

Now there might be a question: " Why did I pick this idea to work on? How will it help developers? "

Well, as I already said that I did deep research on the Showwcase APIs and noted all the functional APIs on a piece of paper. I wanted to create something which can utilize most of these APIs and thus came up with the idea of ShowwcaseXS.

This extension has a beautiful UI and some additional features which will drag the Showwcase users to use this extension on a daily basis. I have discussed all the features in the Features section of this show.

As I mentioned, I am creating a Chrome extension which is kind of a Mini Showwcase. I thought of naming it "ShowwcaseXS" because the word "XS" denotes the small size and finalized logo which you can see as the cover image for this blog.

I have documented my entire journey of building ShowwcaseXS. You can read my series Documenting My Hackfest Journey

Now the next step was to start creating wireframes and then the development of ShowwcaseXS.

Phase-2: Design

This was a crucial phase of the project because I wanted to create a UI that would blow people's minds. The only thing I was sure of was that I wanted to create a sidebar with good UI/UX and I knew that I had to spend a good amount of time designing the entire wireframe of ShowwcaseXS.

This was the phase where I got a lot of confidence that how good this product can be if the final output would be as per what I have designed. And it was more beautiful than what I had designed.

I used Excalidraw to design all of my wireframes because it is super simple to use and looks neat. Here are the final wireframes for ShowwcaseXS.

There were some minor changes in the final product if you compare it with the wireframe. But this is how you learn right?

When you start developing a product, you begin to think about how users will use it and how you can make their experience as good as possible and keep adding new features. This process taught me a lot about UI/UX.

I have discussed this design phase in detail in my series: Documenting my Hackfest Journey

Once I finished designing, I wasted no time in starting to develop ShowwcaseXS.

Phase-3: Development

This phase was a battleground for me. I had never created a Chrome extension before, but I took on the challenge of creating an entire application as a Chrome extension for this project. I started by reading the Chrome extension documentation and creating some basic projects to get a feel for how to create a simple Chrome extension first.

The main challenge I faced was creating a sidebar with React JS and adding Tailwind CSS to the application so that I wouldn't have to worry about writing CSS stylesheets. Creating a Chrome extension popup was an easy thing to implement, but adding a content script using Reactjs is difficult. It took me a long time to figure out how to use Webpack and how to implement the content script in React JS using Webpack bundles. That feeling when I saw the first implementation of the content script on the website was amazing.

Things were easier comparatively and I started creating UI for the different sections which I already had designed in my design phase. I used to do this practice before creating any section for this Chrome extension. I used to understand the API structure first and then used should think of how well I can format this in code and deliver the required output that I have in my design. This helped me to structure my code well with all the validations and conditionals.

Let me show you the first sidebar I made.

I have mentioned all my struggles in detail in my series for Documenting My Hackfest Journey

I got goosebumps when I saw the first draft of the ShowwcaseXS layout. I loved the design. I loved the UX and was just obsessed with whatever I created.

Once I had created the final layout, I started working with the Showwcase API. I first created the feed section, then the authentication section, and finally I created all the other sections using the Showwcase API. Creating an authentication system using API keys was a bit tricky, as we use keys instead of the usual email and password combination. It took me a few days, but I was able to do it successfully. Also, implementing the voice-to-text feature in the "Write thread" section was a last-minute call for me. I realized that I don't have any unique feature that makes my product different from Showwcase. Thus implemented that on an urgent basis.

Another important thing I focused on was improving the accessibility of my extension. I didn't want users to be confused about what to do next while using the extension. To prevent this, I engineered the entire application in such a way that users would never be able to take the wrong path. For example, I implemented a disabled button functionality so that the button would be disabled if the user didn't enter any information or if adds blank spaces. If the user entered the wrong information, a relevant error message would be displayed in a snack bar. I made sure that there was a relevant snack bar for every action taken in the application, whether it was copying to the clipboard, logging in, or logging out. Also have implemented tooltips for better UX.

In this project, I have maintained a proper GitHub repository with proper branching for all features. I created pull requests for each feature and merged them into the main branch once the feature was complete. Let me show you:

Testing and optimization is another important phase of product development. During this phase, I improved the functionality of the product by adding and removing features and also improved the user interface and user experience. I believe that no product should be released as an MVP (minimum viable product) without testing because testing helps to identify and fix bugs, which makes the product more robust.

After completing the product, I started working on the landing page. I wanted to launch the product with everything it needed to be a premium product, and I believed that having a landing page would give me more credibility and do justice to the product I had made. I started by creating a static website using Nextjs and Tailwind. After a few days, I created the website and deployed it on Vercel.

Features of ShowwcaseXS

ShowwcaseXS comes with a bunch of amazing features. You will be able to seamlessly operate your Showwcase from every website once installed this extension on your Chrome browser.

=> Notifications

• ShowwcaseXS comes with an innovative notification section that shows notifications related to upvote, boost, reply and follow. The reply can be anything like text, images, or gifs.
• The best part of this section is you can see the thread on which the reply has been made and what reply has been made. Currently, this feature is not there in the official Showwcase application.

=> Feeds

• Experience a unique feed experience with ShowwcaseXS. In this section, you can see the latest Showwcase feeds along with the upvotes, boosts, and replies on that thread.
• You can even see the thread on Showwcase once you click on the arrow icon.
• The best feature of this section is, you can copy the link of each thread by clicking on the share button. It will also show the snack bar related to this action, once you click on the share button.
• This feed shows all types of values, like texts, images, gifs, links, and even code.

=> My Threads

• This section is similar to the Feeds section, but the only difference is that you will only see your threads here. The latest thread will be displayed at the top.
• One thing I will implement in the future here is adding a community name in which the thread is posted.

=> Write Threads

• This section of ShowwcaseXS has a KEY FEATURE of the application as it comes with a voice-to-text feature.
• Here you can write and post threads as you do on Showwcase. But here, you can speak and type in the input box and then can post the thread.
• I care a lot about UX so have implemented, disable button functionality. When there is content in either of the input boxes only the the button is enabled and turns to blue color. Same with the voice button, it turns blue when it is active.
• The voice button with disabled the moment you start typing again in the input and will be active again once you click.

=> Roadmaps

• Here you can see all the roadmaps of Showwcase.
• You can enroll and share the roadmap directly from the extension.

=> Series

• You can see all the trending series of Showwcase here, and it has one of the best-looking cards in the application.
• You can see the first four shows of each series along with some other relevant information.
• You can enroll and share the series directly from the extension.

=> Shows

• Here you can see all the trending shows of Showwcase.
• You can see the show title along with the summary and number of views on the show card.
• You can go to the show link and share the show directly from the extension.

=> Community

• Explore top jobs on Showwcase directly from the extension.

=> Jobs

• Explore top communities of Showwcase directly from the extension.

=> Bookmarks

• This section is similar to the Feeds section, but the only difference is that you will only see your bookmarked threads here for now. The latest thread will be displayed at the top.
• One thing I will implement in the future here is adding a bookmarked shows tab in which you will be able to see the shows as well.

These we some of the amazing features of ShowwcaseXS. Now, let's answer the basic question that you are having in your mind.

Why use ShowwcaseXS?

• This extension makes it easier for Showwcase users to stay up-to-date by displaying all the latest updates in a compact, easy-to-read format.
• It has enhanced functionalities and a seamless UI with a variety of powerful features that make Showwcase easy to use.
• It has features like a voice-to-text feature which makes posting thread way easier for Showwcase users.
• If you want to do a quick post every day on Showwcase, then this extension will be super handy for you.
• ShowwcaseXS covers everything from the latest feeds to trending shows and latest Jobs. You can find all the content you need in one place, making it easy to explore the latest news and trends.
• You can't have any more reasons to say no to this extension : )

Future Plans

• My future plan with this extension is to make this extension an official Showwcase extension.
• I would be grateful to work with the Showwcase tech team and update this extension to the next level by adding some more superpowers to it.
• For example, adding the Showwcase authentication, getting user-related feeds, adding an add-to-bookmark functionality in the feeds itself, replying to threads from feeds, posting threads to communities etc
• I want to launch this extension as a product on the Product Hunt.

Installation

1. Visit this link. This will take you to the Chrome web store page of ShowwcaseXS.
2. Install the extension.
3. Pin the extension
   
   
4. Now, right-click on the pinned extension icon and select the first option.
   NOTE: This setting will load the extension only we you click on it.
   
   
5. When you reload the webpage there will be a shadow around the ShowwcaseXS icon. Click on it to load the extension.
6. Enter your API keys and explore the experience!!

NOTE: In case there is some issue with the live Chrome extension, you can always follow my GitHub repository, to use it locally.

Tech stack

• Reactjs
• Tailwind
• ShowwcaseAPIs
• ChromeAPIs
• Nextjs ( for landing page )
  

Hope you enjoyed the show. Feel free to share your feedback here or in my Showwcase DM.


You can support me by buying me a cup of coffee

Here goes the link: Buymeacoffee

Connect with me on Twitter, Linkedin, Github, Showwcase

https://twitter.com/ShowwcaseXS
https://twitter.com/ShowwcaseXSTwitter
https://twitter.com/ShowwcaseXS