Hardcover Live

Summary

In this conversation, Adam and Ste discuss their recent activities and plans. They talk about embracing the Paris lifestyle, the culture of characters in Japan and South Korea, upcoming events, and their exploration of moving from Next.js to a React app within their Rails app. They also discuss the challenges and complexities of web development, the potential of open-sourcing their codebase, and their plans for building customizable stats and a dashboard for Hardcover. The conversation focuses on designing the dashboard and stats page for the Hardcover app. They discuss the layout, widgets, and insights that should be included. They also consider the technical aspects of data loading and caching. The conversation ends with a plan to create different widgets for the dashboard and stats page.

Takeaways

  • Embrace the local lifestyle and culture wherever you are.
  • Consider the use of characters and cartoons to denote brands and create a unique identity.
  • Explore different frameworks and technologies to improve the performance and development process of your app.
  • Consider open-sourcing your codebase to foster collaboration and innovation.
  • Design customizable stats and a dashboard to provide users with personalized insights and a better user experience. The dashboard should include widgets for currently reading books, social activity, journal entries, and progress charts.
  • The stats page should provide insights into reading habits, such as genre preferences and reading slumps.
  • Widgets should be adaptable and allow users to customize their dashboard.
  • Data loading and caching should be optimized to ensure fast loading times.
  • Different headers and controls may be needed for the dashboard and stats page.
  • Narratives and qualitative data can enhance the stats page and provide more meaningful insights.

Chapters

00:00 Embracing the Paris Lifestyle and Culture of Characters
05:31 Exploring the Move from Next.js to a React App within Rails
12:31 Challenges and Complexities of Web Development
14:37 The Potential of Open-Sourcing the Codebase
20:27 Building Customizable Stats and a Dashboard for Hardcover
31:59 Designing the Dashboard and Stats Page
55:11 Customizable Widgets for Personalized Dashboards
56:25 Optimizing Data Loading and Caching
58:07 Adding Insights and Qualitative Data to the Stats Page

What is Hardcover Live?

Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.

Adam (00:01.45)
Hey, hey, stay, how's it going?

Ste (00:03.573)
Hey, Adam. I'm pretty good. Amazing, actually. Autumn started in full force, and I'm enjoying it. Everybody's wearing their jackets. Everybody's wearing the good clothes. It was really nice to walk around and get a hot baguette when you're lucky to find it at the blunger.

Adam (00:11.652)
-huh.

Adam (00:26.87)
You're just fully embracing that Paris lifestyle now.

Ste (00:27.114)
you

Yeah, 100%. Yeah, that's what I mean. I'm doing like lots of walks around the neighborhood. I found like a cute Japanese store with lots of stuff. Let me show you. I got this guy. at him. Yeah, a little frog guy. Yeah, from a brand called Froggy's. Yeah, I love him. So yeah, it's been good. It's been a good week.

Adam (00:44.944)
yeah, little frog.

Adam (00:55.404)
I love how in Japan and South Korea, there's such a big culture of characters to denote brands. Cell phone companies have characters. I think we were in a local market, a street market, and the street market, basically the mall, had its own character that even had a person coming out in costume in this character.

Ste (01:21.781)
Wow, that's totally not surprising. I mean, knowing it's like firsthand, but well, not in Seoul, but in Tokyo. But yeah, I love that as well. Like every little thing has a character and the cartoons are amazing. There's like that cartoon with like egg yolk. That's what was that name? Well, yeah, I'm forgetting it, but.

Adam (01:41.93)
yeah.

Ste (01:47.267)
There's like so many stuff like from Hello Kitty to Lion Friends and yeah, lots of... Gudetama, yeah, my God, yeah. Now I remember the song as well. Yeah, crap, okay, I'm gonna have that stuck in my head for quite a while. But yeah, I love that. I have lots of stuff around that now is in the top shelf so my son can't like reach it and eat it because he's at that phase.

Adam (01:54.094)
Good etama.

Ste (02:15.416)
But it will soon like yeah, he'll soon make good use of them Yeah, how about you how's your wing been?

Adam (02:21.164)
Nice.

Adam (02:27.246)
It's been pretty quiet, actually. think the week before last, we had just so many events every day and every night. this week, I think we just left our calendars mostly clean, and I've been having more relaxing nights and just lazy days, which has been fun.

Ste (02:50.059)
Yeah, I bet that's good. There comes an age when a late night out has more of a toll than you anticipate. I've had lots of those lately.

Adam (02:54.628)
Thank

Adam (03:04.086)
I'm, I'm excited because, we are doing like two cool things tomorrow and Friday. We're going to, there's an event called eat, drink SLC, which is like, it's in a, local bird aviary. And so it's like a food and drink event there where you, know, it's kind of like food and wine and walking around and looking at birds. Sounds like fun.

Ste (03:25.779)
wow, that sounds amazing. So actually like, yeah, aviaries, okay. I didn't know aviaries were still a thing. So you're like dining among birds and wow, okay, that must be fun.

Adam (03:34.338)
I know.

Adam (03:39.642)
Yeah. And then on Friday, I'm going to, Utah JS conference here in Salt Lake. So it's a big, really big JavaScript conference and it's, it's kind of neat because it's in a, like a movie theater. And so, like, I think there are three different tracks. So I'm imagining there's going to be three different movie theaters, each with a different, like, like, I think they're like half hour or 20 minute long talks and then like two or three an hour.

Ste (03:54.145)
Okay.

