Next Book

What's the next book I should read?

Your personal book collection management app, built using NextJS with Typescript.

Learning Objectives

TBD

Tech Stack

• NextJS 14 - App Structure ✅
• ReactJS 18 ✅
• TailwindCSS ✅
• TypeScript ✅
• Components from ShadCN UI ✅
• StorybookJS

Project Scope

• Use TypeScript with NextJS & ReactJS to build a personal book collection management app.
• Allow adding your book collection, along with other reading details:
  • Reading Status: Read/In Progress/Not Started
  • Format: Physical Book, PDF, Kindle Edition
  • Purchase Details (Date, Store, Price, Gifted, etc)
  • Capture reading progress
  • Allow adding custom summary, when marking a book as completed
• Based on the data entered, it can show various stats
• The app can also randomly recommend a new book to start, if you are confused which one to pick up next.

Near Future Scope:

• Writing Tests
• Adding StorybookJS

Project Structure

Pages

• Dashboard (/dashboard)
  • Currently Reading
  • Recently completed
  • Recently purchased/acquired
  • Stats
  • Add New Book
• My Collection (/dashboard/collection)
  • Filter options
• Add New Book (This can be a modal instead of a page)
• Edit Book Details (/dashboard/collection/:id/edit)
  • Update Book reading progress
  • Capture Personal Notes or Book Summary or Review
• Login (/login)
• Forgot Password (/reset-password)

Templates

• Login Form
• Navigation ✅
• List of Books (Cards Collection)
• List of Books (Tabular)
• Book Details Form (For Add & Edit pages)

Organisms

• Book Profile (Individual Book Card)

Molecules

• Hash Tags (aka Chips)
• Book Status Tags
• Book Name + Author Name

Atoms

• Buttons ✅
• Tags
• Book Cover Image
• Links
• User Profile Photo
• Input Field
• Label
• Text (Body, Header, Title Text can be created/controlled by CSS styling)

Deployed on Vercel

Link (Coming Soon)