Stocketa — PaulStamatiou.com

It was March 2020, I used to be in New England when covid quarantine had simply start and I discovered myself way more homebound. In these conditions I am not one to only do nothing. I all the time have some kind of undertaking or pastime to maintain me busy, be it taking and modifying images, writing detailed weblog posts, or coding one thing.

I had all the time needed to be taught iOS improvement, so this felt like the right alternative. I used to be notably eager to be taught SwiftUI to construct my designs natively. Years again I had dabbled with writing an Goal-C app, but it surely by no means fairly stuffed me with pleasure, to say the least. As a designer, I’ve spent the final decade getting good with prototyping instruments and frameworks to imitate sensible, interactive cell prototypes. Constructing it myself was the pure subsequent step to present me much more management over the expertise, and get even deeper into the craft.

I began studying Swift and SwiftUI fundamentals with programs like Design+Code, and Hacking with Swift. However I knew myself—I be taught finest with a undertaking of my very own. I knew precisely what I needed to construct: a greater inventory portfolio tracker. The inventory market had taken a plunge with covid and I used to be doing dozens of trades per week with all the things on sale. It will be enjoyable to have a easy app of my very own to trace the efficiency of my trades as an alternative of coping with the subpar websites and apps from my stockbrokers.

Little did I do know this undertaking would devour my nights and weekends for over two years, usually spending 10-20 hours every week on it. I constructed a ton of performance, sweat all the small print, wrote a complete node backend for it, created an LLC for it, and managed an energetic Testflight. I used to be studying Swift and SwiftUI alongside the best way, so I used to be usually redesigning and rebuilding as I went.

Finally, I made a decision to cease pursuing it. I will get into the why a bit later. This put up is for me to doc Stocketa. I designed and constructed lots that I am pleased with and need to have someplace to archive it earlier than I pull the plug.

What is was Stocketa

Stocketa was a easy portfolio tracker designed with care. It got here out of my frustration of getting to examine the clunky apps and websites that my brokers had simply to get a glimpse at how my investments had been doing. I am an informal investor and do not want a lot from a device like this however I had belongings in varied locations, and I simply needed one straightforward and well-designed place to examine them. I needed to see actual per-transaction achieve/loss information, primarily based by myself price foundation.

Whereas there are tons of apps, brokers, and neobanks that deal with this, nothing fairly felt like what I needed. There have been a number of varieties of options on this area:

• First off, there are easy inventory apps like Apple Shares that allow you to see inventory charts, information, and extra. They’ve good knowledge and do not require any accounts to make use of. Nevertheless, they provide no performance to log your holdings and monitor your positive aspects/losses.

• There are many dealer apps (e.g., Robinhood) that allow you to commerce and monitor your holdings, however they solely allow you to see your holdings from them, not from another monetary providers you would possibly use.

• Then there’s a complete class of what I would name superior inventory providers like TradingView (and several other which have since died or pivoted over time), however they don’t seem to be mobile-first or as elegant as I needed.

• There are broader funding advisor providers like Private Capital. Whereas they do usually have some aggregator performance to hyperlink up your different accounts, they don’t seem to be that highly effective for diving into particular person belongings, aren’t notably well-designed, and are primarily targeted on upselling you on their very own funding advising providers (critically, I used to get limitless 8am calls from Private Capital).

• And there are many smaller apps on the App Retailer the place you possibly can monitor your holdings however the design and UX leaves lots to be desired. I’ve tried most of them.

From a design perspective, I typically discovered that monetary apps bias in direction of density when displaying your belongings. They assume you’ve got tons of shares and prioritize a listing view the place it’s important to faucet in to a element view to see extra information. I discovered myself always tapping in, manipulating a chart or taking a look at some primary stats, then swiping again and repeating all that for a number of shares. It was not straightforward or the form of at a look information I needed.

That left me with my problem. I needed a easy portfolio tracker aimed on the informal investor. It did not should do all of it, but it surely ought to goal to do just a few issues effectively. An app only for me.

Going customized