Adam (04:06.936)
for like the entire day. So it's just gonna be a fun local JavaScript conference with, I'm imagining hundreds and hundreds of people.

Ste (04:15.655)
Yeah, that sounds like a lot of JavaScript. Nice.

Adam (04:18.956)
Yeah. And I know like the creator of like a, tan stack router and, table are there. think the creator of remix has a talk, cause he's based here in salt Lake city too. So yeah.

Ste (04:30.438)
wow, okay. really, okay. Yeah, Tanner Lindsay was like in Salt Lake as well.

Adam (04:38.902)
Yeah, it's like there's, there's a crazy JavaScript community here in Salt Lake. Like the fact that remix and Tanstack are both like right, right here. I need to go to more local, like meetups because like they, they talk, they go to that, like they speak at some of those, meetups too.

Ste (04:48.714)
Yeah.

Ste (05:01.077)
Yeah, that's amazing. Those are some of the biggest and best executed things in JavaScript right now, which is what we're basing our app on. Well, maybe not like we were just, Adam is working on seeing if we can do some nifty backend stuff. So right up to this point to get into the technical bits, we've built hardcover on Next .js.

And that came with some quirks that some of which you already know, like the mobile app doing its certain thing now and then, and slow loading times and stuff breaking. So now Adam was trying something pretty new and pretty amazing.

Adam (05:49.495)
You

Adam (05:56.448)
Yeah, I spent, I spent like Saturday and some of Sunday and Monday and Tuesday working on just exploring what if we moved from Next .js and moved everything into a React app within our Rails app. So we've always had a Ruby on Rails app. That's kind of the, the backend of hardcover. It handles a lot of the database work, a lot of the things that require lots of different background processes like a

you know, loading a CSV library, loading book data from external sources. All of that's always been in Rails. And then we've always had our front end in Next .js with React kind of being everything. Like most of it's 95 % of it's React and then 5 % of it's like Next .js specific. And so we're thinking about keeping that 95 % that's React, moving that over to Rails and then rewriting that 5 % that was in Next .js into also into Rails.

And it's like, did some spiking on it this weekend and it's, it's looking like it's not going to be as big of a task as I thought. I think the hard part is getting like the first page to just work a hundred percent correctly. And then pages after that, I think are going to be relatively easy to convert. Because it's, it's mostly changing it so that instead of next JS going out and hitting graph QL and then graph QL hitting our Postgres database or rails.

Now it's just gonna be rails hits our database and renders a react view. And so it ends up being faster for the user, but also faster for us to develop because everything's in one code base. And yeah, I've been pretty excited. Like I've been like reading every bit of documentation around inertia. can read, I've been...

listening to podcasts that the creator was on to like get his like mindset and thought process. And yeah, I'm very, very excited about it.

Ste (08:02.731)
Yeah, that's very good to hear. And good to hear that it's going to be an improvement because it's so tangled nowadays. People think that's pretty straightforward, but the choices themselves on what to build an app really make things super, super complicated down the line, especially now that we scale and...

You know, for instance, this is a move because we were talking earlier that it's going to allow us to render huge amounts of data. So for instance, when you go to your stats page, you've noticed probably that now sometimes you get the server error. And that's because there's just a lot of data that's being basically calculated as you're going on that page. And we're trying to make it so that that loads.

way faster, and it's also going to impact another thing which we're prototyping right now, which is the dashboard. We've talked about this. I think we also did two lives on it, and lots of you gave us feedback. So maybe if it works out, maybe we can squeeze this in and tie it with stats so you can see some stats on your dashboard and have that dashboard that we promised, which we...

Many of you like a lot of you think it's gonna be like a very good anticipated feature Based on what you've told us. So yeah, we're trying to like push as much stuff out the door as possible. So It's it's exciting and I love that you're excited about that That move and web development can be such like a tangled mess Sometimes I don't know how we got that way. I'm You know, I've been learning

Adam (09:48.194)
Yeah.

You

Yeah.

Ste (09:56.427)
these years and probably don't know what's come before. Well, you were in the middle of it, but even so, stuff has gotten easier, but it's also like, what the hell? I'm looking at game developers and seeing what kind of stuff they do and how they just use a Postgres database and they render this whole MMORPG with 100 ,000 characters with

traits and narratives and that kind of stuff. And we're rendering like a box and we have to do like 10 magic tricks in the background just to show it in the, it's a different thing I know, but yeah.

Adam (10:31.685)
You

Adam (10:39.47)
Yeah. Yeah. I, I think like, me, the, the, the point at which everything diverged from being simple to being complex was in, I want to say like 2010 or so when we switched from having the JavaScript that we, we wrote from being the JavaScript that we shipped to having a compiler after the JavaScript.

Because before that, we weren't compiling JavaScript in any way. We were just including JS files, and then you would write your own files, and they would load in sequential order. And maybe you would have one page, and that page would just load all the JavaScript for your entire app. And nowadays, we're doing such complex things with code splitting, with a lot of additional browser support. Apps are obviously a ton better than they were 15 years ago.

But in order to get to that point, we had to add a ton of complexity to them.

Ste (11:46.795)
Yeah, yeah, it's like when you run a startup, you can so easily get to a point where the tech stack actually weighs you down so much. And we want to ship fast, and shipping fast means we've got to develop fast, we've got to make it fast so that it's easier to debug. And right now, I'm guessing that's not happening, especially for a small team like ours. If you have 10 devs just like...

ironing out the bugs in the app and doing quality check on everything. That may be different, but there's just a bunch of us. Definitely a different story. We have to do the stuff to be able to adapt, but I'm sure it will pay off from other points of view as well.

