IndiesReadIt Development Diary - Week 2

IndiesReadIt Development Diary - Week 2

Welcome to the second week of the IndiesReadIt Development Diary, where I share the behind-the-scenes progress of building a collaborative book directory. This week has been filled with challenges, creative decisions, and significant strides in the development process. I've also decided to keep the list format, which allows all the information to be transcribed more efficiently and accurately.

11/12 - 1 Hour - Card Development and Teasing

• Completed the back of cards.
• Wanted to flip on hover but faced issues, especially for responsiveness.
• Shadcn lacked some elements, so added DaisyUI.
• DaisyUI had a deficient rating component, so added React-Rating.
• Added formkit AutoAnimate for ... automatic animations!
• Began teasing on X.
• Base UI is okay, preparing X post, metadata is not updated, this is consistent source of struggle.
• Opened a BuyMeACoffee page, inspired by Steven Tey's footer.
• Changed profile "lore" to Lego builder. It defines the best my approach to building things, especially with the "bricks" I have at hand.

12/12 - 1 Hour - Category Setup

• Defined categories sourced from Amazon.
• Replaced hard-coded categories with database ones.
• Created category seeds using Prisma.
• Completed the task in less than 10 minutes with Copilot and ChatGPT.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();
async function main() {
  const categories = await prisma.category.createMany({
    data: [
      {
        slug: 'development',
        name: 'Development',
        description:
          'Insights into coding, covering code, no-code, and low-code approaches.',
      },
      // 20+ category seeds here...
    ],
    skipDuplicates: true,
  });
  const book1 = await prisma.books.upsert({
    where: { slug: 'the-lean-startup' },
    update: {},
    create: {
      slug: 'the-lean-startup',
      title: 'The Lean Startup',
      // rest of the book data here...
    },
  });
  // 3 more books here...
}
main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

• Spent a significant amount of time on new NextJs App API routes.

13/12 - 5 Hours - App Development Challenges

• Resolved API routes by referring to Vercel templates (thanks to Shadcn).
• Updated seeds with books and ratings.
• Enhanced the front end with book database data.
• Added React-Query, investing time in handling NextJs 14/App complexities (external Providers must be created).
• The app directory seemed to encourage developers to separate everything, initially annoying but likely a beneficial practice.
• Lost some time figuring out how to calculate the rating average, ultimately discovering a simple solution (Prisma includes + seed ratings).

const bookRatingAverage =
  book.rating.reduce((sum, rat) => sum + rat.rating, 0) / book.rating.length;

• Created a main layout, ensuring that changing the category will dynamically alter the entire page for SEO and navigation purposes.
• Explored blog options; MDX seems promising but poses challenges on Depikt's static blog base.
• Received a Shipixen's license as a gift from @d4m1n: an incredible tool for creating blogs, I'm thinking of using it for all my future apps.
• Added category pages, though app routing was a bit challenging.
• Noted that the entire app is very slow, possibly due to a partial understanding of routing.
• Posted the Shipixen gift on X to thank Dan and tease people about this upcoming blog. Dan is really touched and reposted it, increasing its reach. #buildinpublic #indiehackers community on X is insane.

16/12 - 3 Hours - Making The Most of Downtime

• Spent the entire day caring for my daughter as she prepared for her first dance show.
• Utilized waiting time to craft the intro post for my upcoming blog.
• The blog's identity will follow the MLB (Major League Baseball) style, adapting well to various contexts with a white symbol on a red and blue background, creating a new identity with French colors. 🙂
• Wrote the entire post in French, structured in a list for easy creation despite distractions.
• Built a GPT prompt to generate a real post, using an English text I wrote earlier as an example. The result was satisfactory on the first attempt. Here a translated version:

I need you to become my assistant writer for the blog I'm about to launch.
t'll be called Major League Blog because my nickname is Major Baguette.
It's about web development and more specifically about indiehacking or solopreunarship.
ts aim is to share my experience in this field. To do this, I take notes, mostly in the form of lists.
I want you to write blog posts for me based on this, taking as an example the snippet of text I'm going to give you, try to stick as closely as possible to the style of writing:

"Only 2 years left...
Before I completely change my life.
// (looong text here)
And long live the baguette, sacrebleu".

Write this post in English, keep lists only when you think it's necessary and convert it to MDX format.

Let me know if you understand and if you need more information?

Week 2 Summary

In the second week of building IndiesReadIt, the focus shifted from card development challenges, category setup, and app development hurdles to personal moments like preparing for a daughter's dance show and crafting the blog's introduction.

The journey involved overcoming technical obstacles, exploring innovative tools like Shipixen, and engaging with the #buildinpublic community on X.

Challenges were met with strategic solutions, such as resolving API route issues and implementing dynamic category changes for improved SEO.

The week concluded with a heartfelt thank you to the community for their support and a teaser for the upcoming blog post, setting the stage for an exciting journey ahead.

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

Stay tuned for more updates!