I used to be greater than thrilled to be engaged on a brand new app from scratch. After years of working at giant firms with inflexible design methods and gobs of stakeholders for each little design resolution, I used to be craving for some artistic freedom. Freedom from course of, freedom from typical design constraints. I might be in full management, designing and constructing it myself. It was my side project in spite of everything.

I had gotten uninterested in designing for conventional cell apps. the sort.. you add a tab bar, a typical navigation stack, web page header and the app already feels considerably primary, muted, and restricted out of the gate.

This was my place to have enjoyable. I needed to go customized and toss out no matter parts the system provides you free of charge. And I knew that by having to determine tips on how to construct varied UI parts from scratch, I would be taught lots alongside the best way. Nearly all of Stocketa’s UI is customized.

I’ll say that going customized is nearly all the time the completely flawed factor to do 99% of the time. The working system you are working in—be it iOS, Android, macOS—has invested a ton in a highly-considered suite of parts. They’re remarkably accessible, well-tested, and work on a wide range of units.

It is completely no small feat to think about making a customized element on your app. Nevertheless, when going customized does make sense and also you’re okay with the added scope and accountability, the app turns into your canvas to do no matter you need and make it yours.

The primary space the place customized made sense for me was basic app navigation. After I received began, I knew I needed this app to have minimal app chrome. I did not need a typical tab bar and header taking over area. I wasn’t going to require a lot navigation: most issues would simply stay contained in the inventory playing cards from the house timeline.

The app could be targeted round exhibiting extra with much less. Personally, I solely cared about monitoring just a few shares, however I hated the work of continually having to faucet in to see a element view, or work together with the chart. As such, the primary scroll view wanted to be extra immersive and never get occluded by pointless app chrome.

It began with app navigation, customized inventory playing cards, sheets, and extra. For sure, I spent lots of time on the small print with all the things being customized. Under are just a few examples:

Designing and constructing

I began with the fundamentals: getting a scroll view of inventory playing cards working, including charts, and hooking it as much as a database for persistence (initially Core Knowledge earlier than transferring to Firebase). Then I added the requisite community calls and polling to replace the inventory card from a monetary knowledge supplier. I began with IEX as the info supplier as they’d an honest API, cheap pricing, and allowed business use, which might be required for a shopper app like this to go on the App Retailer.

One of many preliminary key selections with Stocketa was that I needed to trace inventory transactions in a complete means. Merely logging the variety of shares you had for every inventory was not going to chop it. This ended up being a major quantity of labor to do correctly, but it surely was vital:

• For every inventory sale or buy I needed to have the ability to show not solely the full achieve/loss, however per-transaction achieve/loss so you possibly can inform if a person transaction was an excellent commerce.

• On the subject of inventory gross sales, I wanted to know the fee foundation technique (FIFO, LIFO, et cetera) so I may appropriately calculate and show the realized and unrealized positive aspects on a selected transaction. When promoting shares, I additionally wanted to know from which earlier transaction or transactions the shares could be bought so I may get the right price foundation and precisely calculate the achieve/loss primarily based on the fee foundation technique.

• After which there was coping with inventory splits, which appears easy at first look however ended up being fairly a bit of labor to construct in a sturdy means: not merely altering earlier transactions. They need to be mechanically utilized for brand spanking new splits, but additionally in a position to be manually utilized in case you did not log split-adjusted transactions.

A glimpse at a part of how complete transaction varieties in Stocketa had been proven.

In some unspecified time in the future I gave it a reputation: Stocketa. In Greek you would possibly say “marketa” (Μαρκέτα, although αγορά may be a extra correct phrase) when referring to a market, so this was like coalescing Inventory and Market with that in thoughts.

After I was interviewing for a brand new job in 2021, I created these slides as a part of my presentation after speaking about my work at Twitter for the earlier 9 years. These weren’t all of Stocketa slides, and there was lots of further speaking factors I had for every slide, however you get the thought.

A be aware about SwiftUI

I stored designing, constructing.. after which redesigning and rebuilding. One of many negative effects of studying Swift and SwiftUI as I used to be constructing this was that I used to be always redoing particular pages and components of the app as I went. I regularly discovered higher methods to construct issues, and equally I would regularly refine designs. A few yr or so into constructing Stocketa I wrote about my experience with SwiftUI. A lot of that also rings true.

