Book CRUD Frontend

A simple React frontend application for managing books and authors, designed to work with the Book API Express SQLite backend.

Overview

This project provides a user-friendly web interface to manage a collection of books and authors. It allows users to perform CRUD (Create, Read, Update, Delete) operations on both books and authors, with a clean and responsive UI.

Screenshots

Features

• Author Management

  • View all authors
  • View author details including their books
  • Add new authors
  • Edit existing authors
  • Delete authors (with cascade deletion of their books)

• Book Management

  • View all books with author information
  • View book details
  • Add new books
  • Edit existing books
  • Delete books
  • Filter books by author

Project Structure

src/
├── components/
│   ├── authors/
│   │   ├── AuthorForm.jsx
│   │   ├── AuthorList.jsx
│   │   └── AuthorDetail.jsx
│   └── books/
│       ├── BookForm.jsx
│       ├── BookList.jsx
│       └── BookDetail.jsx
├── services/
│   ├── api.js
│   ├── authorService.js
│   └── bookService.js
├── App.jsx
├── main.jsx
└── index.css

Prerequisites

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)
• Book API Express SQLite backend running on port 3000

Installation

1. Clone the repository:

   git clone https://github.com/kstayner/book-crud-frontend.git
   cd book-crud-frontend

2. Install dependencies:

   npm install

3. Make sure the Book API Express SQLite backend is running on port 3000.

4. Start the development server:

   npm run dev

5. Open your browser and navigate to http://localhost:5173

Dependencies

• React - UI library
• React Router - Routing
• Axios - HTTP client
• Vite - Build tool and development server
• Book API Express SQLite - Backend API

API Integration

This frontend application is designed to work with the Book API Express SQLite backend. Make sure the backend is running before using this application.

The API base URL is configured in src/services/api.js and defaults to http://localhost:3000.

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the production-ready application
• npm run preview - Preview the production build locally

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Acknowledgments

• Book API Express SQLite for providing the backend API
• React for the fantastic UI library
• Vite for the fast development experience