LibraryApp

A full-stack library information system built as an Information Systems project. The application combines a React + TypeScript frontend with an Express backend, MySQL database access through Sequelize, and role-based member/admin workflows.

Overview

LibraryApp explores the core processes of a library system: authentication, book management, member management, borrowing transactions, fines, dashboards, and administrative views.

A deployed frontend is configured in the repository homepage.

Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• Axios
• Motion

Backend

• Node.js
• Express
• Sequelize
• MySQL
• JWT authentication
• bcryptjs

Main Features

Member Flow

• Login/session handling
• Book catalogue
• Borrowing workflow
• Return requests
• Member dashboard
• Profile/settings flow

Admin Flow

• Admin dashboard
• Book management
• Member management
• Transaction management
• Reports
• Stock / supply-related views
• HR-related administrative routes

Backend API

The backend exposes route groups for:

/api/auth
/api/buku
/api/anggota
/api/kategori
/api/peminjaman
/api/denda
/api/dashboard
/api/hr

Database configuration is environment-based rather than hardcoded into application source.

Project Structure

src/
  components/
  data/
  services/
  utils/
  App.tsx

backend/
  config/
  controllers/
  middleware/
  models/
  routes/
  seeders/
  server.js

Environment Setup

The repository provides backend/.env.example for local configuration.

Example:

PORT=3001
DB_HOST=localhost
DB_PORT=3306
DB_NAME=atma_library_db
DB_USER=root
DB_PASS=
JWT_SECRET=replace_with_your_own_secret
JWT_EXPIRES_IN=7d

Do not commit real credentials or production secrets.

Run Locally

Frontend

npm install
npm run dev

Backend

cd backend
npm install
node server.js

The frontend development environment expects the backend API to be available separately.

What This Project Demonstrates

• Translating information-system requirements into application modules
• Role-based user flows
• REST-style frontend/backend integration
• Relational database integration with Sequelize
• Authentication with JWT and hashed passwords
• Separation of frontend, backend, routes, models, and services

Notes

Some parts of the frontend still include mock data for areas where the corresponding database module is not yet available. The repository should be treated as a portfolio/academic implementation rather than a production library platform.

Status

Academic / portfolio full-stack project.