A comprehensive web application designed specifically for bioinformatics researchers to manage, track, and organize their research projects efficiently. Built with React and modern web technologies, this tool provides an intuitive interface for project management with features tailored to computational biology workflows.
- Drag-and-drop project organization with sortable cards
- Multi-stage workflow tracking (Planning → Data Collection → Analysis → Complete)
- Priority management (Low, Medium, High, Critical)
- Progress tracking with visual progress bars and percentage completion
- Timeline visualization with project deadlines and milestones
- Pre-built workflow templates for common analyses:
- RNA-seq Analysis
- Genome Assembly
- Variant Calling
- Metagenomics
- Step categorization (Lab Work, Analysis, Documentation, Review)
- Smart suggestions for common bioinformatics steps
- Built-in time tracker for each project
- Session-based tracking with start/stop functionality
- Cumulative time reporting across projects
- Productivity insights and time analytics
- Dashboard overview with key metrics
- Progress visualization using charts and graphs
- Smart insights and project recommendations
- Deadline monitoring with overdue alerts
- Performance metrics and completion rates
- Dark/Light mode toggle for comfortable viewing
- Responsive design that works on desktop, tablet, and mobile
- Advanced search and filtering by stage, priority, tags, and text
- File attachment support for protocols, data files, and documents
- Tagging system for project categorization
- PDF reports with project summaries and progress
- Word document export for detailed project documentation
- Local data persistence with browser storage
Main dashboard showing multiple project cards with drag-and-drop functionality, filtering options, and project overview
Detailed project form with step tracking, progress management, timeline visualization, and project configuration
- Node.js 14.0 or higher
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/bioinf-tracker.git cd bioinf-tracker -
Install dependencies
npm install
-
Start the development server
npm start
-
Open your browser Navigate to
http://localhost:3000to view the application.
npm run buildThis creates an optimized production build in the build folder.
-
Click "New Project" in the top right corner
-
Fill in basic information:
- Project name (e.g., "RNA-seq Analysis - Cancer Study")
- Current stage (Planning, Data Collection, etc.)
- Priority level
- Start and due dates
- Description
-
Add project steps:
- Use templates for common workflows
- Drag and drop to reorder steps
- Categorize steps by type (Lab Work, Analysis, etc.)
-
Organize with tags: Add relevant tags like "RNA-seq", "Cancer", "High-throughput"
- Drag cards to reorder projects by priority
- Use the search bar to find specific projects
- Filter by stage, priority, or tags using the filter controls
- Track time using the built-in timer for each project
- Attach files like protocols, data files, or documentation
- Switch to Dashboard view for overview metrics
- Use Analytics view for detailed insights and recommendations
- Export reports in PDF or Word format for sharing or archiving
- React 18+ - Modern JavaScript framework
- Tailwind CSS - Utility-first CSS framework
- Recharts - Responsive chart library
- DND Kit - Modern drag and drop library
- Date-fns - Modern date utility library
- jsPDF & docx - Document generation
- React Select - Enhanced select components
{
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"date-fns": "^4.1.0",
"docx": "^9.5.0",
"jspdf": "^3.0.1",
"lucide-react": "^0.511.0",
"react": "^19.1.0",
"react-select": "^5.10.1",
"recharts": "^2.15.3"
}bioinf-tracker/
├── public/ # Static assets
├── src/
│ ├── App.js # Main application component
│ ├── index.js # Application entry point
│ ├── index.css # Global styles with Tailwind
│ └── ...
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind configuration
└── README.md # This file
Create a .env file in the root directory for custom configuration:
REACT_APP_VERSION=1.0.0
REACT_APP_BUILD_DATE=06/02/2025Edit the BIOINFORMATICS_TEMPLATES object in App.js to add new workflow templates:
const BIOINFORMATICS_TEMPLATES = {
'Your New Template': {
category: 'Analysis',
steps: [
{ text: 'Step 1', category: 'Lab Work' },
{ text: 'Step 2', category: 'Analysis' },
// ... more steps
]
}
};Update the arrays in App.js:
const stages = ['Planning', 'Data Collection', /* your stages */];
const priorities = ['Low', 'Medium', 'High', 'Critical'];We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow React best practices
- Use Tailwind CSS for styling
- Ensure responsive design
- Add JSDoc comments for complex functions
- Test on multiple browsers
This project is licensed under the MIT License - see the LICENSE file for details.
Eren Ada, PhD
- GitHub: @erenada
- Email: erenada@gmail.com
- React community for excellent documentation
- Tailwind CSS for the utility-first approach
- Recharts for beautiful data visualization
- All contributors to the open-source libraries used
If you encounter any issues or have questions:
- Check the Issues section
- Create a new issue with detailed description
- For urgent matters, contact the author directly
- Team collaboration features
- Cloud synchronization
- Advanced analytics with machine learning insights
- Integration with common bioinformatics tools
- Mobile app development
- API for third-party integrations
- Enhanced template library
- Bulk project operations
- Calendar integration
- Notification system
- Data backup/restore functionality
Created: June 2, 2025
Last Updated: June 2, 2025
Version: 1.0.0
Made for the bioinformatics community