IndiesReadIt Development Diary - Week 4 & 5

IndiesReadIt Development Diary - Week 4 & 5

Development Summary

In the third week of IndiesReadIt's evolution, I delved into refining admin features and enhancing user interactions. Here's a detailed look at the week's journey:

24/12 - 30min - Festive Coding Spirit

• Don’t know how I did it but I found some spare time to code on Christmas Eve day 😄
• Added category to submit book form with api routes and prisma schema updates
• Nothing fancy, just to keep motivation up, real building this day was cooking!

26/12 - 1h+ - User-Friendly Tweaks

• Added a Suggestion edit for users
• Reused the submit form and duplicated it, not the best practice but the goal here is to gain time. Will refactor later if the app is successful. Don’t waste time, users won’t see your code and you’ll not sell your app right now.

27/12 - 10min - Zod Wisdom

• Used little free time to do some research on why my optional fields wasn’t optional with Zod…
• Turns out Zod isn’t that intuitive… making a field optional is not just “.optional” but

z.union([z.string().min(3).max(255).optional(), z.literal('')]);

• "union" means it will apply 3 to 255 max string if provided or empty string (“”) if not provided.

29/12 - 2h+ - Admin Empowerment

• Finally added an “Add a book” form for admin, instead of adding them from Supabase..
• I duplicated the entire table components folder to make the admin one, I’m not satisfied with this, I know I can reuse a lot of components for every table but I’ll do it later, again.
• Who says admin says role, turns out I didn’t set them. I lost some time finding how to attach role to next-auth user token: all it took was to add role to next-auth generated User table in Prisma schema (role String @default("user")) and add role to Session types (types/next-auth.d.ts) :

interface Session {
  user: {
    id: string;
    email: string;
    name: string;
    image: string;
    role: string;
  };
}

• added slugify package for automatic book slugs from title

slug: slugify(body.title, {
        lower: true,
        strict: true,
        remove: /[*+~.()'"!:@]/g,
      }),

• Finally decided to let the user submit book with only title and author, everything else is optional. I think asking too much would discourage some people. But title AND author are needed because some books have same title (search for Elon Musk biographies…)

04/01/24 - 1.5 Hours - Resolving Responsive Challenges and Enhancements

• Again, only some short work sessions in entire day as I was caring for my daughter.
• I used these session to fix responsive problems, especially on table…
• Turn out it was mainly due to the lack of mobile-only “grid-cols-1” in wrapping div 😑
• I managed to re-arrange pagination for mobile as it wasn’t responsive at all, simple flex-col and tweaking here
• Submit book form was overflowing on mobile so I just set this : (max-h-screen overflow-auto)

<DialogContent className="max-h-screen overflow-auto sm:max-w-[425px]">

• As I decided to put title + subtitle to added books (remembre the multiple “Elon Musk” books..) I made the too long title to truncate (cut within the parent div with “…”) with just a defined width and truncate Tailwind class

<h3 className="w-full truncate text-xl font-bold">{book.title}</h3>

• Submitting book taking time due to request, I wasn’t clear if it was effectively submitting or not so I added a auto-disabling+spinner Button (mutation is POST request from TanStack-Query

<Button type="submit" disabled={mutation.isPending}>
  {mutation.isPending ? (
    <>
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
      Submitting
    </>
  ) : (
    'Submit book'
  )}
</Button>

06/01 - 1 Hour+ - Advancing Responsiveness and UI Enhancements

• Decided to go further with responsiveness as I again got multiple short sessions this day

• Followed Shadcn advice to use drawer shipped with the last (insane) update of the package

• On mobile and tablet, it’s better to go with a drawer instead of a classic Combobox/Select as it has way better UX. Check Responsive Dialog section

  

• Made a little revamp of front card to avoid artefact of book covers with a colored frame and better differentiation between cover and card content

• And finished with a improved grid layout (consistent spacing, centered and 4 cards at once on large screens)

08/01 - 1 Hour+ - Implementing PostHog Analytics Tool

• Installed PostHog as analytics tool, looks promising even in free plan, it’s very complete
• I also needed HotJar-like tool, from an adive from @MorganFeeney… PostHog as a video session replay which looks insane, very good find
• Wanted to add it to MLB too but I need plan upgrade. It doesn’t look overpriced unless you have billions of event to record but I’ll test it for a few days before upgrading.

Week 4 & 5 Summary

From Christmas to early January, I oscillated between enhancing my coding project, focusing on user-friendly tweaks, responsive designs, and improving admin interface. I resolved a Zod issue, streamlined the book submission process, and integrated PostHog analytics, all while juggling other life responsibilities.

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

Stay tuned for more updates!