IndiesReadIt Development Diary - Week 1

Embark with me on the first chapter of IndiesReadIt's development journey.

This series unfolds the behind-the-scenes of crafting this collaborative book directory. I'll candidly share insights, lessons, and practical tips along the way. My goal here is to contribute to the #buildinpublic community and I hope you'll learn something while reading this.

Thanks for joining me on this journey!

04/12 - 1 Hour - Inception

Amidst the aftermath of depikt's free tool launch on Product Hunt, a decision was made to take a breather.

Reflecting on the struggle to find good books on Audible, the idea of IndiesReadIt was born. The desire to enhance indie skills in marketing and design fueled this concept.

The name "IndiesReadIt" emerged, and with a specific domain (.it) in mind (thanks for the idea Marc!), the groundwork for this project began.

The main goal is to build a collaborative directory of indie books. People can submit their favorite indie books, and others can discover them. The site will be free to use, with potential monetization via affiliate links. The focus is on the community and building a valuable resource. I have many features ideas, from shareable favorite lists to book completion tracking or social commenting, but the goal is to start simple and build from there.

05/12 - 1 Hour - Strategic Planning

Learning from past experiences, a strategic approach was taken.

Mobile and desktop pages, along with card structures (front and back), were sketched out. Cards were designed to encompass all necessary book information, with interactive elements on the back.

The hero section was kept minimal and planned for updates on all category pages for SEO purposes.

Classic filters, a search bar, and categorization into physical/audio/ebook formats were outlined as important features.

06/12 - 1 Hour - Database Foundation

Database planning took center stage.

Building on wireframes and brainstorming, tables and relations were constructed, keeping it simple.

The foundation laid during this hour will expedite Prisma's construction process. Key insights discovered during this phase will potentially save a significant amount of time later.

07/12 - 2 Hours - Decisions and Setup

Decisions were solidified on this day.

Opting for the Precedent template (by Steven Tey), it provided nearly all the necessary components (Prisma, Next-Auth, PostgreSQL, Next.js, Stripe).

The initial idea of using Supabase for both database and authentication was abandoned in favor of Prisma for speed and auto-help on table construction. Database table creation with Prisma took a mere 15 minutes, and authentication wiring was done efficiently.

The logo, sourced from Lucide, sufficed for the time being.

08/12 - 3 Hours - Rapid Development

The week kicked off with significant strides.

The entire site started taking shape from a template, incorporating shadcn/ui for a cohesive design. Default shadcn components were predominantly used for efficiency and coherence.

The goal is a speedy delivery.

The navbar, minimal hero, and basic cards were swiftly created, with shadcn proving to be a valuable tool.

Here's how the User Nav is built:

export function UserNav({ session }: { session: Session | null }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <Avatar className="h-8 w-8">
            <AvatarImage
              src={session?.user?.image || ""}
              alt={session?.user?.name || "unknown"}
            />
            <AvatarFallback>UNK</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">
              {session?.user?.name}
            </p>
            <p className="text-xs leading-none text-muted-foreground">
              {session?.user?.email}
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>New Team</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={() => signOut()}>
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

On this day, amidst the challenges of working from home with a kid in the background, progress was made.

Front card visuals were updated, enhancing the visual impact with adjustments like placing the author just below the title and badging the category for potential future filters.

Some troubleshooting occurred with Next-Auth options related to Next.js 14, prompting the need to isolate options outside the main route.

Week 1 Summary

This week's progress on IndiesReadIt reflects a journey from ideation to tangible development, highlighting strategic decisions, rapid prototyping, and overcoming challenges.

Submit your favorite indie books to IndiesReadIt and help build this collaborative directory.

Stay tuned for more updates!