Book Collection App

Project Overview

The Book Collection App is a full-stack MERN project that allows users to add, edit, view, and delete books in a personal digital library.
It features a modern, responsive UI built with Tailwind CSS v4.1, making it visually appealing and easy to use.
This project demonstrates CRUD functionality, API integration, and component-based design – perfect for students, beginners, or developers learning full-stack development.

Screenshots

Key Features

Modern, Responsive Design: Built with TailwindCSS v4.1 and smooth UI animations.
Full CRUD Functionality: Add, edit, delete, and view books with real-time updates.
Component-Based Architecture: Clean code structure with reusable React components.
Glassmorphism + Gradient UI: Aesthetic and minimalistic interface with focus on usability.
Fully Responsive: Optimized for desktop, tablet, and mobile screens.
MongoDB Integration: Persistent data storage using MongoDB Atlas or local instance.
RESTful API: Backend built using Express.js with structured routes and controllers.

Functionality

Add Book: Users can add a new book with its title, author, and description.
Edit Book: Users can update book details via a clean, pre-filled form.
Delete Book: Allows users to remove unwanted books instantly.
View All Books: Displays all added books in a responsive, card-based layout.
Navigation Bar: Seamless navigation between Home and Add Book pages.
Dynamic Updates: Uses Axios and React state to update the UI instantly after CRUD actions.

Technology Used

Frontend:
- React.js: For building dynamic user interfaces
- Axios: For API communication
- React Router DOM: For page navigation and protected routes
- Tailwind CSS: Styling and responsive layout
Backend:
- Node.js + Express.js: Server and API handling
- MongoDB + Mongoose: Database and schema modeling
- CORS + dotenv: Configuration and cross-origin setup

Why This Project Is Useful

Perfect Learning Project: Ideal for understanding CRUD operations and full-stack app structure.
Builds Real-World Skills: Teaches API creation, state management, and React integration.
Portfolio-Ready: Modern UI and clean functionality make it a strong portfolio project.
Easily Extendable: Can be upgraded with authentication, search, filters, or image uploads.
Foundation for Larger Projects: Provides a base for apps like reading lists, libraries, or book marketplaces.

Deployment and Environment Setup

Environment Variables Setup:
- backend/.env
  - PORT: 3000
  - MONGO_URI: mongodb_url_string
  - JWT_SECRET: your_jwt_secret_key_here (if needed)
- frontend/.env
  - VITE_API_URL: backend_url
Deployment Overview:
- Render or Railway for backend hosting
- Vercel or Netlify for frontend hosting
- MongoDB Atlas for the database
Backend Deployment:
- Push your code to GitHub.
- Go to Render.com or Railway.app.
- Create a new Web Service and connect your GitHub repository.
- Choose “backend/” as the root directory.
- Add the following environment variables on Render:
- PORT=10000
- MONGO_URI=your MongoDB Atlas URI
- JWT_SECRET=your JWT secret
- Start command: npm start (Ensure your backend/package.json includes “start”: “node server.js”)
- After deployment, note your backend URL, e.g. https://your-backend-name.onrender.com
Frontend Deployment:
- Go to Vercel.com or Netlify.com.
- Create a new project and connect the GitHub repo.
- Select the “frontend/” folder as root.
- In environment variables, set:
- VITE_API_URL=https://your-backend-domain.com/api (or REACT_APP_API_URL if using CRA)
- Deploy.
MongoDB Atlas Setup:
- Go to https://cloud.mongodb.com
- Create a free cluster.
- Add your current IP address in Network Access.
- Create a database user and password.
- Copy the connection string and replace username, password, and database name in MONGO_URI in backend/.env