SwiftUI has come a great distance since iOS 13. It is extra performant, there’s extra parity in obtainable parts and performance in contrast with UIKit, and also you get extra management over issues. And with iOS 17, you get some goodies like shaders, keyframes, scroll transitions, and extra.

There’s nonetheless a spot between the varieties of issues you are able to do with AppKit and UIKit, however SwiftUI is undeniably a robust device that is dramatically extra approachable. And never only a coding device; it is an ideal design device. Designers can shortly lay issues out, hook up interactions, and get an actual really feel for a design utilizing a local device.

Nearly all of Stocketa’s UI is constructed with SwiftUI. There have been only some events when I discovered it vital to make use of UIKit to realize some aim.¹
None of this may have been attainable, or drawn me to take a better look into constructing iOS apps, if it hadn’t been for SwiftUI.

What I constructed

I used the app every day and continued pouring time into each characteristic and element to satisfy my top quality bar. Whereas I initially deliberate for this to be a easy to construct app that may not require a backend, and even any consumer accounts, that didn’t final for lengthy. I shortly realized I wanted my very own backend to unlock just a few issues.

At first, this was so I did not have to incorporate the API key for my monetary knowledge supplier contained in the app for safety causes—I would not need somebody to search out it and begin working up my invoice by abusing it. I created a backend proxy for the API with rate-limiting and throttling. Then, I needed to have or not it’s authenticated with consumer accounts, so I added Signal In With Apple together with a inventory knowledge caching system in order that I solely needed to fetch stats for a inventory as soon as with a sure time interval (relying on the actual stat that was both seconds, 24 hours, or weekly) no matter nevertheless many consumer accounts wanted that inventory information. The primary aim with that was to additionally cut back my prices related to monetary knowledge API utilization.

By this level I actually began having fun with the velocity at which I may replace endpoints and enterprise logic totally on the backend. I began transferring logic I had within the app to the backend. Stocketa was beginning to come collectively.

Despite the fact that this was only a solo undertaking, I used Linear to maintain monitor of duties, concepts, options, buyer suggestions, and milestones.

I had prioritized lists of issues to construct and bugs to repair. I used to be utilizing—and loving—Linear for this. This is a listing of most of the issues I constructed for Stocketa:

I ran a small TestFlight alpha with shut associates, then more and more I added extra folks. At one level I used to be as much as round 1,000 folks. That was probably the most I needed to permit. I acquired a number of suggestions from general nice first impressions (beneath), to basic characteristic requests, and naturally a number of bug reviews.

Already the app is filling a necessity for me in its private method to monitoring investments: no pushing for gross sales, no integrations with brokers and no pointless permissions. Sensible.

Merely amazed on the SwiftUI work you’ve poured into this app. So stunning. The onboarding alone is a masterclass in consideration to element. Bravo.

adore it, this feels so polished and slick already… actually nice use of SwiftUI

Simply received the invite, added my shares… the animations are stunning, design is clear and exact… it’s throughout stunning. Congrats!

F**ok, man. This app is unbelievable. You’re constructing all of this by yourself?

Dude. This app is f**king stunning. Actually nice job. Simply imported shares – tremendous straightforward.

This NUX is insane. The particles whenever you add a inventory. Provides me the pleased mind chemical compounds..

I had 1000’s on a ready listing however there have been API and internet hosting prices related to the elevated utilization that I did not need to bear but, in addition to an enormous improve in help and buyer suggestions that took lots of time to handle. You begin to hear the identical varieties of suggestions, and it simply turns into a chore to handle that many emails. That excellent news was that one thing was resonating and other people cared sufficient to undergo the work to ship in bug reviews and have requests.

The web site

In some unspecified time in the future early in characteristic improvement I took a break to give attention to the web site. At first I needed a easy touchdown web page to construct curiosity, and accumulate emails for a waitlist so I may preserve folks within the loop. And I did not need to spend that a lot time on it.

Video: Preliminary Stocketa teaser homepage.

