<!-- # Codegeist Storytelling -->  <iframe title="Storytelling" style="border: none;" scrolling="no" data-name="pb-iframe-player" src="https://rebrand.ly/745e8c" allowfullscreen="" width="100%" height="150"></iframe> ## Story Time: How It All Started I thought I knew what I would build coming into this hackathon. After all, I had designed a proof of concept for Codegeist last year. Which one? Oh, the one that I never submi... ah, nevermind. I assured myself that this time would be different. I had it all mapped out in my head. And if my plan fell through, I had another in my arsenal. Surely, that is half the battle? Codegeist 2022 was the one chance I had to redeem myself — to sweep off the dust, pick up from where I had left off, and build an app that I believed in with all of my conviction. Done right this time, of course. But as I pondered some more, I noticed that something felt off. Eerie in a way that I can't describe. A foreign body that obstructed the flow of oxygen through my veins to my brain and from my lungs. A heavy feeling in my chest - as though a frigid, wretched hand had clung to my heart, clenched onto it tightly and wouldn't let go. It suffocated me in my sleep, and I awoke several times throughout the nights gasping for air. I tried to ignore it, and for some time, it worked. <!-- ──── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ────── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ────── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ──── --> <!-- ☆・・・★・・・・・★・・・☆・・・★・・・☆・・・★・・・☆・・・★・・・☆ --> <!--  --> <!--  --> <br>   <br> Time was ticking. Before I knew it, it was a quarter past midnight with less than a week left to the deadline. <!--(4 days to be exact as I type this).--> One night, after I deployed my Forge app for the eighth time in a row, the following error message appeared: <img src='https://i.imgur.com/aEm4qSO.png' width=350 /> <p></p> And then this one after a few more refreshes:  <img src='https://i.imgur.com/D0zNpSP.png' width=250 />  <p></p> I swore that I had fixed the errors. So what was the problem now? I re-added a new instance of my Confluence macro, and—voilà!—there it was: A beautiful 'Hello World!' to greet me. <img src='https://i.imgur.com/PxvfYVX.png' /> <img src='https://rebrand.ly/hw15c' alt='hello world macro text' width='250'/> <img src='https://i.imgur.com/PxvfYVX.png' /> <p></p><br> After several more changes to the code, I was ready to view the macro on my Confluence page once more. But the macro stopped updating. My heart stopped. A chill went down my spine. An overwhelming, ominous sensation poured over me. I couldn't keep going. I was convinced that I'd fail. And in that moment, she suddenly revealed herself. A woman's shrill voice whispered tauntingly into my ear, "You won't make it in time to submit an app this year". She snickered, screeched and cackled until she faded away into the shadowy distance. <br>  <br> Now I am here to tell you the story of the time I had a spell cast over me. A spell that eternally cursed me from submitting a functioning app on the 31st of October each year... Now, *for the second year in a row*... ... Wait — is this not the kind of storytelling you meant? Oh, my bad. Well, that's embarrassing...  ## Getting back on track > *The battle ended before it even began.* To cut to the chase, I really did struggle to get Forge apps to consistently update or display at all. I mean, I'm not a professional developer, but these were minor changes I made to hello-world macro code and a sample ToDo app cloned from Atlassian's repo. How could I have messed up *that* badly already? And there's only so much 'forge uninstall [installationID]', 'forge deploy && forge install', enter app name, enter site url, refresh page / refresh app / readd macro I could tolerate over a short timespan before I become a zombie (IYKYK). :::info **💡 Pro Tip: Learn to use Docker** ::: With just four days left till Halloween, I am now diverting my efforts to creative storytelling instead **🧙‍♀️🎃**. As luck would have it, I have spared us all the agony of sifting through amateur spaghetti code with our eyes scorched, brains under fire, and minds wreaked with havoc (you're welcome **😎**). Instead, I have compiled a list of ideas that anyone can take and build for the Marketplace, as a commercial endeavor or as a submission for next year's Codegeist hackathon. If you find yourself struggling to think of fresh app ideas, I'm writing this post with you in mind - a fellow developer with ideator's block. Without further ado, I present to you... **10 spooktacular, winning\* app ideas** that are up for grabs \*drumroll please\* **🥁** :::warning **\* ⚠️ &nbsp;Disclaimer: I may be biased &nbsp;☺️** **"winning" ≠ profitable; please DYOR** ::: :::success **✳️&nbsp; Skip to the end for some actionable tips on how you can discover new ideas, even in times when it may feel like the market is saturated. (Spoiler alert: It's not)** :::  ## 10 Spooktacular Apps To Build for Atlassian Marketplace ### 1. Confluence Teams (Org Chart + Team Status) <div style="padding:65% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/765903579?h=b105611637&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="confluence.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> :::success **✳️&nbsp; My Confluence Teams 2021 proof of concept<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Featured in this roundup for the first time** ::: - Save yourself the embarrassment of calling colleagues by the wrong names or mistaking their job titles **🙊** <br><!-- - DRY - reintroductions not needed --> - **company org chart** - relationship mapping at a glance - receive instant notification when a new hire or internal transfer joins a team with a link to their bio + start date - quickly learn names, job titles, and responsibilities - know who reports to whom - know who to reach out to about a Jira task or issue - search/filter task/project by keyword - highlight members assigned to Jira tasks/issues per project each sprint - link profiles to job descriptions + duties - extract this info to be displayed in tooltip on hover over - updated in real time as teams change, grow, downsize, restructure, etc. - check team member availability with colored status indicators - red 🟥 = busy, green 🟩 = available, gray ⬜ = out of office - instantly book & accept meetings via Calendly, email invite, Zoom <br> - **status visibility** - know when colleagues are available to chat or take calls without physically being in an office - synced to calendar + prescheduled meetings - one-click contact (email, slack, discord, phone, zoom) - no need to guess timing or apologize for interrupting - 2D/3D virtual co-working office map with team member avatars in spaces synced with agendas (e.g. client presentation, product marketing team meeting, water cooler break room, restroom, out of office, etc.) and current status (e.g. solo work, 1-1 meeting with team lead, team standup, code review with FE dev team, lunch, etc.) - Bonus: a quiz style game to make rote learning names + roles less tedious ::: warning **✴️&nbsp; Helpful for:** Large teams/orgs, distributed teams, remote workforce, new hires, internal transfers, contractors, interns, bad memory, brain fog ::: ::: info <b>ℹ️&nbsp; <u>Relevant Resources</u>:</b> #### Node.js packages for hierarchical organization chart: - https://www.npmjs.com/package/orgchart - https://www.npmjs.com/package/ngx-org-chart - https://www.npmjs.com/package/d3-org-chart \* **d3-org-chart only supports horizontal tree layout** <h4>📚&nbsp; <u>More resources</u>:</h4> - https://jsfiddle.net/og5tv2Lh/ - https://github.com/Hoogkamer/vue-org-chart - https://developers.google.com/chart/interactive/docs/gallery/orgchart#example :::  ### 2. Custom Template Designer <div style="padding:56.89% 0 0 0;position:relative;"><iframe src="https://rebrand.ly/confluence-divider-demo-src" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="forge-divider.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> <br> ::: success **✳️&nbsp; My Codegeist 2022 hack. Incepted during Halloween weekend, hence the holiday themed references ☃️** ::: Custom dividers might seem like a silly, pointless idea. I started the project thinking so. It's hard not to compare an idea to other business/tech oriented apps. And compared to those products, an app focused on styling a \<div> seems almost too simple and not technical enough. But I consider myself more artsy than techy by nature. To the point where the visual elements on a page elicit an immediate emotional response from me. I'm not kidding when I say that colors, text styling, spacing, images, visual harmony, alignment, etc. affect my productivity and creativity. After all, design is an integral component of user experience. Plus, it’s nice to have options. Do you \*want\* to use a dull, plain, standard divider, or would you like to have the option to choose? Similar to how variety in emojis, stickers, GIFs, etc. are loved by many. They breathe life into plain written text. Digital communication wouldn’t be the same without them. I don’t know if you noticed, but I sectioned this document with custom dividers :) <br> #### Standard Divider &nbsp;vs.&nbsp; Custom Dividers Boring, standard **\<hr>** **🥱** <hr> <br> <details> <summary>Pretty, colorful custom dividers <strong>😍</strong> <br> &nbsp;&nbsp;( + Click expand to view )</summary> <p></p>  <br>         <br>       <br>  <br> </details> <br> If you're an artist at heart and you appreciate the visual aesthetics, styling, and layout of a page, then in-browser, in-platform design tools that you can run on the fly should be just your cup of tea (or coffee, if that's more to your taste). Custom design templates are not only useful, nifty tools, but they’re also extremely versatile. I admit that the Custom Divider macro wasn't my first choice for an app. I'm satisfied with what I hacked together in a couple of hours but dissatisfied with the outcome, if that makes sense. Although I am referencing my project, the source code needs a lot of work and refactoring. It's a draft in progress with bugs galore - height should be padding-top + padding-bottom, bgColor picker needs fixing, spacing between chars is unevenly fixed, multiplier resets to default value on pattern input, image upload is nonfunctional, etc. If I could start over with more time to dedicate, I would add CSS transform options for translation, scaling, and rotation that could turn custom dividers into custom borders. Decorative borders make more sense to me than decorative dividers. You can take this idea and make it better. Or branch out to a different direction. A custom template designer extends beyond dividers. The possibilities are endless. (See 'More Ideas' below for more design inspiration examples). ::: info <b>ℹ️&nbsp; <u>Reference</u>:</b> - <a href='https://rebrand.ly/zgq90wk' target='_blank'>Custom Divider macro hack</a> 🔗</h4> ::: <!-- [Try it out in sandbox.] -->  ### 3. TTS for Accessible UX Confluence pages display estimated read times under titles. Take it a step further by adding a reading progress bar that tracks scrollY position. Include a Table of Contents for easier navigation. Add a text-to-speech (TTS) audio player with audio controls, playback speed options, and multi-language translations. To demonstrate a very minimalist version of this idea, I have embedded an audio player at the top of this doc. Instead of recorded narration, speech should be auto generated via TTS API. TTS bot readers are terrible for script reads and story narrations. But for dry technical docs, the monotone, robot voice is rather fitting. Allow readers to adjust text font-size, font-family, and styling, catered to varying formats and preferences, including support for less common fonts, like Dyslexie font for dyslexics, etc. An automated scanner that checks for colors, contrasts, font-size, style, sentence structure, character count per line, spacing, multimedia selection, etc. against a protocol or checklist that is compliant with ADA standards could be a useful tool to have. This will improve UX accessibility and allow users to process information through different mediums, such as listening to text read aloud, in place of or in addition to reading along text on screen with auto-scroll + highlighting enabled at users' preferred pace + format/style. :::success **✳️&nbsp; Good for accessibility, inclusion, and ADA compliance** ::: ::: info **ℹ️&nbsp; <u>Relevant References</u>:** - **Fixed positioning, scrollbar tracking in iframe**: - https://community.developer.atlassian.com/t/sticky-toolbar-inside-an-atlassian-connect-iframe/57485 - **Accessibility for the web**: - https://www.accessibility.works/blog/2022-ada-wcag-website-accessibility-standards-requirements/ - https://www.accessibilitychecker.org/guides/ada-compliance/ - https://www.dumblittleman.com/dyslexia-website-accessibility/ - **TTS Developer Docs**: - https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#speech_synthesis - https://learn.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-text-to-speech - https://cloud.google.com/text-to-speech/docs/apis ::: :::warning **<u>Visual prototype example</u>**: - <a href='https://rebrand.ly/7zuyrke' target='_blank'>Digital storytelling app</a> that I made with React :::  ### 4. Dark theme for Confluence Cloud + BitBucket Dark theme plugins exist for Jira Server and Confluence Server. But none for Confluence Cloud or BitBucket at the moment from what I see. This is a highly requested feature with 600+ votes and 100+ watchers for <a href='https://jira.atlassian.com/browse/BSERV-9949' target='_blank'>Bitbucket</a> and <a href='https://jira.atlassian.com/browse/CONFSERVER-59063' target='_blank'>Confluence</a> Servers. This one's tricky. When we think dark mode, we typically expect it to come out-of-the box, embedded into the product as a native feature - not as a third-party plugin. However, these are long-standing requests. The community has been wanting this for years, and the statuses for both are still at the initial stages of consideration in the workflow. Until Atlassian implements this in-demand feature (which likely won't be anytime soon), you can fill in this gap and give users what they want. The early bird gets the worm. ::: info **References:** - https://jira.atlassian.com/browse/BSERV-9949 - https://jira.atlassian.com/browse/CONFSERVER-59063 :::  ### 5. Centralized Link management - Marketing **[create]** &nbsp; new short links, campaigns, tags **[read]** &nbsp; current click count, target click count, end date, last click, campaign type, traffic source (email, SM, blog, etc.), destination url, internal/external, ... **[update]** &nbsp; destination url, url slug, utm parameters, tags, ... **[delete]** &nbsp; url - track leads, referrals, referral source, repeat clients - monitor, analyze + determine profitable campaigns, high traffic leads + conversion sources, etc. <!-- Source: Originated from my brain 🧠 Popularity Meter/Potential: -->  ### 6. SERP Scraper + Analysis - Marketing A marketing tool for SEO research, competitor analysis, outreach, link analysis + management. Marketing tools are expensive. Analytics subscriptions can go upwards of $4K/year, even $10K+/year on premium plans for industry standard tools. If you can figure out a way to offer marketing SaaS, including a web scraper that bypasses bot detection with rotating proxies - that don't cost an arm and a leg - you stand a chance at marketing it competitively. <!-- Integrate with Ahrefs, SEMRush analytics --> :::danger **Limitation:** 100 free searches/month with JSON REST APIs, like Serpstack, is very little. ::: ::: warning But it's still something. And the number of paid subscriptions for a marketing app in the long run could well justify a high upfront development cost. ::: The cheaper alternative is to go direct to source. Google's Custom Search JSON API offers "100 search queries per day for free" with "$5 per 1000 queries for additional queries, up to 10k queries per day." ::: info **ℹ️&nbsp; References:** - https://serpstack.com/ - https://developers.google.com/custom-search/v1/overview - https://zenscrape.com/#pricingSection :::  ### 7. Asynchronous audio/voice notes - For quick topics or inquiries that don't require hour long meetings, synchronous call scheduling or communication - Great for distributed teams across timezones - Reduce the # of synchronous 1-1 meetings that may disrupt productivity & workflow - Leave comments or reactions on audio timestamps (think Loom + Soundcloud) - Useful for: post meeting follow-up questions/comments/memos, music production, voice over work, global virtual collabs, <a href='https://rebrand.ly/va-business' target='_blank'>virtual assistant for business</a>, async client-contractor communication  ### 8. Pomodoro Productivity through deep work + break cycles. Rest time to include water/coffee breaks, bathroom breaks, recharge, deep breaths, short walks, time away from the screen. Scheduled timers customized to agendas are useful <a href='https://rebrand.ly/byf9wt'>virtual assistant tools</a> that can be synced to team workflows or company timelines. :::warning **Visual prototype example**: - My <a href='https://rebrand.ly/wix-xdn72' target='_blank' >focus pomodoro app for top productivity</a> - made with Wix Corvid ::: :::success **✳️&nbsp; Good for deep focus, work productivity, time management** :::  ### 9. Audio → Text Transcription Uploaded video or audio meeting calls and briefs with contents extracted as text transcripts, minutes, or recap summaries for future reference.  ### 10. Rhymes, Synonyms, Syllables Auto-Suggester A Confluence macro that counts syllables, suggests synonyms, rhymes, and rhyming words/phrases/patterns for specified syllable counts. This would be a handy tool for poets, authors, lyricists, songwriters, and rappers. In the age of digital, it just makes sense to have one place to draft, produce, edit, store, and share digital works and written collections. <!-- This is one of the first apps that came to mind for me because it's one that I can see myself using. --> <!-- I don't use rhyming tools much for poems or short stories, but I find it especially --> My latest poems incorporate rhymes. Although I didn't use a rhyming dictionary while writing these, I can see how it could have helped. In fact, I've used a tool like this before for other written pieces. Most notably, such a tool would be helpful for songwriting where finding the right rhyme of a strict syllable count can change the entire meaning and sound of a line in a verse or chorus. It has helped me quickly identify lists of words with longer syllable counts that I wouldn't immediately think of during songwriting. It doesn't scream: 'viral app' or 'profitable business opportunity'. But if you think about how many authors, writers, bookworms, musicians, and music fans there are, you could tap into this underserved market. Now, I don't know if Atlassian is the right platform for this, considering its primary user demographic. But the tools and infrastructure are there to support it. If you're expecting more than three installs though, maybe pick another idea from this list, or come up with your own using one of the ideation methods mentioned below. <!-- As an example of what I mean, here are two alternative lyrics for a song I wrote: --> ::: info <b>ℹ️&nbsp; <u>Relevant Resources</u>:</b> - https://www.rhymes.com/rhymes_api.php - https://www.npmjs.com/package/rhymes ::: <!-- I wouldn't expect more than ten downloads --> <!-- , but it would be a cool tool to have. -->  ### More Ideas <!-- I listed more ideas on my hackathon project page, which I'll copy and paste here: --> - Vertical page dividers - Animated dividers - Glitter / Gradient dividers - Half + full frames - Page + section frames - Themed borders - Animated Stickers - Corporate Badges - Business Cards - Digital Post Cards - Post-it Notes - Greeting Cards - Button Designer - Logo Designer - <a href='https://rebrand.ly/jxhvt16' target='_blank'>Product Video Production</a> - Email Newsletter Templates - Form, Document, Invoice Designer  ## Actionable, Future-Proof Ideation Tips #### Market Research Visit Atlassian Marketplace and focus on apps with mediocre or poor ratings (3 stars or less) that are no longer being actively maintained. Identify flaws/weaknesses in the apps through user reviews + complaints. Now, design a working solution that addresses and resolves one or more of these issues. If users are complaining about missing or incomplete documentation, provide extensive documentation in your product offering. The winning solution and service comes out at the top. Studying the market will also help you see what apps are already out there. You don't want to build a duplicate app that others have done many times over. Improve your product strategy and offer features that will make the app compelling and unique. Also, pay attention to release date, pricing, reviews, and number of installs. If it is the only app of its kind on the market, has been inactive or abandoned for years, with only a handful of installs, then those are red flags. Maybe there just isn't much user demand for that kind of app. Or perhaps the provider didn't target the right keywords. Atlassian Marketplace is the first place you should go. :::danger **Example of a marketplace app with low rating**: https://marketplace.atlassian.com/apps/1218926/remote-content-website-pdf-image?hosting=cloud&tab=reviews ::: <br> #### Atlassian Community Forum The advantage of building Atlassian apps is that you know exactly who and where your target users are. Members tend to be vocal about the issues they face day-to-day and would more than likely be eager to help your team by sharing additional info. Because it means a possible solution to their problems that will make their jobs easier in exchange. Community forum posts can tell a lot about Atlassian's user base. You can find issues and pain points phrased as questions or as comments embedded in threads. It can give you ideas about the kinds of topics users discuss and ignite ideas that might not have crossed your mind otherwise. ::: info **ℹ️&nbsp; Reference:** - https://community.atlassian.com - https://community.developer.atlassian.com ::: <br> #### Open Issues in Jira - A Gold Mine The real secret (or perhaps not a secret) is Jira's Agile board for reporting open issues. You can get pretty granular with the workflow timeline, popularity, and priorities of unresolved issues and feature requests with filters and search. If you want to be an early bird 'innovator', you will want to make use of this valuable resource. Focus on issues or feature requests with high upvote count + status set to 'Future Consideration', 'Not Being Considered', or 'Gathering Interest'. Filter by software platform (Jira, Confluence) + Component category of interest or expertise (e.g. Site Analytics, Confluence - Automation, etc.). If many user comments show ongoing interest in and demand for a particular feature request, then this indicates a higher chance for app visibility and success upon release. It would at least be trialed by business teams. This is much better than plunging into an idea at full force with blindfolds on. From there, it will be more about designing and developing the right solution and less about marketing and user awareness (although the latter is important too). Once you have decided on what to build, you can leave comments on the Jira issue at every milestone with status updates on project trajectory to keep requestors in the loop. A link to your Jira status or workflow page would be fitting (I would check to make sure this isn't against Atlassian's policy first). This is one way to promote your team's app directly to a targeted audience before it launches at no additional cost. With this method, you are looking to solve a real problem that has been proposed already, which is much different than thinking of a problem to solve. ::: info **ℹ️&nbsp; Reference:** - https://jira.atlassian.com/browse/BSERV-9949 ::: <br> #### The Beauty of Simplicity Sometimes simple is best. Your app does not need to be the most original or groundbreaking to perform well. Common, basic apps and tools have been successfully remade and repurposed time and time again. They remain popular and successful for a reason. A basic utility app won't be the most exciting thing to build, but if it gets the task done, then that's all that really matters (e.g. a to-do app, highlighter app, note-taking app, bookmarker, popular third-party app integrations, etc.). In fact, the most popular Atlassian apps (by # of installs + reviews) are nothing novel (e.g. table filters, charts + spreadsheets, inline Markdown support, diagrams, whiteboards, timesheet tracking, PDF exporter, etc.) Other in-demand apps are merely integrations of third-party apps that exist already. I call this the piggyback method, where marketplace providers piggyback off of the name recognition and success of well-known, established brands. These integrations tend to perform well on any platform because of the amount of visibility and usage they attract. Allocate less resources (time, money, energy) to product marketing + user education (convincing users why they need to install/trial an app with alien features they're unfamiliar with) and more time shipping new features + debugging. <!-- This isn't to say that documentation isn't important because it is. But it's easier to teach someone a new way of tying their shoes than it is to convince them You don't need to build a rocket [equipped] with [the latest tech] to space/a space shuttle. You can build another house/ a humble abode/boding in a residential/suburban area of houses, a few miles south of tall skyscrapers and corporate office buildings. --> <br> #### Carve your niche Lastly, just because an idea is taken does not mean that you need to abandon it altogether. Consider niching down and approaching from another angle. The first app idea that I listed in this post is a relational org chart for Confluence Cloud. An app was released in Atlassian Marketplace (sometime this year I believe), which includes this feature. If you find yourself in this position, you can laser focus your attention and resources on a single feature, and aim to make it the most compelling or comprehensive on the market for your niche. Adding extra features that enhance the user experience or extensibility (e.g. tooltips onmouseover with additional info about team members, live status signals/markers, 1-click meeting invites, etc.) could take your app to the next level. By specializing, you could be a master of one rather than a jill or jack-of-all-trades and a master of none. A team with multiple successful, high-performing apps may not be focused on covering the fine-grained details of a single product offering. You can fill in the gaps to deliver a more specialized, niche offering. Or offer a similar app in a different vertical, industry, or product platform. Fortunately, Atlassian offers a <a href='https://www.atlassian.com/legal/privacy-policy/product-family' target='_blank'>wide range of products</a>, which you can learn more about <a href='https://confluence.atlassian.com/confeval/other-atlassian-evaluator-resources/overview-of-all-atlassian-products'>here</a>. <!-- Atlassian has multiple products; just because an app was developed for one product, doesn't mean that you can offer the same app in another product. --> <br> I hope these tips are helpful!