The modern, responsive frontend for the Book Forum platform.
Built with React, TypeScript, and Shadcn UI.
BookForum is a full-stack digital library and community platform where users can discover, rate, and discuss books. It is built as a modern distributed system consisting of two key components:
- Backend API (Spring Boot): A robust, secure REST API handling data persistence, authentication (JWT/OAuth2), and complex business logic.
- Frontend UI (React + Vite): This repository contains the responsive user interface that consumes the backend API to deliver a seamless user experience.
The goal of BookForum is to create a feature-rich social platform for readers. While the backend handles the heavy lifting of security and data management, this frontend provides the interactive layer—allowing users to search catalogs, manage profiles, and engage in discussions in real-time.
Together, they form a complete ecosystem for:
- Discovery: Browsing and searching vast book collections.
- Community: Connecting users through ratings, reviews, and social logins.
- Management: empowering admins with dashboard tools to curate content.
- Authentication — Email/Password login, Register, Google/GitHub OAuth
- Book Discovery — Search, filter by category/author, pagination
- Interactions — Rate books (1-5 stars), post comments, manage profile
- Security — Automatic token refresh, protected routes
- Book Management — Add, edit, delete books
- Image Uploads — Drag-and-drop cover image uploads (Cloudinary)
- Monitoring — Access to system health status
- Dark Mode — System aware theme preference
- Toast Notifications — Real-time feedback for actions (Sonner)
- Form Validation — Robust client-side validation (Zod + React Hook Form)
- Core: React 18, TypeScript, Vite
- Styling: Tailwind CSS, Shadcn UI, Class Variance Authority
- State/Data: TanStack Query (React Query), Context API
- Forms: React Hook Form, Zod
- Routing: React Router DOM
- Icons: Lucide React
- Node.js 18+
- npm, pnpm, or bun
# Clone the repository
git clone https://github.com/yourusername/story-scape-ui.git
cd story-scape-ui
# Install dependencies
npm installCreate a .env.local file in the root directory:
# Backend API URL (defaulting to localhost:8080)
VITE_API_BASE_URL=http://localhost:8080npm run devThe app will open at http://localhost:5173
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
src/
├── components/ # Reusable UI components (Shadcn + Custom)
├── pages/ # Main application pages (Login, BookDetails, etc.)
├── hooks/ # Custom React hooks (useAuth, useToast)
├── services/ # API service layers (Axios config)
├── lib/ # Utilities (cn, validators)
├── contexts/ # React Contexts (AuthContext)
└── types/ # TypeScript interfaces
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT License - See LICENSE for details.