Adam (12:27.16)
Yeah.

Adam (12:31.554)
Yeah.

Adam (12:42.134)
Yeah, I think, I think because we did go down this route, it gave us an API. Like if we had gone down the rails first route, we might not have ever created an API in this way. We might've tied the entire front end to rails directly rather than to an API. So like, as we're moving back to rails, we're going to keep that API point. And then that's the API that anyone can use. That's a hardcover member and.

Ste (12:48.491)
Mm

Adam (13:08.706)
We're still going to be using that as well. But now the first load of the page is not going to use the API. It's only going to be used after the page has loaded and you're like browsing hardcover. That's when it's going to be using the API. So I think, like we, got to it, like we're potentially getting to a good place where we'll have the best of both worlds, which is fast loading and an API. which is kind of a roundabout way of getting there, but Hey,

Ste (13:33.717)
Yeah.

Adam (13:37.986)
I think it works.

Ste (13:40.777)
Yeah, mean, if it works, it works. And we've talked about open sourcing. I think that's good because we'll have the API, which is very important. And we'll also have the code base. But we need the API to basically live up to our mission to help build that infrastructure and then make it accessible. Yeah.

Adam (14:08.562)
I had a chat with our lawyer last week around a couple company -specific things, including this open -sourcing idea, how we license the code base as we open source. So I'm working with him to kind of hammer out the details. I think I'm leaning towards using a license that could be the same one that Mastodon uses. It's a...

Ste (14:21.439)
Yeah.

Ste (14:35.189)
Mm.

Adam (14:37.902)
Let me see, it's called the GNU Afro General Public License. This is a, I'll drop it in the chat here. Yeah, it allows for making available the complete source code of license works and modifications, which include larger works.

Ste (14:46.384)
Okay.

Adam (15:07.655)
under the same license. Contributors provide an express grant of patent rights. When the modified version is used to provide a service or a network, the complete source code of the modified version must be available. So in other words, if someone forks hardcover and creates something of their own, that thing also has to be open source with the same license.

Ste (15:27.453)
Open source. Okay, that sounds good. mean, basically, you know, at our size, I guess the biggest risk that we worry about is someone copying hardcover and coming in like a competitor with much more resources, coming in, getting the code base, applying like a different brand on it, and basically building the distribution that we don't have, and basically wearing this into the ground with that. But I'm guessing this would make it.

like easier and our mode would be like, it always has been the hardcover brand and how we're different from like a, you know, mission and presentation point of view.

Adam (16:16.351)
Yeah, that's kind of what I'm hoping to. It's so hard to understand what the value of that is at a community level. watching so many different book startups over the years, I tend to think that anyone that I've talked to in this space seems to have just the best of intentions. And even if someone came in with bad intentions, I don't feel like they could attract

Ste (16:19.923)
Yeah.

Adam (16:44.908)
like a following, like a social following based on theft. Like even, even when we use like a AI generated image, like we get a ton of pushback. So imagine use, imagine if the entire site was like, you know, pirated, I think people would raise up arms.

Ste (16:50.431)
Yeah.

Ste (16:56.213)
Yeah, exactly.

Ste (17:01.823)
Yeah.

Yeah, exactly. even if it was, I was also thinking, what if someone who's very well -funded basically gets our code and never mentions that they copied it. But then again, there's so much thought process, which is basically in our heads, that has gone into how things are made that I'm sure anybody would have to do a lot of catching up on.

to basically execute and understand how we did the stuff we did, including what we're doing now. mean, we've been talking about stats for the past five episodes. Sorry, everybody, if it's been dragging, but there's a lot to talk about to basically execute this.

Adam (17:37.151)
It's

Adam (17:49.492)
Yeah. Yeah. It's that whole thing where it's like, if you, like when it, when a new person goes into a project, they usually want to create their own vision of it. So like, if someone like came into it and like, hardcover already has our vision for it. And they would probably just go and support us rather than recreating the wheel. At least that's the, that's the hope.

Ste (18:08.693)
Yeah.

Ste (18:12.359)
Yeah, I'm really doubting it could work any other way, especially with the business model, because if someone copied it, they would want first to make money off of it. So working with this business model first off from a community standpoint, if someone would see that they copied hardcover, it would be very bad for them. And then again, it's a very hard...

as we've learned business model to crack. So we're still like building stuff to crack it, which is our theory of lead. This is how it works. This is how it will work. This is how we're going to win with this. But first off, only we know that and because we learned through these years. And my feeling is that if anyone wanted to do that, like fast forward.

Adam (18:45.262)
Yeah.

Ste (19:08.639)
there's no chance they could actually pull it off.

Adam (19:12.704)
Yeah. I feel like a lot of the, the next steps are based on all the steps that have come before it. Like, you know, having like an advertiser or like a, an author section. Like that, if you start with that, if that's step one, then you have no users and no readers who those authors are interacting with. So you kind of have to start with the readers first, which is where we started. And yeah, I think,

Ste (19:19.157)
Yeah.

Adam (19:41.548)
when we do finally move into authors eventually, it'll be because we've like have this product market fit for readers already.

Ste (19:51.743)
Yeah, very true. Nice. Well, getting from that to our subject of the day, stats. I was thinking that maybe we could show people, I could show them the video of the dashboard to kick it off and maybe go into some designs. And then we could talk about the exercise we did with the team today.

Adam (19:59.182)
Yeah.