There was nothing fancy or notably particular about this preliminary web page. It was simply one thing fast I needed to get out the door. And now, some time later, there’s lots I hate about this early design. The background texture was too sturdy, the headline alignment feels odd with the cellphone.. however I digress.

In that preliminary design I did begin taking part in with some wave-related components—a free reference to inventory market charts going up and down. After which so as to add to that, I constructed just a few mini inventory playing cards gently hovering in place (because of offset-path CSS together with 2 keyframe animations) within the background. Every inventory card had an SVG line chart—loosely primarily based on that inventory’s precise efficiency across the time—that may animate on web page load. I ended up protecting a model of those mini inventory playing cards on the most recent model of the web site, after which on an onboarding display contained in the app.

The unique inspiration for these random floating inventory playing cards was from my now out-of-date work page the place I highlighted initiatives with some giant playing cards, every with their very own intro animation primarily based on the undertaking. Certainly one of them was for my work on Twitter Video, the place video clip thumbnails would fan out from the cellphone on hover (proven beneath).

The floating mini inventory playing cards on the Stocketa homepage had been impressed by the hover state animation on this undertaking card from my previous portfolio web page.

Homepage design v1.0

In early 2021 I ended up getting round to designing and constructing out the primary full homepage for Stocketa. I had sufficient performance and options constructed that it felt worthy of investing a while into showcasing them on the location.

Numerous app web sites on the time (and nonetheless now) had the everyday hero part on their homepage: some app screenshot in a cellphone body off to at least one aspect, with accompanying header and subtitle textual content adjoining. Nothing flawed with that, however I needed one thing a bit extra partaking. I wasn’t totally all in favour of optimizing for conversion, and cramming lots in above the web page fold.

Preliminary design explorations in figma.

I believed it might be good to attempt to do one thing the place the 3D cellphone body was angled after which started to alter place on scroll whereas a short teaser video of the app performance performed. Apple had executed one thing comparable lately with product pages, such because the first-generation AirPods Professional. They used over 100 frames of the AirPods that may progress as you scrolled:

Instance of a method utilized by Apple.

There’s lots of methods to realize an impact like this. One route route is utilizing Lottie and primarily changing every body of your video or animation to a base64-encoded string in a json file for the Lottie internet participant to handle. It isn’t a flawless answer, nevertheless, and might incur some giant file sizes relying on what you are doing. It is best for vector micro-animations, not giant units with complicated visible content material. I additionally did not need to incur the price of that enormous preliminary json obtain blocking the very very first thing you see on the location.

As a substitute I opted to have javascript show a sequence of frames composited to <canvas> together with an offscreenCanvas for efficiency. I used Rotato to import my brief Stocketa screencast, create a 3D cellphone video, after which create a PNG sequence of frames. I wasn’t tremendous happy with the standard—the cellphone body did not look tremendous sensible and had some tough pixelated edges—but it surely was adequate in comparison with doing all of it by hand with different design instruments.

Scroll-based Stocketa 3D cellphone, paired with refined parallax for header components and the floating inventory playing cards. There have been another minor scroll results just like the gradient glow behind the cellphone spreading.

I then exported optimized clear webp, and jpg recordsdata (with accompanying alpha masks created in Sketch to avoid wasting bandwidth) and had the javascript detect which file kind to make use of for the animation. Whereas I used to be happy with how this impact turned out, it ended up turning into a moderately big annoyance after I needed to replace the content material later—it is a ache to generate, optimize, and replace the picture sequence every time.

And at last, as for the remainder of the content material on this web site I went with a primary characteristic card method, generally known as a “bento field” format; notably when various card sizes are used. It is a format that I’ve grown to love a bit much less over time because it has develop into quite common.

Homepage design v2.0

Video: New Stocketa web site

A yr later, it was time for an additional redesign. Stocketa had extra performance, and much more refinements. I had extra to share, and I had grown uninterested in the 3D cellphone body interplay. It was neat but it surely was simply there for present; it wasn’t one of the best ways to point out off components of the app because it scrolled off display. It was additionally a ache to replace the body sequences. I primarily simply needed to take screenshots of the actual app from the iOS simulator and add them.

