Book Reviews!

On this website, users can leave reviews, share their favorite books, and communicate via text messages or video chats.

Home Page
Demo Video

Test Account

Account Password
mark@gmail.com mark123

Features

  • Managed variables and data types with TypeScript.
  • Used Next.js Server Side Render to avoid flickering pages while data fetching.
  • Implemented group video chat feature using WebRTC.
  • Built the online chatroom to let members exchange thoughts about a book.
  • Built a rating/review system with sub-reviews to let users exchange their ideas.
  • Built a friend system that allows users to follow their friends' collections or reading status.
  • Notified users when their reviews have been replied to with Firestore (onSnapShot).
  • Connected to Google Books APIs for book searching.
  • Integrated Google Books APIs and Firestore to save and create new book data.
  • Used Immer to update objects and keep them immutable.
  • Enabled users to manage their book collections and reading status by React-Beautiful-DnD.
  • Managed members' login status and information with React-Redux.
  • Applied Storybook to display UIs with less effort and no flakes.
  • Created a member system with Firebase Authentication and Firestore.
  • Applied RWD for almost all sizes of (>320px) devices.

Packages

  • react
  • next
  • @reduxjs/toolkit
  • styled-components
  • firebase
  • immer
  • react-beautiful-dnd
  • react-quill
  • react-loading-skeleton
  • sweetalert2
  • typescript
  • storybook
  • eslint

Function Map

function map

Architecture

Architecture

Page Snapshots

Home Page
homepage

Book Information
book info

Book Review Page
review

Chat Room
text chat

Video Chat Room
video chat

Profile Page
profile

Other Member Page
other member