This project provides an administrative interface for managing tissue sample collections and associated samples. It enables efficient tracking and organisation of valuable biological data for research and clinical purposes.
Key Features:
- Visualise Collections: View a comprehensive list of existing sample collections.
- Explore Samples: Deep dive into the details of samples associated with each collection.
- Expand Resources: Add new samples to existing collections.
- Catalog New Collections: Organize your biological data by creating new collections with ease.
To run Bio Bank locally, ensure you have the following tools installed
- Node.js(v16+)
- NPM
- MySQL
- clone repository:
git clone https://github.com/Kehindecodes/Bio_Bank- Navigate to project directory:
cd Bio_Bank- Install dependencies :
npm install- Install backend and frontend dependencies :
# Install backend dependencies
cd server
npm install
# Install frontend dependencies
cd client
cd bio-bank
npm install- Configure Database:
- Edit
server/src/services/database.config.jswith your MySQL credentials.
- Run Application from root folder:
npm run devThis command starts both the backend server and frontend client concurrently.
- Access Application:
- Launch your web browser and navigate to the following address:
http://localhost:5173/This will open the Bio Bank application in your browser, ready for use.
The project is organized into server and client folders, each with its own set of files and directories
- Node.js
- Express.js
- Sequelize(ORM for MySQL)
- Navigate to server directly
cd server- Install Dependencies
npm install- Configure database in
server/src/services/database.config.js - Run backend server
npm run devDB_HOST: Your MySQL server hostname or IP address.DB_USER: Your MySQL username.DB_PASSWORD: Your MySQL password.DB_NAME: Your MySQL database name.
All API responses are delivered in JSON format, with clear error codes and messages for handling unsuccessful requests
GET /api/v1/collections: Retrieve a list of collectionsPOST /api/v1/collections: Create a new collectionGET /api/v1/collections/:id/samples: Retrieve samples for a specific collectionPOST /api/v1/collections/:id/samples: Add a new sample to a specific collection
The backend API endpoints are covered by a suite of automated tests to ensure their correctness and robustness. These tests use the supertest library to simulate HTTP requests and assert expected responses.
Run backend test :
npm testThe MySQL database includes tables for collections and samples. Refer to server/src/models for the Sequelize model definitions.
- React.js
- TailwindCSS
- Navigate to frontend directory
cd client
cd bio-bank- Install dependencies
npm install- Run frontend development server
npm run devThe src folder contains the main React components, organized into directories such as components and pages and it also has an api folder too.
CollectionTable: Dynamically displays a list of collections with sorting functionalities.Pagination: Enables users to easily navigate through pages of data when collections are numerous.FormModal: A reusable modal window used for both creating new collections and adding new samples.SampleTable: Presents a table of samples associated with a specific collection
The state is managed using React's local component state and the useSWR library for data fetching.
Frontend forms utilize react-hook-form library for validation to ensure accurate data entry before submitting requests.
Tailwind CSS is used for styling, and the configuration can be found in tailwind.config.js.