Ste (20:20.367)
and explore some of the ideas and maybe translate some to design.

Adam (20:27.126)
Yeah, that sounds good. Maybe focusing on the pages red one, since that's probably the top one from the survey.

Ste (20:37.469)
Yeah, yeah. So, pages read came up like the most popular thing in stats. So, we had pages read, which is like reading in general, reading as a habit, I guess. How many pages you read, how fast you read, know, what causes a reading slump and signaling those reading slumps. This was a big one from the feedback. Then we had genres. Then we had...

books read, so like info about the books you've read in a certain period, and then we had data about authors. So those were like the four big takeaways, which are like very important because, you know, we haven't, I mean, it puts like a lot of clarity in how to build stats and what people actually want. So first, maybe I can share like this video. I've been experimenting with a dashboard and I'm just gonna quickly, have...

video right here so basically

Ste (21:42.899)
I mean this, if anyone knows cursor, it's a browser, it's a IDE where you edit code. It's kind of like, it's a VS code for that lets you do stuff with AI models. And I hooked it up to Claude and basically there's this mode that you go into where you basically tell it what.

you want it to do and does it for you. And we've been, like, really going back and forth on this dashboard thing, probably, like, most of you know that it's been, like, we've been iterating it a lot a couple of months ago. So, basically, I told it to make this dashboard with widgets that you can resize, and I've used, like, a simple grid layout. And...

library for rearranging the widgets. And yeah, this is actually the results. So pretty much what we wanted for it. And yeah.

Adam (22:38.861)
you

Adam (22:49.346)
Yeah, I really like how, like when you move a widget, it changes size to kind of fill all available space in the area that it's moved to. Like that was something that I wasn't even sure how you would do, but how does this handle that? Because it works.

Ste (23:06.939)
Yeah, well, don't ask me, basically. Yeah, exactly. I mean, the way it did stuff is using the library, and basically, it's just like a tailwind grid system. So I told it to basically make it like one row in height and fill it.

Adam (23:09.102)
Thank you, Claude, I guess.

Ste (23:33.129)
a certain number of columns, basically, based on what I, the size I select. And yeah, I just did it. It took like a couple of iterations to tell it like what's to actually, what I wanted to do. But it's working. It's working pretty well. It's working well on mobile. That was like one of my, one of the things I was fearing a bit. But yeah, this is actually live. started a branch and if...

all goes well, maybe we could put some stats and the stuff we had for the dashboard in here and make them super, super customizable. So this is kind of like the intro. then maybe I can show you how I got here because let me show my Figma screen.

Adam (24:23.426)
Yeah, I'd be curious to see how you're using Claude to, or is it Claude or is it cursor?

Ste (24:30.243)
Cursor yeah, because I have it. on my laptop, but Basically what I do is I go into compers composer mode so composer mode you hit command I and it can change Make changes throughout your files. So basically it's like having a very fast Developer who knows documentation really well, but doesn't know

like the context of your app really well. So sometimes when you tell it to do, to create new files, it puts them in the wrong place. So for instance, we have the app directory. I've been struggling to make it put the files inside the app directory. It just like put it at like the top level and I had to move them manually until, you know, it caught on and...

Adam (25:22.466)
Hmm.

Ste (25:26.911)
you know, it realized somehow, okay, this is where I have to edit the stuff. But yeah, it works. I mean, I spent like, I guess four hours on it and it's already like, I was pretty amazed. Yeah.

Adam (25:33.612)
Okay.

Adam (25:40.598)
Nice. Wow. Yeah. I, I, I'm going to try something like that for some of the inertia jazz conversion. So I'll, I'll try composer mode and see how that goes for it.

Ste (25:53.447)
Yeah, I mean, I'm recommending it to every dev. mean, if I could do it without, I think that's what people have been posting about, know, product managers knowing nothing about code, doing their own apps from scratch. That's not really how it happens because you have to have like knowledge of what you want it to do and be very specific. So for instance, I tell it, you know,

Sometimes it's funny because you just tell it there's this weird effect that makes widgets scale as you drop them where they should be and it understands why that weird effect is happening and just like corrects it. stuff like that, yeah, I don't know how it does, but for stuff where you have to be specific like...

Adam (26:35.99)
You

Ste (26:44.669)
I want to use my components. I want to use this library. I want to use this dark mode or whatever. You have to really tell it what to do. So basically, this is our stats design page. So what got me building the dashboard was trying to do these stats, have them be...

resizable. this would be like a small stat that you would put on the dashboard and you could like resize it and it would show maybe more data. So for instance, if you would make it either large or extra large, you'd get the dates as well and maybe other data too. But I don't know, how does this look at them? You raised like a good question. Maybe we can talk about that later.

Adam (27:38.264)
Thanks

Yeah, so let's see. So is the idea that this would look the same whether you're looking at it on the stats page or the dashboard? It's kind of like the same widget in both places, which I like that kind of framing.

Ste (27:57.096)
Yeah

Yeah, with some, it might not work with some, like some of the stats. Maybe they would look different on your dashboard, but I'm guessing maybe we could, I mean, this could help us make the info on them really, I guess, flexible because we were talking about defaults and...

you were asking me, if this was on your dashboard, how would you select the time period? So maybe you want to see your pages read last month, or you'd want to have a custom date. And that's a good question. And I'm thinking, what would be the best approach?

