🔖 Introduction
About the project
The Bookstore API is a full-stack web application designed for managing bookstore operations, including books, authors, customers, carts, and orders. Built for the e-commerce and retail industry, the project aims to provide a seamless platform for bookstore administrators to perform CRUD (Create, Read, Update, Delete) operations via a RESTful API and a user-friendly interface. As a solo developer, I created this project to demonstrate my full-stack development skills, focusing on modern UI/UX, efficient API integration, and scalable deployment. The result is a responsive, visually appealing app deployed on Vercel (frontend) and Render (backend), with features like a stunning cart experience, sample data for testing, and real-time feedback.
🤔 Problem space
Problems to solve/Requirements to Create
The Bookstore API addresses the need for an intuitive, efficient system to manage bookstore resources, replacing manual or fragmented processes with a centralized, API-driven platform. Hypothetically, a small bookstore client requires a solution to streamline inventory and order management while ensuring ease of use for non-technical staff.
👉 Problem: Lack of a centralized system for managing bookstore inventory
Small bookstores often rely on spreadsheets or disparate tools to track books, authors, and inventory, leading to errors, inefficiencies, and difficulty scaling. Administrators need a single interface to create, update, and delete records, with clear validation and feedback.
Current solution
Currently, bookstore staff manually update Excel sheets or use basic inventory software with limited functionality. This requires duplicate data entry (e.g., entering author details separately from books) and lacks real-time stock updates or customer order tracking.
How do we know it is a problem
👉 Problem: Inefficient customer order and cart management
Bookstores struggle to manage customer carts and orders without a streamlined process, leading to lost sales or incorrect orders. Staff need a way to add items to carts, confirm orders, and view order history without complex workflows.
Current solution
Staff manually note customer orders on paper or in separate systems, with no link to inventory. Customers cannot view their cart in real-time, and order creation is prone to errors (e.g., out-of-stock items).
How do we know it is a problem
Why solve these problems?
Addressing these issues is critical to improve operational efficiency, reduce errors, and enhance customer satisfaction for small bookstores. Solving them now aligns with the growing demand for digital transformation in retail, enabling bookstores to compete with larger e-commerce platforms.
Reason: Streamlined inventory and order management saves time, allowing staff to focus on customer service.
Reason: A modern, API-driven system enables future integrations (e.g., with online marketplaces or mobile apps).
[User satisfaction matrix]: The current manual system rates low on user satisfaction (2/5) and high on importance (5/5) due to its impact on daily operations. The Bookstore API aims to move this to high satisfaction (4/5) by automating processes and improving usability.
Goals
Company objective 🎯
To create a modern, API-driven bookstore management platform that simplifies inventory, cart, and order processes, enabling small bookstores to operate efficiently and scale digitally.
Project goals
Project goal: Develop a responsive React frontend with Tailwind CSS, featuring intuitive forms, a stunning cart modal, and sample data for easy testing, to ensure a user-friendly experience. This supports the objective by making the platform accessible to non-technical users.
Project goal: Build a robust Spring Boot backend with JAX-RS RESTful APIs and in-memory storage for reliable CRUD operations, ensuring scalability and performance. This aligns with the objective by providing a flexible, extensible API.
Project goal: Deploy the frontend on Vercel and backend on Render with CI/CD via GitHub, ensuring high availability and easy updates, supporting the objective of a modern, maintainable system.
User Stories
Visitor 1: Bookstore Administrator
A bookstore administrator manages daily operations, including inventory updates, customer records, and order processing. They need a simple interface to perform these tasks without technical expertise.
Goals: Quickly add, update, or delete books, authors, and customers; manage carts and orders efficiently.
Needs: Clear forms with validation, sample data for testing, and colorful API response feedback.
Other characteristic: Prefers a visually appealing, intuitive UI with minimal learning curve.
Visitor 2: Bookstore Owner
The bookstore owner oversees operations and wants insights into inventory and orders to make business decisions. They need a system that’s reliable and easy to monitor.
Goals: View all books, customers, and orders; ensure stock levels are accurate; track sales via orders.
Needs: Fast API responses, a dashboard-like interface (future vision), and error-free data management.
Other characteristic: Values scalability for potential online sales integration.
🌟 Design space
UI Design
The UI is designed to be modern, clean, and user-friendly, using Tailwind CSS for a consistent, responsive layout. The Home page features a hero section with a gradient CTA, a “How It Works” guide, feature cards, and navigation cards to guide users. Each resource page (Books, Authors, Customers, Cart, Orders) uses a form-based layout with labeled inputs, colorful action buttons (e.g., blue for Create, red for Delete), and a collapsible Sample Data section with JSON examples. A fixed navbar with a cart badge ensures easy navigation, while a stunning cart modal (with animations) confirms additions. The design prioritizes usability with clear validation, real-time feedback via React Hot Toast, and vibrant JSON responses (green for success, red for errors).
Low-fidelity Wireframe
The low-fidelity wireframes outlined the app’s structure, focusing on simplicity and flow. Key concepts included a grid-based Home page, form-driven resource pages, and a modal for cart actions.
Design concept: Minimalist Form-Based Interface
Centralized forms for each resource to streamline CRUD operations.
Collapsible sample data to reduce clutter but aid testing.
Fixed navbar for consistent navigation across pages.
High-fidelity design
High-fidelity mockups refined the wireframes into a polished UI with Tailwind CSS styling. Key flows include adding a book, managing a cart, and creating an order, with gradients, shadows, and hover effects for a premium feel.
Design system 🎨
I utilized a custom design system based on Tailwind CSS to ensure consistency and modularity. Tailwind’s utility classes enabled rapid styling with reusable components (e.g., buttons, cards, forms). Colors were defined as primary (#1D4ED8), secondary (#F97316), success (#10B981), error (#EF4444), and neutral (#F3F4F6), applied consistently across buttons, inputs, and notifications. Typography used sans-serif fonts (Inter) with bold headings and readable body text. This system streamlined development, ensured a cohesive look, and allowed easy updates for future features.
Development Phase
Technology Stack Selection
The tech stack was chosen to balance performance, scalability, and developer efficiency, leveraging modern tools suitable for a full-stack application.
1. Frontend - React with Tailwind CSS
Why React?
Component-Based Architecture: Enabled reusable components (e.g., ResponseDisplay, Navbar), reducing code duplication.
Efficient Rendering: Virtual DOM ensured fast updates for dynamic forms and responses.
Ecosystem: Libraries like React Router and React Hot Toast simplified routing and notifications.
Why Tailwind CSS?
Utility-First Styling: Allowed rapid, consistent UI design without custom CSS.
Responsiveness: Built-in breakpoints (sm:, md:, lg:) ensured mobile-friendly layouts.
Customizability: Tailwind config defined project-specific colors and animations.
2. Backend - Java with JAX-RS
Why Spring Boot?
Rapid Development: Simplified REST API creation with minimal setup.
Java Ecosystem: Leveraged Java’s robustness for reliable backend logic.
Scalability: Dependency injection and modular design supported future growth.
Why JAX-RS?
RESTful Standards: Provided clear annotations (e.g., @GET, @POST) for API endpoints.
Interoperability: Ensured compatibility with in-memory storage and future databases.
3. Deployment - Vercel and Render
Vercel: Chosen for frontend hosting due to its seamless React integration and CI/CD.
Render: Selected for backend hosting, supporting Spring Boot with easy scaling.
GitHub: Enabled version control and automated deployments.
4. Testing - Postman
Purpose: Validated API endpoints (e.g., /books, /orders) for correct responses and error handling.
Benefit: Ensured backend reliability before frontend integration.
High-Level Architecture Diagram
The system follows a client-server model. The React frontend, hosted on Vercel, sends HTTPS requests (via Axios) to the Spring Boot backend on Render. The backend processes requests, interacts with in-memory storage, and returns JSON responses. GitHub integrates with Vercel/Render for CI/CD, and Postman tests API endpoints.
Entity-Extended Relationship Diagram
The in-memory storage mimics a database with entities: Author (authorId, firstName, lastName, biography), Book (bookId, title, authorId, isbn, publicationYear, price, stock), Customer (customerId, firstName, lastName, email, password), Cart (cartId, customerId, bookId, quantity), and Order (orderId, customerId, orderDate, totalAmount, cartItems). Relationships include one Author to many Books (1:N), one Customer to many Carts/Orders (1:N), and Books to Carts (N:M).
Key Features of the Software
Feature 1: CRUD Operations for Resources
Description: Users can create, read, update, and delete books, authors, customers, carts, and orders via intuitive forms and RESTful APIs.
Decisions:
Form Validation: Implemented client-side validation (e.g., required fields, email format) to prevent invalid API calls.
API Endpoints: Designed RESTful endpoints (e.g., POST /books, GET /authors/{id}) for clarity and scalability.
Sample Data: Added collapsible JSON examples on each form to simplify testing.
Feature 2: Stunning Cart Experience
Feature 3: Colorful API Responses
Challenges Faced and Solutions
Problem: ESLint 'no-undef' errors in form validation
The frontend threw ESLint errors due to undefined action variables in validateForm functions across form components (AuthorForm, BookForm, etc.), breaking code quality checks.
Solution:
Modified validateForm to accept an action parameter, passed from executeAction.
Updated validation logic to check fields based on the action (e.g., create requires all fields, get needs only ID).
Ran npx eslint src to confirm resolution, ensuring clean code for deployment.
Problem: Slow backend response times
The Render-hosted backend (https://libro-nest.onrender.com/api) occasionally took up to 30 seconds to respond due to cold starts, frustrating users during testing.
Solution:
Added a LoadingSpinner component with dynamic messages (e.g., “Creating book, please wait…”).
Used React Hot Toast to notify users of delays and confirm successful actions.
Included a note in the UI about potential backend wake-up times, setting clear expectations.
Problem: Sample data accessibility
Initially, sample data was only on the Home page (via IntroCard), requiring users to navigate back and forth to copy JSON examples, reducing usability.
Solution:
Moved sample data to collapsible sections on each form page (Books, Authors, etc.), styled with Tailwind CSS (gray-50 background, white code block).
Added toggle buttons with React Icons (FaChevronDown/Up) for a clean, interactive experience.
Ensured JSON was formatted with JSON.stringify(..., null, 2) for readability.
Future Vision / next steps
Long-term vision
Evolve the Bookstore API into a full e-commerce platform with user authentication, search functionality, and a customer-facing storefront.
Transition from in-memory storage to a database (e.g., MongoDB or PostgreSQL) for scalability.
Introduce a user dashboard for administrators and customers to track orders, manage wishlists, and view analytics.
Next Steps (V2, V3):
V2:
UI Enhancements: Add a search bar on the Home page, a carousel for featured books, and glassmorphism effects (frosted backgrounds) for a futuristic look.
Activity: Implement user authentication (JWT-based) to secure API endpoints and personalize experiences.
Activity: Integrate MongoDB for persistent storage, replacing in-memory data.
V3:
UI Enhancements: Develop a User Dashboard with summary cards (e.g., Total Orders, Cart Items), a recent orders table, and a wishlist grid.
Activity: Add real-time order tracking via WebSockets for live updates.
Activity: Enable integration with third-party APIs (e.g., Stripe for payments, Goodreads for book data).
UI Additions:
3D book graphics and animated transitions for a premium feel.
Interactive charts (e.g., sales analytics) in the dashboard using Chart.js
Get visibility from recruiters & peers