Book Chapter

The Community

Book clubs foster human connections and relationships. They are everywhere and, in modern times, have also transitioned into the online space. The book club community consists of reading enthusiasts ranging from beginners to experts who schedule meeting times to assemble and discuss chapters of a picked book. In some areas, anyone can join one of these clubs, whereas for others, it is purely by invitation. The readers always have diverse opinions on some chapters and surprisingly unified ones on others. Some go ahead to fetch insights from others, while some try to teach and relate with their personal lives. The daunts are many as in every human society, but for this project, I picked a few.

Introduction

The difficulties of joining a book club lie in keeping in par with
the varying reading levels of each member of the club. Joining a book club that meets at a maximum of once a week can be a hurdle for some. The pain point here includes reading the required chapter before meeting for the discussions on the chosen book. This makes others trail behind or get ahead of themselves without fully immersing themselves in every alphabet, word, paragraph of every chapter of the book. As part of the Dev Weekend Challenge, we are to build an app that serves a community, and the chosen one on my part was the book club community.

What I Built

I built a book chapter app that gives ample time for readers to catch up with the book review sessions without getting input from those who have already finished reading the book. The project was built with Next.js and Supabase. Next was utilized because of its integrations with pages and Supabase was used because of its ease of setup. Next was incorporated with Typescript and Tailwind CSS, whereas the Supabase had keys to help with the project interaction with Next. Simply put, Next served as the frontend with the Supabase database as the backend. The browser persisted the data review. The frontend consisted of an interface that perfectly mimicked an actual book with colour themes, borders, giving the same warmth to readers as a book in hand would. An SQL table was created in the Supabase platform to store the received inputs from the frontend with the options to perform edit and other operations on them. The seamless integration of Next with Supabase streamlined the project.

Demo

The demonstration video has a user in action. The reader first chooses to write their insights on the chapter they just read and specifies it by selecting the chapter number. Upon posting, when the user intends to read from the upcoming chapters, the information then blurs instantly. This serves as a check to reduce unnecessary curiosity about the chapters remaining and increase anticipation to read with guesses. You can view it here .

Code

The SQL table creation in Supabase.

The app layout.

The source code can be viewed here

KathleenCode / book-review

a book review app

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

How I Built It

The project was built by first creating a Next.js app with the command npx create-next-app@latest and setting up the Supabase client library by installation. Next, a Supabase URL and an anon key were generated from supabase.com. The tailwind CSS code had a general theme for the project. The main user interface had the app.js providing a form for user input, buttons, and placeholders to guide the users. The book chapter app was run on localhost.

Conclusion

This book chapter app shrinks bias as users take time to reflect and write their own viewpoints without the influence of the pre-written reflections of others in the book club. This project in sum, tackles one of the many unresolved problems in book clubs - one reader finishing before another and telling everything before others get the chance to do so. It simply creates an atmosphere for members of a book club to read in harmony and saves the surprises of the chapter and plot twists for everyone.

DEV Community