Adam (28:48.886)
Yeah. One of the, the things that I was, that came to mind for it for me was a, like on the dashboard, we have, you're setting the timeframe for every widget on the dash on the, sorry, on the stats page, you're setting the timeframe for every page, every widget on the stats page. So like you're not going to look at the stats for one thing differently than other ones. but on the dashboard, you might want to see.

Ste (29:08.245)
Mm -hmm, yeah.

Adam (29:17.88)
pages per day over the last month. You wanna see your number of books you've read this year. You wanna see your currently reading books. Maybe you wanna see some other stats for the current month, like how many books I've read this month. So there's a lot of different time ranges on the dashboard. So one of the thoughts I had was this concept where you click on three little dots or something and it like,

flips the like flips it over and like on the back of each of these components, they're like settings for time periods.

Ste (29:56.649)
okay, yeah, that'll be really neat. Would it be hard to actually have separate settings for each one? Because we could totally do that. So basically, this could be like a resize menu and it could be like...

Adam (30:08.248)
Yeah.

Adam (30:29.218)
Yeah, cause I have a feeling like behind the scenes when we store all of this, we're going to have to already store like which widgets you have their placement, their size. So in addition to this, that we could store additional options for each dashboard widget, including like the date range, or maybe, maybe some, some of them might have a, well, I don't know. Would we ever want to have like a set start end or with these, it seems like

For to me, at least on the dashboard, everything would be like date ranges, like, kind of like when you're looking at your financial statements and the defaults are like the past week, current month, year to date.

Ste (31:05.365)
Yeah.

Ste (31:08.778)
Mm -hmm.

Ste (31:14.121)
Yeah.

Ste (31:18.015)
Maybe it could be like this and basically last week would show seven days, last month or last two weeks. You could have like last week, last two weeks, last month, last three months, six months and last year. So you could have this and it would be just months or if you switch to pages last week, you would have like the last seven days.

kind of like here, but it would be like seven days.

Ste (31:54.665)
Hmm? Would that... I'm guessing that would be better, yeah. That would be...

Adam (31:55.096)
Yeah. Yeah.

Yeah. Having, having the drop down for this, this one, think is easier than having the flip around because it's very, it's, it's going to be very similar. It's just changing the date range. It's if there aren't other options on it, because I have a feeling like some of these, I'm wondering if some of them will have like additional options that we would want to set per per widget.

But maybe we can table that until we create more widgets and then we'll know the requirements at that point.

Ste (32:28.135)
Hmm

Ste (32:33.469)
Yeah, exactly. But I think maybe we could skip that and try to make them so that you can control everything on this level so we don't have to have settings for each of them. Yeah, this is a great idea. I love it. mean, look how good this looks. It's very clear. mean, pages last week you get less seven days. Pages last month you get maybe some.

Adam (32:49.838)
You

Ste (32:59.915)
Every three days you get one of these points, so you have like 10 points.

Adam (33:06.188)
Yeah. I could even imagine we have like, like if I were to annotate this, I would be curious to know like when I finished certain books as almost like points on the, the lion that you could like hover over and see like, on this date, I finished this book on this date. finished that book.

Ste (33:21.664)
you

Ste (33:27.763)
Yeah, that would be great and we could even have like some for journal entries. So I'm guessing like Finnish books would work very well like across like a month or so or like two months. Books last month.

But we could also have like, and for books, mean, yeah, you would have, I'm guessing, at least to the week level, journal entries. Yeah.

week and you could show the dots on that as well. I was bringing some dots where are they here we go.

Adam (34:22.022)
Yes.

Ste (34:24.255)
That's good, it doesn't have to be like...

Adam (34:29.8)
yeah, I was even thinking about these almost like one thing, like this could be like pages over time, but on the chart, we have the books that you finish, like the dates that you finish certain books.

Ste (34:38.066)
and you could...

Ste (34:43.195)
yeah, for sure. And you can have like a nice tool tip that shows up when you go over each dot. So you know what this maybe even with like a very small cover.

Adam (34:56.931)
Yeah.

Ste (35:16.691)
Yeah, that's neat. I'm liking this. Do you think it would work, you know, making the stats across widgets or is it like a thing that's maybe too complicated for this stage?

Adam (35:32.844)
I think it makes sense. Like, cause the way I see these widgets are that they're going to be, they're basically just going to be a React component that takes some input. And that input is probably going to be like this big object that shows that has like your number, like every single date and the number of pages you've read that date. And then the dates you started and finished every book.

And that, and that like object is going to be passed into like every different stat that needs like book data. And then we'll probably have other inputs, like one related to journals, one related to authors, and then different stats will just accept one or more of those inputs. And it's going to be kind of bulky because like there's up a lot of potential data. So I think that would be my worry. Like.

when this renders and we're looking at it for last week and then you change it to all time. That's a big difference in scale and the number of the amount of data that's needed. So do we just pass in all time data all the time and then filter it to just showing the last week, which is what I'd lean towards because it's the most flexible, but it would preload a lot of data. But the good part is that

potentially lots of different widgets and stats parts would use that same data. So we're not generating it 10 times, we're generating it once and passing it into 10 different components.

Ste (37:14.249)
Yeah, I think that would work because basically, mean, if we can get that data, that's like one thing that would interest me because if we can do this, no matter what we approach, we take that's great. It opens up a lot of possibilities, but loading it upfront, I'm guessing we could do this.

as your dashboard loads, because people are going to be expecting that a dashboard takes a lot of data. if it doesn't take, mean, what would be the loading time? You'd just guess for this. Of course, it would be a wild guess. But I'm guessing it's seconds.

