Tool Lib Project

How to use

frontend

• cd frontend
• For first time:
  • npm install
• npm start

backend

• cd backend
• Start psql database:
  • startpostgres
• For first time:
  • npm install
  • setup database and sample data:
    • Firstly connect to database with psql
    • Then load the database and sample data with \i path\to\backend\db\schema.sql
• npm start

Project structure

1. React Components:

• Core Layout Components: These components form the basic structure of your application, providing the framework on which page-specific components are mounted.

  • Main Container
    • Main Component: The main component for rendering the webpage.
  • Navbar:
    • Navbar: The main Navigation bar component that adapts based on user authentication status.
    • NavLinks: Displays links based on user role (e.g., Borrow, Lend, My Account). For logged in, list "Tool", "Library / Borrow", "List Item / Lend", "My Account", "Help". For logged out, list "Login", "Register".
    • NotificationIcon: An icon that shows notifications with a visual indicator for new activity.
  • Footer:
    • Footer: A basic footer component for site-wide links or copyright information.

• Item Management Components: Components related to listing, managing, and viewing tool details.

  • Item Library:
    • ItemList: Displays a list of item cards.
    • ItemCard: A card that shows brief information about a tool, clickable for more details.
    • ItemDetailsModal: A modal or detailed page that opens when a ItemCard is clicked, showing extended information and interaction options like borrowing.
  • Manage Items:
    • AddItemForm: Form for adding new tools.
    • EditItemForm: Form for editing existing tool details.

• Borrowing and Lending Components: These components handle the functionalities specific to borrowing and lending tools.

  • Borrowing:
    • BorrowPage: Main page for tool borrowing, including search and filter - capabilities.
    • ItemRequestForm: Form used to request to borrow a tool.
  • Lending:
    • LendPage: Main page for managing tools that a user is lending out.
    • ItemAvailabilityManager: Component for managing when a tool is available for lending.

• Transaction and History Components: Components for managing and viewing past transactions and activities. History: TransactionHistory: A list that displays past transactions with statuses like requested, approved, lent, and returned.

• Requests Components: Handling requests and user alerts.

  • requests:
    • requestList: Dropdown list that lists requests, show as a red dot if there is any new request.
    • requestItem: Individual request items within the list, status includes 'requested', 'approved', 'lent' and 'returned'.

• Utility Components: Reusable utility components that might be used across various parts of the application.

  • Common:
    • Modal: A reusable modal component.
    • Button: Custom button component for various actions.
    • Input: Reusable input component for forms.

• Support and Miscellaneous Components: LOW PRIORITY Components for help, FAQs, and other general user support.

  • Help:
    • IntroPage: Contains intro information.
    • HelpPage: Contains FAQs and other help-related information.
    • SupportContactForm: A form for users to contact support for help.

• Authentication and User Account Components: LOW PRIORITY Components deal with user registration, login, and profile management.

  • Auth:
    • LoginForm: Form for users to enter login credentials.
    • RegisterForm: Form for new users to register.
    • UserProfile: Displays user profile information.
    • EditProfileForm: Allows users to edit their profiles.

2. Express.js backend

• Tool Management Routes: Routes for adding, updating, fetching, and deleting tool listings.

  • Tool Listings
    • POST /api/tools: Add a new tool.
      • Controller: toolControllers.createTool
    • GET /api/tools: Fetch all tools (with optional filters).
      • Controller: toolControllers.getAllTools
    • GET /api/tools/:id: Get details of a specific tool.
      • Controller: toolControllers.getToolById
    • PUT /api/tools/:id: Update tool information.
      • Controller: toolControllers.updateTool
    • DELETE /api/tools/:id: Delete a tool listing.
      • Controller: toolControllers.deleteTool

• Transaction Management Routes: These routes deal with creating and managing borrowing transactions.

  • Transactions
    • POST /api/transactions: Record a new borrowing transaction.
      • Controller: transactionControllers.createTransaction
    • GET /api/transactions: Retrieve transaction history for a user.
      • Controller: transactionControllers.getUserTransactions
    • PUT /api/transactions/:id: Update the status of a transaction (e.g., approve, return).
      • Controller: transactionControllers.updateTransactionStatus
    • GET /api/transactions/:id: Get specific transaction details.
      • Controller: transactionControllers.getTransactionById

• Requests Service Routes: Handling requests and user alerts related to user interactions with the system.

  • Requests
    • GET /api/requests: Fetch requests for a user.
      • Controller: requestControllers.getRequests
    • PUT /api/requests/:id/read: Mark a request as read.
      • Controller: requestControllers.markAsRead

• Review and Feedback Routes: Enable users to post and retrieve reviews for tools and other users.

  • Reviews
    • POST /api/reviews: Submit a review.
      • Controller: reviewControllers.createReview
    • GET /api/reviews: Fetch reviews for a specific tool or user.
      • Controller: reviewControllers.getReviews

• User Management Routes: LOW PRIORITY These routes handle user registration, login, profile management, and authentication.

  • Registration and Login

    • POST /api/users/register: Register a new user.
      • Controller: userControllers.register
    • POST /api/users/login: Authenticate user and issue token.
      • Controller: userControllers.login

  • User Profile

    • GET /api/users/profile: Retrieve user profile details.
      • Controller: userControllers.getProfile
    • PUT /api/users/profile: Update user profile details.
      • Controller: userControllers.updateProfile