Open Book

A web platform for book clubs to organise, read, and grow together.

Built with Django REST Framework (Back-End) and React (Front-End)

---

Table of Contents

• Mission Statement
• Target Users
• Features
  • User Roles
  • Book Clubs
  • Books
  • Meetings
  • Announcements Board
  • Pages
  • Nice To Haves
• Technical Implementation
  • Front-End Stack
  • External Integrations
  • Development Setup
  • Routing
• Frontend Architecture
• Branding
  • Fonts
  • Colours
• Wireframes

---

Mission Statement

Open Book is an all-in-one platform designed to simplify and enrich the book club experience. It replaces the scattered mix of group chats, spreadsheets, and calendar invites with a single, purpose-built space where readers can organise clubs, discover new communities, track their reading, schedule meetings, and stay connected.

Whether it is a small group of friends or a larger reading community, Open Book gives both organisers and members the tools to keep their club active, structured, and engaging without the usual coordination headaches.

Target Users

Open Book serves two primary user groups:

Book Club Owners are the people who take the initiative to bring readers together. They need tools to create and manage clubs, schedule meetings, manage membership requests, choose books, and post updates. Open Book gives them a centralised dashboard to handle all of this in one place.

Book Club Members are readers who want to participate easily. They want to join clubs, follow the current read, RSVP to meetings, and keep up with announcements. Open Book makes the reading experience social and organised so members stay engaged throughout the reading journey.

Features

Open Book allows users to create or join book clubs, search books through Google Books, track club reading progress, manage meetings, and stay updated through a shared announcement space. The platform supports both public and private clubs with role-based access for organisers and members.

User Roles

Role	Access	Description
Owner	Can create clubs, edit club settings, approve members, add books, manage reading status, post announcements, and schedule meetings.	The organiser of a specific book club.
Member	Can join clubs, view club content, leave clubs, and RSVP to meetings.	A regular participant in one or more book clubs.
Guest	Can browse public-facing pages and discover clubs.	A visitor who has not logged in yet.

Book Clubs

Feature	Access	Notes / Conditions
Create club	Authenticated user	User becomes the owner of the club they create.
Edit club details	Owner	Includes title, description, visibility, meeting mode, image, and member capacity.
View clubs	All users	Public clubs are visible to guests; logged-in users see more context.
Join club	Authenticated user	Public clubs allow instant join; private clubs require approval.
Leave club	Member	Members can leave a club at any time.
Approve / reject members	Owner	Private club membership requests only.

Books

Feature	Access	Notes / Conditions
Search books	Owner	Search powered by Google Books API.
Add club books	Owner	Selected books are saved to the club’s reading list.
Manage reading status	Owner	Books can move between to read, reading, and read.
View current and historic reads	Members, Owner	Visible inside the club page.

Meetings

Feature	Access	Notes / Conditions
Schedule meeting	Owner	Includes title, description, date, time, meeting type, and location/link.
Edit meeting	Owner	Owners can update meeting details.
Delete meeting	Owner	Allowed unless blocked by booking rules in backend.
Book a meeting	Members, Owner	Members can RSVP/book into meetings.
View meetings	Members, Owner	Meetings are visible inside the club dashboard.

Announcements Board

Feature	Access	Notes / Conditions
View announcements	Members, Owner	Club-only content.
Post announcement	Owner	Used for updates, reminders, and links.

Profile and Dashboard Features

Feature	Access	Notes
View personal profile	Authenticated user	Includes user details and activity summary
Edit profile	Authenticated user	Update profile information
View owned clubs	Authenticated user	Clubs created by the user
View joined clubs	Authenticated user	Clubs the user belongs to
View pending approvals	Owner	Shows pending join requests for private clubs
View booked meetings	Authenticated user	Displays upcoming meetings the user has joined

Pages

Page	Functionality	Access
Home	Marketing page with hero section, stats, platform explanation, and featured clubs.	Public
Register	Create an account.	Public
Login	Log into the platform.	Public
Club List	Discover clubs, search by keyword, and filter by visibility.	Public / Authenticated
Club Page	Club dashboard with books, meetings, members, and announcements.	Depends on membership and role
Create Club	Create a new club with details and settings.	Authenticated
Profile	View profile info, joined clubs, owned clubs, pending approvals, and booked meetings.	Authenticated
Not Found	Handles invalid routes.	Public

Nice To Haves

• Book voting and polls
• Ratings and reviews
• Calendar integration
• Notifications system
• Co-organisers / multiple organisers
• Richer discussion threads
• Better analytics and reading insights
• More advanced filtering and search

Technical Implementation

Front-End Stack

• React 19
• React Router
• Vite
• Tailwind CSS v4
• Motion
• Fetch API
• Custom React hooks for shared logic
• Context API for authentication state

External Integrations

• Google Books API for searching and importing book metadata

Routing

The frontend uses React Router to manage navigation across the application.

Current Routes

Route	Page	Purpose
/	Home Page	Landing page with hero section, stats, feature overview, and featured clubs
/login	Login Page	Allows existing users to sign in
/register	Register Page	Allows new users to create an account
/clubs	Club List Page	Displays all discoverable clubs with search and visibility filters
/clubs/:clubId	Club Page	Displays a single club's dashboard, including books, meetings, announcements, and member-related actions
/clubs/create	Create Club Page	Allows authenticated users to create a new book club
/profile	Profile Page	Displays the logged-in user’s profile, clubs, approvals, and booked meetings
*	Not Found Page	Fallback page for invalid routes

Routing Notes

• Routing is configured in src/main.jsx.
• The app uses a shared navigation layout through the NavBar component.
• Some pages render different content depending on whether the user is a guest, member, or owner.
• The club detail route uses a dynamic clubId parameter so each club can be loaded individually.

Front-End Architecture

The frontend is organised by responsibility, with route-level pages, reusable UI components, API helper functions, and custom hooks separated into clear folders.

Folder Structure

src/
  api/                API helper files for backend and external requests
  components/         Shared and feature-specific UI components
    clubs/            Club-related UI components
    forms/            Form components
    modals/           Modal components
    motion/           Animation and scroll-reveal helpers
  hooks/              Custom hooks for shared state and data loading
  pages/              Route-level page components
  utils/              Helper functions
  main.jsx            App entry point and router configuration