Adam (38:04.75)
Yeah, think, I think switching this as we switch over to inertial JS and rails, the loading time for this is going to be like so low. It's not even going to matter. Like my biggest worry would be for readers like Jeff who have like 20 ,000 books in their library. so we would have to stress test it in that case, but I'm not, I'm not as worried about it as I would be if we were using graph QL and that's

Ste (38:15.495)
Okay, then, yeah.

Ste (38:20.724)
you

Ste (38:27.146)
Yeah.

Adam (38:34.359)
that system.

Ste (38:36.071)
Mm -hmm. And I'm guessing there would be caching involved, so it wouldn't have to load all the data for each session, just the new one. Would that be a thing? Or would it have to load it every time you load up your dashboard on any device?

Adam (38:54.636)
Yeah, that's something that I'm planning to do on the new Rails migration. It's this idea that whenever you load a page, we might have to hit the database and get some data, but whenever you refresh any page on hardcover, my hope is that there are no database queries and no data on that next page. Everything's cached, except I think we'll probably need one database request, which goes and gets your current user to...

to let us know if you still exist and if you're not banned. But everything else would be cached.

Ste (39:26.503)
Haha, nice.

Ste (39:30.863)
Great. Yeah, that sounds great. And it would basically be just like the new info that needs updated. So, you know, maybe you've had a couple of more journal entries since last time you've loaded the data. I'm guessing that would be like a separate thing. Would it be able to come in as just new data?

Adam (39:52.232)
I think if you, if you, like tracked a new, like you update a new progress, then the next time you go to the dashboard, it would take that second to load everything or maybe just load the new stuff that's needed. Like the journal entry cash might still be cashed and maybe your genres read might still be cashed, but your pages per day. Now that part needs to be.

expired and refetched. So it would be able to selectively cache parts of it.

Ste (40:27.913)
That sounds great. Yeah, it gives us, mean, what I'm thinking now is choosing like what to show on the stats page and what to maybe show on the dashboard. So that's very, very, very useful, you know, to know because it puts like a lot of structure in the data and the...

Yeah, I'm guessing one of the goals would be to make this stats page which has huge amounts of data, loads and not crash.

Adam (41:05.602)
Yeah. Yeah. Not have it seem like you're waiting forever. Yeah. I think, I think like the current setup, it, takes a decent amount of time, but most of the time it's like the parts that take the long time are not because of anything that we would be worried about for this.

Ste (41:29.979)
Nice. Well, that's good. So basically, maybe we can like go forward with this model, seeing, you know, what stats to put in here and thinking, you know, that they might end up on the dashboard. And basically taking what feedback people left. Would that sound like a good, you know, plan going forward?

Adam (41:59.704)
Yeah. I'd, one thing that I'd be interested in from like a, like visual hierarchy perspective is, like consistency in all of these stats so that they are like, I know like for the top author one over here on the left, you know, we have like this like icon and subheader part.

Ste (42:28.938)
Mm -hmm.

Adam (42:29.544)
or like if we have like a row dividers for different areas, things like that.

Ste (42:36.135)
Yeah. What's what? Yeah.

Adam (42:41.174)
Or if there's like a, almost like a footer part, like I was imagining like if something was, let's say a,

Adam (42:54.798)
How did I do this? Like if it was a supporter only feature, for instance, if it had almost like a different color bottom or something and it called out to like be a supporter and then maybe it was like blurry or it had like a placeholder.

Ste (43:15.357)
Yeah, that sounds, I mean, similar to what we're doing here. One, yeah, that's a good thing to worry about. And what I like about this approach and why I think, you know, I forced, why I think it's useful to force ourselves to do this is because if we do it so that it's adaptable, it basically puts a lot of pressure on us to

Adam (43:19.372)
Yeah, exactly.

Ste (43:44.811)
essentialize the layout. So like you said, some parts would have to be fixed. So you'd have a title here. Here you'd have like either a graph or some covers or some images of authors. But everything would be like in the same place. And the data might change. So for pages last week, you might have like a 94 % average. But for books this month, you know.

maybe it's gonna be something different because you're probably gonna have like one book or something. Maybe we'll put something else in here. And I also like turning this into a menu that you can use to control the size, the actual stat that's showing here, maybe even hide some of the stuff.

but yeah, put more stuff than just the size in there. So that kind of forces us to be very like structured in the design. And like you said, we'd have to decide maybe, you know, next step would be to figure out to make a couple of these based on the feedback and see which ones could go.

Adam (44:46.818)
Yeah.

Ste (45:09.439)
both on the stats page and on the dashboard. I'm thinking based on what many people have told us, they're looking at how their reading is evolving. So maybe if they saw that every time they open hardcover and they see like live snapshots of what they're doing, that could almost be like many like...

Adam (45:13.664)
Yeah.

Ste (45:37.963)
those could be many of the stats they actually need. And then when you go to the stats page, you get like more in -depth stuff. We've also been talking about narratives, which we can get to like look over the exercise we did like in the last 10 minutes. But yeah.

Adam (45:55.99)
Yeah. So, so for, for one of these, like, you know, let's say pages read, if we're looking at this widget on the stats page, we wouldn't need to be able to change the date for it on that page because the date on the stats page would be set at the page level. So it almost makes me think like, maybe when it comes to headers, we have

Ste (46:18.905)
Mm

Adam (46:24.428)
Two types of headers. One is like a dashboard header and one is a stats page header. And maybe we allow those to be slightly different because they have different capabilities.

