Skip to content

README.md

Latest commit

 

History

History
336 lines (244 loc) · 9.39 KB

README.md

File metadata and controls

336 lines (244 loc) · 9.39 KB
HSNDB Logo

HSNDB - Human S-Nitrosylation Database

The most comprehensive database of human S-nitrosylated proteins for researchers studying nitric oxide signaling

TypeScript React Vite Tailwind CSS Supabase

🧬 About HSNDB

HSNDB (Human S-Nitrosylation Database) is a cutting-edge web application designed for researchers studying S-nitrosylation - a crucial post-translational modification where nitric oxide (NO) forms covalent bonds with cysteine residues in proteins. This database provides comprehensive information about human S-nitrosylated proteins and their role in health and disease.

🔬 What is S-nitrosylation?

S-nitrosylation is a reversible post-translational modification that serves as a critical regulatory mechanism in cellular signaling. In humans, dysregulated S-nitrosylation is implicated in:

  • 🫀 Cardiovascular diseases
  • 🧠 Neurodegenerative disorders
  • 🎯 Cancer
  • ⚡ Metabolic diseases

✨ Key Features

Feature Description
🔍 Advanced Search Intelligent auto-complete, multi-parameter filtering, and visual query builder
📊 Interactive Visualizations 3D protein structures, network analysis, and dynamic charts
📁 Flexible Data Export Multiple formats including CSV, JSON, FASTA, and XML
👥 Collaborative Research Share datasets and collaborate with research teams
⚡ High Performance Optimized for large-scale protein data analysis
🛡️ Secure & Reliable Enterprise-grade security with regular backups

🚀 Tech Stack

Frontend

  • React 18 - Modern React with hooks and functional components
  • TypeScript - Type-safe development
  • Vite - Lightning-fast build tool and dev server
  • Tailwind CSS - Utility-first CSS framework
  • Shadcn/ui - Beautiful, accessible component library
  • React Router - Client-side routing
  • React Query - Data fetching and caching

Backend & Database

  • Supabase - Backend-as-a-Service with PostgreSQL
  • Real-time subscriptions - Live data updates

Development Tools

  • ESLint - Code linting and formatting
  • PostCSS - CSS processing
  • Bun - Fast package manager

🛠️ Installation & Setup

Prerequisites

  • Node.js (v18 or higher)
  • Bun (recommended) or npm
  • Git

Quick Start

  1. Clone the repository

    git clone <repository-url>
cd Nitro

  2. Install dependencies

    # Using Bun (recommended)
bun install

# Or using npm
npm install

  3. Set up environment variables

    cp .env.example .env.local
# Edit .env.local with your Supabase credentials

  4. Start the development server

    # Using Bun
bun run dev

# Or using npm
npm run dev

  5. Open your browser

    http://localhost:8080

📜 Available Scripts

Command Description
bun run dev Start development server on port 8080
bun run build Build for production
bun run build:dev Build in development mode
bun run preview Preview production build
bun run lint Run ESLint for code quality

🏗️ Project Structure

📁 Nitro/
├── 📁 public/                 # Static assets
│   ├── favicon.ico           # App favicon
│   ├── placeholder.svg       # Placeholder images
│   └── robots.txt           # SEO robots file
├── 📁 src/
│   ├── 📁 components/        # React components
│   │   ├── 📁 ui/           # Shadcn/ui components
│   │   ├── BrowseInterface.tsx
│   │   ├── CentralSearch.tsx
│   │   ├── FeaturesSection.tsx
│   │   ├── HeroSection.tsx
│   │   └── Navigation.tsx
│   ├── 📁 hooks/            # Custom React hooks
│   ├── 📁 integrations/     # External service integrations
│   │   └── 📁 supabase/     # Supabase configuration
│   ├── 📁 lib/              # Utility libraries
│   ├── 📁 pages/            # Page components
│   └── App.tsx              # Main app component
├── 📄 package.json          # Project dependencies
├── 📄 vite.config.ts        # Vite configuration
├── 📄 tailwind.config.ts    # Tailwind CSS config
└── 📄 tsconfig.json         # TypeScript configuration

🎨 UI Components

This project uses Shadcn/ui components for a consistent and accessible design system:

  • Forms: Input, Select, Textarea, Checkbox, Radio Group
  • Navigation: Navigation Menu, Breadcrumb, Pagination
  • Data Display: Table, Card, Badge, Avatar
  • Feedback: Alert, Toast, Progress, Skeleton
  • Overlay: Dialog, Popover, Tooltip, Sheet
  • Charts: Recharts integration for data visualization

🗄️ Database Schema

The application uses Supabase PostgreSQL with the following main entities:

Proteins Table

- id: UUID (Primary Key)
- hsn_id: String (Human S-Nitrosylation ID)
- protein_name: String
- gene_name: String
- uniprot_id: String
- alphafold_id: String
- protein_length: Integer
- positions_of_nitrosylation: String
- total_sites: Integer
- cancer_causing: Boolean
- cancer_types: String Array
- created_at: Timestamp
- updated_at: Timestamp

Cancer Mutations Table (New!)

- id: UUID (Primary Key)
- protein_id: UUID (Foreign Key to Proteins Table)
- mutation_type: String
- position: Integer
- amino_acid_change: String
- cancer_type: String
- evidence_level: String
- created_at: Timestamp
- updated_at: Timestamp

🚀 Deployment

Production Build

bun run build

Environment Variables

Create a .env.local file with:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

🤝 Contributing

We welcome contributions from the research community!

  1. Fork the repository
  2. Create a feature branch 
    git checkout -b feature/amazing-feature
  3. Commit your changes 
    git commit -m 'Add amazing feature'
  4. Push to the branch 
    git push origin feature/amazing-feature
  5. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices
  • Use Tailwind CSS for styling
  • Write meaningful commit messages
  • Test your changes thoroughly
  • Update documentation as needed

📋 Roadmap

  • Advanced Analytics Dashboard
  • Machine Learning Predictions
  • API Documentation & Public API
  • Mobile App Version
  • Integration with PDB Database
  • Real-time Collaboration Features
  • Enhanced Visualization Tools

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Development Team

Built with ❤️ for the scientific research community.

📞 Support & Contact

🧬 Advancing S-nitrosylation research through innovative technology 🧬

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

  • Navigate to the desired file(s).
  • Click the "Edit" button (pencil icon) at the top right of the file view.
  • Make your changes and commit the changes.

Use GitHub Codespaces

  • Navigate to the main page of your repository.
  • Click on the "Code" button (green button) near the top right.
  • Select the "Codespaces" tab.
  • Click on "New codespace" to launch a new Codespace environment.
  • Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

  • Vite
  • TypeScript
  • React
  • shadcn-ui
  • Tailwind CSS