📚 Book Store Scraper - Frontend

Next.js frontend application for the Book Store Web Scraper. A modern, responsive UI for scraping and viewing book data from books.toscrape.com.

🚀 Quick Start (Local Development)

Prerequisites

Node.js 18+ (check with node --version)
npm or yarn (comes with Node.js)

Step 1: Clone the Repository

git clone https://github.com/BOOK-STORE-SCRAPER/frontend.git
cd book-store-scraper-frontend

Note: Replace YOUR_ORG with your GitHub organization name.

Step 2: Install Dependencies

npm install

Step 3: Setup Environment Variables

# Copy the example environment file
cp .env.example .env.local

# Edit .env.local if your backend is running on a different URL
# Default: http://localhost:8000 (works if backend is running locally)

Default .env.local configuration:

NEXT_PUBLIC_API_URL=http://localhost:8000

Step 4: Start Development Server

npm run dev

The frontend will start at: http://localhost:3000

Step 5: Verify Installation

Open http://localhost:3000 in your browser
Make sure the backend is running at http://localhost:8000
You should see the Book Store Scraper interface
Visit http://localhost:3000/dev-status to check system status and backend connection

🔗 Backend Connection

This frontend requires the book-store-scraper-backend to be running.

Quick Backend Setup

Clone the backend repository
Follow backend README to start it
Backend should run on http://localhost:8000
Frontend will automatically connect to it

Backend Not Running?

If the backend is not running, you'll see connection errors in the browser console. Make sure:

Backend is running on http://localhost:8000
NEXT_PUBLIC_API_URL in .env.local matches your backend URL
Backend CORS allows http://localhost:3000

⚙️ Configuration

Environment Variables

Create a .env.local file in the root directory (copy from .env.example):

# Backend API URL
NEXT_PUBLIC_API_URL=http://localhost:8000

Variable	Description	Default
`NEXT_PUBLIC_API_URL`	Backend API base URL	`http://localhost:8000`

Important:

.env.local is git-ignored (your local config)
.env.example is committed (template for others)
Always use .env.local for local development

📁 Project Structure

frontend/
├── src/
│   ├── app/                    # Next.js app router pages
│   │   ├── page.tsx           # Home page
│   │   ├── admin/             # Admin dashboard
│   │   │   └── page.tsx
│   │   ├── dev-status/        # Development status page
│   │   │   └── page.tsx       # System info, backend health, dev tools
│   │   ├── layout.tsx         # Root layout
│   │   └── globals.css        # Global styles
│   ├── components/            # React components
│   │   ├── CategorySidebar.tsx
│   │   ├── BookList.tsx
│   │   ├── BookDetails.tsx
│   │   ├── StatsBox.tsx
│   │   └── AdminPanel.tsx
│   ├── lib/
│   │   └── api.ts             # API utility (uses env vars)
│   └── types/
│       └── api.ts             # TypeScript types
├── public/                    # Static assets
├── .env.example              # Environment variables template
├── package.json              # Dependencies
├── next.config.ts            # Next.js configuration
└── README.md                 # This file

🛠️ Available Scripts

# Development server (with hot reload)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

🎨 Features

✅ Category Scraping: Scrape all book categories from the website
✅ Book Listing: View books by category in organized tables
✅ Real-time Stats: Live statistics dashboard
✅ Book Details: View detailed information about each book
✅ Image Display: View book cover images
✅ Responsive Design: Works on desktop and mobile
✅ Admin Panel: Admin dashboard for managing data
✅ Dev Status Page: Development status and system information page

🔌 API Integration

All API calls are handled through src/lib/api.ts which:

Uses NEXT_PUBLIC_API_URL from environment variables
Provides type-safe methods (get, post, delete)
Handles errors consistently
Automatically constructs full URLs

Example Usage:

import { api } from '@/lib/api';

// Get categories
const categories = await api.get<Category[]>('/categories');

// Scrape categories
await api.post('/categories', { base_url: 'https://books.toscrape.com/' });

🖼️ Image Configuration

Images are configured in next.config.ts to allow:

Local development (localhost:8000)
Backend media files (/media/**)
External book images from books.toscrape.com

No additional configuration needed for local development!

🐛 Troubleshooting

Backend Connection Issues

Problem: Frontend can't connect to backend

Solutions:

Verify backend is running: http://localhost:8000/health
Check .env.local has correct NEXT_PUBLIC_API_URL
Verify backend CORS allows http://localhost:3000
Check browser console for specific errors

Build Errors

Problem: npm run build fails

Solutions:

Ensure all dependencies are installed: npm install
Check for TypeScript errors: npm run lint
Verify environment variables are set correctly

Port Already in Use

Error: Port 3000 is already in use

Solution:

# Use a different port
npm run dev -- -p 3001

Module Not Found

Error: Cannot find module

Solution:

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

🚀 Production Build

Build for Production

npm run build
npm start

Environment Variables for Production

When deploying, set NEXT_PUBLIC_API_URL to your production backend URL:

NEXT_PUBLIC_API_URL=https://your-backend-url.com

🛠️ Tech Stack

Framework: Next.js 16.0.10
UI Library: React 19.2.1
Language: TypeScript 5
Styling: Tailwind CSS 4
HTTP Client: Fetch API (via lib/api.ts)

📊 Development Status Page

The application includes a dedicated development status page at /dev-status that provides:

Backend Connection Status: Real-time monitoring of backend API connectivity
System Information: Frontend URL, API URL, Node.js version, and environment details
Health Checks: Backend health endpoint status and response details
Quick Links: Easy navigation to Home, Admin Panel, and Backend API
Environment Configuration: View current environment variables and configuration
Development Tips: Helpful tips for development workflow

Access the Dev Status Page:

Navigate to: http://localhost:3000/dev-status
Or click the "Dev Status" link from the admin panel (if added)

📚 Additional Resources

Next.js Docs: https://nextjs.org/docs
React Docs: https://react.dev
TypeScript Docs: https://www.typescriptlang.org/docs
Tailwind CSS Docs: https://tailwindcss.com/docs

🤝 Contributing

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

📄 License

MIT License

📞 Support

For issues or questions:

Open an issue on GitHub
Check the backend repository for API documentation

Happy Scraping! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
vercel.json		vercel.json

BOOK-STORE-SCRAPPER/frontend

Folders and files

Latest commit

History

Repository files navigation