ToolTrack

ToolTrack is a web application designed for and together with OsloMet Makerspace to provide a digitalized database of tools available for students and staff. The solution is a React single-page application with .NET Core Web API, focused on user experience and universal design, serving as an improvement of the manual system today.

📌 Project Overview

ToolTrack provides a centralized digital eqipment and inventory managment system for all tools available in OsloMet Makerspace.

🛠 Features

• 🔍 Searchable Equipment Registry
• 🧑‍🎓 Role-Based Access Control
• ✍️ CRUD Operations
• 🔐 Authentication & Authorization (JWT)
• 📷 Image Handling (Upload & URL)
• 📎 QR Code Integration
• 📋 Swagger API Documentation

⚙️ Prerequisites

• Node.js 22.14 LTS
• npm 10+
• .NET 9.0 SDK

🚀 How to Run the Project

Backend

1. Navigate to the backend folder:

   cd api

2. Restore packages and run the server:

   dotnet restore
   dotnet run

The backend will run at: https://localhost:7219/

Frontend

1. Navigate to the frontend folder:

   cd client

2. Install dependencies and start the React app:

   npm install
   npm run dev

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

Logg inn to application in dev mode

Pre made user for testing and development.

Admin

Username : admin@oslomet.no Password : Admin123456!

Student

Username : student@oslomet.no Password : Tests123456!

🧪 Swagger UI

• URL: https://localhost:7219/swagger
  ⚠️ NOTE: Use HTTPS only – HTTP calls will fail due to JWT authentication.

To call endpoints:

1. Open Swagger UI and click "Authorize"
2. Log into the React app (admin account recommended) and copy the JWT token from the browser console
3. Paste the token with prefix Bearer (e.g., Bearer eyJhbGci...) in the popup
4. Click "Authorize"
5. Find the endpoint, click "Try it out", and then "Execute"

🧑‍💻 Technologies Used

🧩 Frontend (React)

• React 18.3.1 – SPA architecture
• TypeScript 4.9.5 – Strong typing
• React Bootstrap 2.10.9 – Component-based UI
• Bootstrap 5.3.3 – CSS framework
• Bootstrap Icons 1.13.1 – Icon set
• React Router DOM 7.1.5 – Routing
• Axios 1.7.9 – HTTP client
• Formik 2.4.6 – Form handling
• JWT-Decode 4.0.0 – Decoding JWTs
• QRCode.react 4.2.0 – QR code rendering
• React Scripts 5.0.1 – Build scripts

🛠 Backend (ASP.NET Core)

• ASP.NET Core 9 (Web API)
• Entity Framework Core + SQLite – Lightweight DB
• ASP.NET Identity – User & role management
• JWT Authentication – Secure stateless sessions
• Swagger / Swashbuckle – API documentation
• Serilog – Structured logging

📂 Project Structure

• client/ – React SPA with modular architecture
• api/ – ASP.NET Core API with services, DTOs, and DB seeding
• api.tests/ – Unit testing
• docs/ – Docs

🖼 Screenshots

🔐 Login Page

🛠 ToolModel Dashboard

🔎 Student Dashboard

📎 QR Dashboard

✍️ Create new tool model

📄 License

This project was developed for academic purposes at OsloMet and is not currently licensed for commercial distribution. Contact the authors for permission before reuse.

👨‍🏫 Credits

Developers:

• Aina Haugen Aae
• Christine Marie Feldtmann Fischer Baasland
• Nathalie Piqué Kulsrud
• Robert Magnus Aubrey

Supervisors:

• Karan Singh Chaudhary (OsloMet)
• Notto Johannes Windju Thelle (OsloMet Makerspace)