LibraShare

A modern library application for sharing and discovering books.

LibraShare is a full-stack web application built with Next.js and Express that enables users to browse, share, and manage book collections. Connect with other book enthusiasts and build your personal library.

Features

• Book Discovery - Browse and search a collection of shared books
• User Authentication - Secure sign-up and login functionality
• Book Management - Add, edit, and manage your personal book collection
• Social Sharing - Share your favorite books with the community
• Modern UI - Clean, responsive interface built with Next.js and Tailwind CSS
• Real-time Updates - Instant synchronization with the backend

Tech Stack

Frontend

• Next.js - React framework for production applications
• JavaScript (ES6+) - Core frontend language
• Tailwind CSS - Utility-first CSS framework
• React - UI library for building interactive components

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database for data persistence
• CORS - Cross-origin resource sharing for frontend-backend communication

Project Structure

LibraShare/
├── frontend/                 # Next.js frontend application
│   ├── app/
│   │   ├── components/      # Reusable React components
│   │   │   └── Header.js    # Main header component
│   │   ├── styles/          # Global stylesheets
│   │   │   └── globals.css
│   │   ├── layout.js        # Root layout
│   │   ├── page.js          # Home page
│   │   └── Providers.js     # Context/provider setup
│   ├── package.json
│   └── README.md
├── backend/                  # Express.js backend server
│   ├── routes/
│   │   ├── auth.js          # Authentication endpoints
│   │   └── books.js         # Book management endpoints
│   ├── config/
│   │   └── db.js            # MongoDB connection
│   ├── server.js            # Main Express app
│   ├── package.json
│   └── .env                 # Environment variables
└── README.md               # This file

Quick Start

Prerequisites

• Node.js 16+ and npm
• MongoDB (local or cloud instance)
• Git

Installation

1. Clone the Repository

git clone https://github.com/webdevyn/LibraShare.git
cd LibraShare

2. Setup Backend

cd backend
npm install

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/librashare
NODE_ENV=development

Start the backend server:

npm run dev

The backend will run on http://localhost:5000

3. Setup Frontend

Open a new terminal and navigate to the frontend directory:

cd frontend
npm install

Start the development server:

npm run dev

Open your browser and visit http://localhost:3000

API Endpoints

Authentication Routes (/api/auth)

Method	Endpoint	Description
POST	/signup	Create a new user account
POST	/login	User login
POST	/logout	User logout
GET	/verify	Verify authentication token

Book Routes (/api/books)

Method	Endpoint	Description
GET	/	Get all books
GET	/:id	Get a specific book
POST	/	Add a new book (authenticated)
PUT	/:id	Update a book (authenticated)
DELETE	/:id	Delete a book (authenticated)
GET	/search?q=query	Search books by title or author

Health Check

Method	Endpoint	Description
GET	/	Verify backend is running

Authentication

LibraShare uses JWT (JSON Web Tokens) for secure authentication:

1. Users register with email and password
2. Upon login, a JWT token is issued
3. Token is stored in localStorage on the client
4. All authenticated requests include the token in the Authorization header
5. Backend validates token before processing requests

Frontend Components

Header Component

The main header displays the LibraShare logo and navigation menu with a modern gradient background.

Layout

Root layout includes global styles, font optimization, and provider setup for context management.

Pages

• Home - Main landing page with book listings
• Additional pages for book details, user profile, etc.

Dependencies

Backend

• express - Web framework
• cors - Enable CORS
• dotenv - Environment variable management
• mongoose - MongoDB ODM (typically used for DB operations)
• Additional authentication and validation middleware

Frontend

• next - React framework
• react - UI library
• tailwindcss - Styling framework
• axios or fetch - HTTP client for API calls

Testing

To run tests (if configured):

npm test

Deployment

Frontend (Vercel)

The easiest way to deploy the Next.js frontend:

npm install -g vercel
vercel

Follow the prompts to connect your GitHub repository and deploy.

Backend (Heroku, Railway, or similar)

1. Set up environment variables on your hosting platform
2. Connect your GitHub repository
3. Configure build and start commands
4. Deploy

Troubleshooting

Backend won't start

# Check if port 5000 is already in use
lsof -i :5000  # macOS/Linux
netstat -ano | findstr :5000  # Windows

# Use a different port
PORT=5001 npm run dev

MongoDB connection errors

• Ensure MongoDB is running locally or connection string is correct
• Check .env file for MONGODB_URI
• Verify network access for cloud MongoDB instances

Frontend can't reach backend

• Verify backend is running on the correct port
• Check CORS configuration in Express
• Ensure API calls use the correct backend URL

CORS errors

CORS is enabled in the backend. If issues persist:

• Check backend console for error details
• Verify frontend and backend URLs in CORS configuration
• Ensure requests include proper headers

Contributing

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

License

This project is open source and available under the MIT License.

Author

Devyn Weir

• GitHub: @webdevyn

Support

For issues, questions, or suggestions, please open a GitHub Issue.

---

Last Updated: July 16, 2026
Status: In Development