Ste (46:35.869)
Mm -hmm. Yeah. Yeah, basically this is like a thing that controls the date range. And here, yeah, it would just be like a title. I mean, this will probably like change anyway. But yeah, maybe this is a better example. Yeah, here it would be like dependent on what range you pick, but...

Adam (46:44.908)
And the size on the right, yeah.

Ste (47:04.051)
Yeah, here it would be like something that's used to control the actual widget. This is exciting because now I can make the dashboard view and the stats page view and see how they would be different. But these restrictions actually help a lot.

Adam (47:29.228)
Yeah. Yeah. I think, I think that makes sense. So like the, it's almost like, each of these is like a card and then the card header is different depending on where it's called from, but the card content is going to be the same and the card wrapper is going to be the same.

Ste (47:49.589)
Yeah, exactly. Yeah, yeah. That should make sense, right?

Adam (47:54.082)
I think so. I think, yeah, I think, and I guess the other part is like on the stats page, we have this idea of sharing as well and how that, yeah.

Ste (48:08.157)
Yeah, maybe this could be integrated here. Yeah, is that what you're thinking as well? Yeah.

Adam (48:13.376)
Yeah, because yeah, maybe it's just in that drop down for sizing and sharing.

Ste (48:18.855)
Yeah, yeah, that could definitely work. And it simplifies while making it more useful. Maybe once I do a couple of these for both the stats page and the dashboard page, it would become clear if it's easy to do this. But I think it seems like a good way to go forward. Yeah.

Adam (48:46.187)
Mm

Ste (48:48.069)
And we've been talking about adding more narrative to the stats. Based on the feedback, I think many people wanted more qualitative data. So basically, guess someone reading the stats and making sense of some of the stats for them and spelling out what is going on, for instance, with their...

reading of certain genres? they reading, when did the genres shift? Are you reading more in this time of year? Are you going through a reading slump? I think that's what stood out. And maybe we could like, what we've been, let me stop sharing this. What we've been talking about is adding more narrative to the stats page so we can actually tell you more.

like I guess processed information.

Adam (49:50.338)
Yeah. I see it like as a, insights. Yeah. It's like insights into your reading. And I feel like that might be a good differentiator between what's a supporter feature and what's a free feature. Like things that are sharing data and just, the, the facts about your, reading are free features and the ones that are insights into like why you went, entered a reading slump or.

Ste (49:53.65)
Yeah

Adam (50:20.14)
like answers to questions, those are more supporter features.

Ste (50:24.435)
Yeah, that's actually like a good way of putting it. So basically right now we have a mix on the stats page between those. But for instance, the genre bump chart. The bump chart, it's an insight into your reading, you know, and we could take it at several other levels or with other visualizations, but that's like a good separation, right? So facts, like about your reading, those are free, but...

What we're doing is giving you insight based on the info you've logged in, and that's like a supporter feature.

Adam (51:04.184)
Yeah.

I think as we decide on the specific widgets and start creating them, it'll become clearer which ones are insights and which ones are just facts too. Like this page one that we're discussing today, that one's all fact. But then if we had something like give recommendations on authors and genres that you'd enjoy based on

Ste (51:20.445)
Yeah.

Ste (51:25.236)
Yeah.

Adam (51:36.844)
like to get you out of a reading slump or something like that, or like,

Let's see. Yeah, see which books led you to have a biggest upswing in your reading. That might be more of an insight than a fact. Because it's, yeah. But yeah.

Ste (51:55.637)
Yeah.

Ste (51:59.775)
That's, yeah, definitely, I was thinking as you were saying that, like how we could either visually or like spell it out. I'm not sure like which path we should go to because in our Teams exercise, basically we answered what might, wait, let me pull up the mural board. So,

The question was, how might I? And basically, we had four categories. Maybe we can, will it be OK to share the actual mirrorboard? Just like.

Adam (52:38.989)
Yeah, yeah, go for it.

Ste (52:47.103)
get a little bit of extra.

Ste (52:53.277)
Extra context. So yeah, basically this was the question and we answer like, how might I? Four pages read, see a GitHub calendar comment like chart of my reading, see which days I read the most, see a live view of my reading, see which years I've read the most, see which books led me to the reading, to read less like a slump.

Yeah, those would definitely, some of them would count as insights. And basically what we did is split these into like two stuff that's been most requested. So pages read was like the top requested thing. Genres was next, then books read, then authors read. So we basically answered stuff based on these categories. And yeah, some of the stuff is really interesting.

Ste (53:46.763)
see what specific themes from books I resonate most with and understand what tropes cause the DNF. Those are pretty good insights.

Adam (53:59.868)
Yeah, like if I knew every time I read a book about US politics, I go into a reading slump.

Ste (54:06.844)
Yeah, that definitely, I see that happening. Yeah, and it could also go into recommendations, like give recommendations on books I missed or see which series I read the most books from.

Ste (54:28.073)
Yeah, some of this we'll definitely try to see if we can visualize. So that's like next on our agenda. Basically, yeah.

Adam (54:38.668)
Yeah. I think, I think what's most exciting to me about this setup is, kind of this ability that we could have to create all these different widgets that together create a dashboard that showcases exactly what you would most want. Like, I think for, like, for me personally, I'd be curious for you too, like what would, what would be on your

dashboard, like what would be the widgets that you would want on your dashboard every time you load hardcover?

Ste (55:11.943)
Yeah, that's a good one. Well, I think it's like pretty much aligned with what people have been telling us. So it would be basically like what I'm currently reading. Like if I'd also have like the social tab to see which stuff has been going on in my network who saved books based on like my referrals and that kind of stuff. And then, yeah, stuff related to