Individually, I did not need a tremendous lengthy web page with lots of repetitive modules and screenshots. I needed a skimmable characteristic listing. I started to marvel if I may get away with only a single cellphone body on the location that confirmed all the things.

I finally landed on a two pane method: the gadget body was all the time in view, mounted on the correct aspect, whereas the scrollable left aspect contained the characteristic listing. The trade-off with this design was that it might require hovering over every characteristic merchandise to have the ability to replace the screenshot proven within the gadget body. I figured an attention-grabbing compromise to that may be having the telephones stack up and away on scroll. Nearly just like the previous Apple Time Machine backup UI.

I constructed a number of variations of this and located that it did not really feel nice. There wasn’t a lot scroll distance so in case you scrolled at a traditional or quick tempo, you’d see a bunch of telephones flicker by you because the animations tried to maintain up. It was too busy and hectic, to not point out lots of state administration to cope with leaping between your present scroll-based place screenshot to a hover-based screenshot in case you hovered over a characteristic listing merchandise. I ended up simplifying a bit and solely having the scroll-based UI handle only a few states: the intro cellphone body, the primary characteristic screenshot, after which a remaining animation on the backside of the web page.

The web site’s cell format makes use of a carousel of screenshots within the header.

After checking out the core interactions, I had to determine tips on how to cope with cell and pill interactions. The repair two-pane format made this a little bit of a problem. I ended up turning the header right into a carousel of gadget frames you possibly can scroll via.

After which lastly, I added just a few small bits of polish ✨:

• Hero title textual content gradient adjustments primarily based on scroll

• The icon accent coloration and background circle coloration change primarily based on scroll

• When hovering over any characteristic listing merchandise, there’s a refined background coloration change created by an overlaid gradient. SVG-created noise/grain can also be overlaid on prime of the background.

• When hovering over any characteristic listing merchandise, or whenever you’re reached the tip of the web page, there is a refined icon particle emitter that floats up icons from the underside. Every characteristic used a special icon for this.

Particle emitter results: icons float up from the underside, primarily based on the characteristic listing merchandise being hovered on. There’s additionally one other very refined emitter producing some tiny floating particles.

General I favored this design, however wanting again at nearly a yr later, the gradient textual content and background colours really feel a bit an excessive amount of for my style now.

API troubles

Finally it turned clear that the standard of monetary knowledge Stocketa relied on was not reducing it. The primary supplier I used, IEX, would generally have charts outdated, inaccurate costs (particularly for much less steadily traded belongings on the IEX alternate), and lacked knowledge for OTC markets (they required you signal a dear license immediately with OTC), in addition to considerably restricted knowledge for Nasdaq-listed shares (even basic items like pre-market and after-hours knowledge). The final straw was when IEX dropped mutual fund knowledge totally, all with none advance discover.

I later used one other supplier that allowed business use that did not cost an excessive amount of ($100/month) however I had much more issues with their knowledge and reliability. Endpoints had been even returning previous and incorrect knowledge, and even as soon as alerted to points, their workforce wouldn’t solely ignore the bugs however declare they did not exist. I could not ship Stocketa with unreliable monetary knowledge to folks that may be paying me for a top quality app.

I additionally couldn’t get sure varieties of knowledge with paid APIs. I needed to construct a scraping engine on my backend that may go to just a few websites to get the info I wanted for much less up to date knowledge like dividend yield, earnings dates, and even for OEF knowledge (different suppliers could be greater than a day delayed for this at occasions).

For sure, this was all irritating. It was a problem, arduous to keep up, and unreliable. On the similar time, my backend continued getting extra concerned to cope with increasingly more of the intricacies of coping with shares. Issues like coping with firms merging or inventory tickers renaming.

~13k LOC node/specific backend (proven in Zed however I now desire Cursor) for Cloud Run. It manages auth, caching, information, core enterprise logic, cleansing up knowledge, notifications, widgets, working with a number of API, and a little bit of scraping. This was my first time doing something of this dimension with node and typescript.

Beginning out I believed gaining access to a inventory market knowledge API could be the straightforward half. I shortly discovered in regards to the world of market knowledge feeds, SIPs (Securities Data Processor), and vendor agreements.

High quality market knowledge exists, it is simply not made for indie app builders. It is very costly. A number of main U.S. market knowledge suppliers have business use knowledge pricing beginning at $2,000 per thirty days. And that is not for all the things, in case you want issues like index knowledge or choices knowledge, there’s extra prices forward.

I spoke with one among these suppliers final yr, making an attempt to get them to know how small app builders want reasonably priced business use knowledge. They introduced a startup-focused plan that they had been pitching for $499/month along with a per-MAU payment. Even that I might nonetheless think about very costly for my wants, and it looks as if that will have fallen by the wayside and is now not promoted on their web site.

I may spend months growing Stocketa, incurring that month-to-month API price till I went stay (or danger getting shutdown if I attempted to make use of a less expensive non-commercial plan through the TestFlight part) then not make sufficient cash to cowl prices on the App Retailer and should shut it down shortly after in any case.

General, it seems like nobody on this cares to cater to the developer and startup crowd, or they consider there’s not a lot cash for them to pursue there. This was the identical case with Plaid after I briefly appeared into gaining access to their investments API to mechanically sync holdings knowledge. They required some kind of minimal size contract.

Why I finished engaged on Stocketa

After I began this undertaking, I actually started to marvel why the place weren’t any nice indie apps targeted on shares like this. Simply easy, well-designed apps to assist the informal investor preserve monitor of their investments. Properly I feel I used to be beginning to get my reply: getting high quality monetary knowledge, even only for the US, is a nightmare. You’ll be able to solely get it when you have some huge cash to put money into your undertaking. And good luck in case you really need an ideal API with complete worldwide knowledge.

I can not assist however draw parallels to what occurred just lately with the Twitter and Reddit APIs. The chance of working your undertaking or enterprise solely on prime of one other firm’s API, regardless of how dependable you suppose they might be, is extraordinarily excessive.

Stocketa was all the time meant to be a aspect undertaking—by no means an actual enterprise. For it to be an actual enterprise, I would want to maintain including performance and introducing extra methods to make cash. I could not simply have a easy and stylish little app monitoring your shares. It must do extra, like dipping into monetary recommendation providers, or providing inventory buying and selling. That is a hyper-competitive area lined with huge firms. That may imply a busier, cluttered app. The precise purpose why I began Stocketa was due to all these cluttered apps.

I made a decision to cease engaged on Stocketa for just a few causes:

• Knowledge: As talked about above, all of the bills and challenges related to buying dependable, reasonably priced, and high-quality monetary knowledge that may make it possible to launch this as a fairly priced subscription-based app.

• Assist: The related funding in buyer help. Based mostly on how folks had been utilizing my TestFlight, it was going to be a major funding to maintain up with help, emails, upkeep, and ongoing characteristic improvement. Nevertheless, a part of this was possible attributable to complexity incurred from having to repair or skirt round unreliable knowledge. There have been a number of issues I needed to maintain bettering and refining with the app and that would not finish any time quickly.

  If I had been to launch and cost for Stocketa, I might really feel particularly on the hook to resolve points in a well timed method and that is not one thing I can accomodate now due to the following level.

• Time: And most significantly, I’ve discovered one thing extra worthy of my full focus and a focus: Rewind AI. I sunk lots of nights and weekends into Stocketa over time. It consumed each spare second, even taking up my occasional time writing weblog posts right here after I had one thing to share. That was one thing I actually missed. Now, I might a lot moderately be focusing my artistic pondering time on how I can enhance and develop Rewind.

I initially began engaged on Stocketa with one aim: to be taught Swift and SwiftUI my means with a undertaking that was attention-grabbing to me. On the time that was scratching my very own itch of protecting monitor of my investments. Whereas it become a a lot bigger and unshipped undertaking, I discovered a ton about native iOS improvement and was in a position to push myself creatively.

As of late I am happiest investing my design, product and improvement time into Rewind AI, the place my SwiftUI data discovered with Stocketa has been tremendously useful.