what I'm logging. So I'd be interested in how often I do journal entries now that we have the journal. Like this week I made, I saved 10 quotes and made five notes on what I'm reading. And then basically like the progress chart. So

I'd be most interested in how much I read weekly. So this week, 200 pages. Two weeks ago, 100, and see how it evolved. I'm guessing those are my four most interesting stats. What about you? What would you see on the dashboard?

Adam (56:25.996)
You

Adam (56:30.882)
I definitely want like books I'm currently reading so I can update the status of those. I, I like the idea of being able to see like the books I have in some kind of up next state, whether that's a list. So that could be embedding a list and then showing like a certain, yeah, like pinning a list to it. And then maybe showing like the top X from that list.

Ste (56:36.384)
Mm.

Ste (56:47.051)
Okay.

yeah, pinning a list.

Adam (57:00.578)
I like the idea of seeing what books my friends or people I follow are currently reading, or maybe like, sultering that down to like books people I'm friends with are currently reading that I have already read. Cause those would be the ones that I would most be curious to like talk to them about, or like books that are on my want to read list. And I want to like, see like, they're reading that book that I've been meaning to read. Maybe I should read it now so that we can talk about it.

Ste (57:18.346)
Yeah.

Ste (57:30.631)
Yeah, this beat like, yeah.

Adam (57:33.746)
And I'd be curious to see like new prompts that people I follow have answered. like, I'd be curious to see like trending books that I haven't read that maybe are most.

Ste (57:41.974)
Mmm, good point, yeah.

Adam (58:00.366)
targeted to me like the highest match percentage books that I haven't read that are popular.

Adam (58:07.092)
so yeah, it's, it's a lot of some of it's discovery, some of it's social. I think the genre side is less something I would have on the dashboard and more I would go to stats to dig into. But I think I like, I like pages read. I'd probably do like pages read like year to date. And then, so like since the beginning of the year, this is my pages read chart and maybe like my last couple.

Ste (58:23.284)
Yeah.

Adam (58:37.128)
books that I've read with my rating.

Ste (58:40.735)
Nice.

Adam (58:42.018)
Yeah. Those are, those are some of the things. I think some of those make sense as things on the stats page, but some of them don't as much because I feel like showing like the last five books you've read and rated. Isn't that useful on an all time stats page.

Ste (58:55.648)
Yeah.

Ste (58:58.993)
Yeah, definitely. mean, yeah, those are really good. mean, definitely, as you were mentioning, some of those you mentioned I might want to see on my dashboard as well. Those are, I'm thinking, know, for stats, we probably won't make like every stat on the stat page embeddable, just like maybe for some stats, just like have like pinned this to your dashboard for the stats that you can.

can pin to your dashboard and maybe on your dashboard because I realized some of the things like prompts, you can't have those in the stats page. So I'm going to try designing widgets for prompts as well. And maybe some of them will just have some sizes available. So for prompts, yeah.

Maybe you could go like a size smaller or size larger depending on how many prompts you want to see there, or it can just be like the newest prompt. But yeah, I'm guessing this is a good way of going forward. So basically from the stats page, you can pin some stuff which is relevant to your dashboard. But the dashboard basically has like the stats plus other, we just don't have anything to do with stats.

Adam (01:00:26.626)
Yeah, which makes me think we'll probably need like a dashboard widget page that shows all available widgets that you could add. Either that or that's like a dropdown where you can like.

Ste (01:00:35.495)
Mm -hmm. Yeah, I was just thinking like a drop down and you could show hide stuff from the drop down. That would be simple and we can turn it into like a drawer and on mobile.

Adam (01:00:47.948)
Yeah. Or maybe, maybe it's not even show high and maybe it's just add. then because you might, you might want the same widget multiple times, just with different settings. Like you might want to see pages per week and pages year to date. And so

Ste (01:00:51.953)
Or ads, yeah. And you can remove.

Ste (01:00:58.253)
Mmm, true.

Ste (01:01:02.735)
yeah, yeah, that's great, yeah, exactly, yeah. Okay, so you can add stuff multiple times. Nice. This is gonna be complicated, but yeah, if we pull this off, let's see if we can pull this off. This is exciting.

Adam (01:01:16.16)
And I'm honestly just like excited to do it in Rails and not have to work through an API with Next. Like it's gonna be like, if we can do this after we get the Rails migration done, it's gonna be so much simpler. Like I was kind of dreading how hard some of this stuff would be in that paradigm. But with this new paradigm, it's almost gonna be like the hard part is gonna be the React side as opposed to the data side.

Ste (01:01:35.658)
Yeah.

Ste (01:01:44.743)
Yeah, fingers crossed we can pull it off because, yeah, if this happens, it looks like kind of like a blockage that we can just remove, like a damn burst thing that would allow us to ship some of the stuff we've tried to ship, but with the lockdown and how complex it actually is building it.

and with stuff that we've been adding, stuff breaking everywhere, and us trying to manage it, and basically that thing up most of our time. is, hoping this is going to be a successful migration, and then we can ship everything.

Adam (01:02:21.262)
you

Adam (01:02:26.505)
Sounds good. Yeah.

Ste (01:02:27.945)
Yeah, perfect. Well, I think that's time. Two minutes overboard. So I guess thanks everybody and see you next week.

Adam (01:02:37.24)
Sounds good. See you next week. Bye.

Ste (01:02:40.073)
Bye.