https://github.com/scs805/gene-snap
🧬 GeneSnap is an interactive, educational React application designed to help users explore genetic information 🧬 through fun visualizations 🎨 and games 🎮. Users can learn about their genetic makeup 🧬🧑🔬, inheritance patterns 🔄, and how certain traits are passed down through generations 🔬. With a focus on visualizing DNA sequences.
https://github.com/scs805/gene-snap
genetics node react tailwindcss
Last synced: 8 months ago
JSON representation
🧬 GeneSnap is an interactive, educational React application designed to help users explore genetic information 🧬 through fun visualizations 🎨 and games 🎮. Users can learn about their genetic makeup 🧬🧑🔬, inheritance patterns 🔄, and how certain traits are passed down through generations 🔬. With a focus on visualizing DNA sequences.
- Host: GitHub
- URL: https://github.com/scs805/gene-snap
- Owner: scs805
- Created: 2025-01-25T18:57:11.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-25T21:10:56.000Z (9 months ago)
- Last Synced: 2025-01-25T22:39:24.759Z (9 months ago)
- Topics: genetics, node, react, tailwindcss
- Language: JavaScript
- Homepage: https://genesnap.vercel.app
- Size: 19.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GeneSnap 🌱🧬
**GeneSnap** is an interactive, educational React application designed to help users explore genetic information 🧬 through fun visualizations 🎨 and games 🎮. Users can learn about their genetic makeup 🧬🧑🔬, inheritance patterns 🔄, and how certain traits are passed down through generations 🔬. With a focus on visualizing DNA sequences 🧬 and chromosome structures 🧬🔍, **GeneSnap** aims to make genetics engaging and approachable for students 📚, hobbyists 🎨, and anyone curious about the science of heredity 🌱.
## Features ✨
- **Interactive DNA Visualizations**: Visualize DNA sequences and chromosomes to understand genetic information.
- **Educational Games**: Fun, interactive games that teach inheritance patterns and genetic traits.
- **Explore Your Genetic Makeup**: Learn about traits passed down through generations in an interactive way.
- **User-Friendly Design**: Easy-to-navigate UI with smooth interactions, powered by Tailwind CSS for modern and responsive styling
## Tech Stack 🛠️
# GeneSnap
**GeneSnap** is an interactive, educational React application designed to help users explore genetic information through fun visualizations and games. Users can learn about their genetic makeup, inheritance patterns, and how certain traits are passed down through generations. With a focus on visualizing DNA sequences and chromosome structures, **GeneSnap** aims to make genetics engaging and approachable for students, hobbyists, and anyone curious about the science of heredity.
## Key Features:
- **DNA Sequence Visualizer**: Users can input a DNA sequence and visualize it with color-coded base pairs.
- **Trait Inheritance Simulator**: Simulate Mendelian inheritance patterns and see how traits are passed through generations.
- **Gene Encyclopedia**: A library of commonly studied genes and their associated traits, along with detailed explanations.
- **Interactive Games**: Fun, interactive challenges to test your knowledge of genetics, such as guessing the genotypes of offspring based on parents’ traits.
- **Genetic Crosses Tool**: A visual tool for performing Punnett square calculations and determining possible offspring outcomes.
- **Educational Content**: Learn about genetics, genetic disorders, and gene therapy through easy-to-understand explanations and images.
## Tech Stack:
- **React**: For building the user interface.
- **D3.js**: For rendering dynamic, interactive charts and genetic visualizations.
- - **Redux**: For managing global state and user interactions.
- **React Router**: For handling routing between different pages.
- **Tailwind CSS**: A utility-first CSS framework for fast and customizable UI design.
- **Vite**: For fast development and bundling.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/genesnap.git
cd genesnap
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm start
```
4. Open your browser and navigate to `http://localhost:3000` to start exploring genetics with **GeneSnap**!
## Screenshots:
- **DNA Sequence Visualizer**: Visualize your DNA sequences with interactive base pairs.
- **Punnett Square**: Easily simulate genetic crosses and explore inheritance patterns.
## Contribution:
Contributions to improve **GeneSnap** are welcome! Whether you want to add a new genetic trait, improve the visualizations, or contribute to the educational content, feel free to submit a pull request or open an issue.
## License:
This project is open-sourced under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact:
- **Project Maintainer**: [Your Name]
- **Email**: [Your Email]
- **Project Repository**: [https://github.com/yourusername/genesnap](https://github.com/yourusername/genesnap)
# GeneSnap 🌱🧬
**GeneSnap** is an interactive, educational React application designed to help users explore genetic information 🧬 through fun visualizations 🎨 and games 🎮. Users can learn about their genetic makeup 🧬🧑🔬, inheritance patterns 🔄, and how certain traits are passed down through generations 🔬. With a focus on visualizing DNA sequences 🧬 and chromosome structures 🧬🔍, **GeneSnap** aims to make genetics engaging and approachable for students 📚, hobbyists 🎨, and anyone curious about the science of heredity 🌱.
## Features ✨
- **Interactive DNA Visualizations**: Visualize DNA sequences and chromosomes to understand genetic information.
- **Educational Games**: Fun, interactive games that teach inheritance patterns and genetic traits.
- **Explore Your Genetic Makeup**: Learn about traits passed down through generations in an interactive way.
- **User-Friendly Design**: Easy-to-navigate UI with smooth interactions, powered by Tailwind CSS for modern and responsive styling.
## Tech Stack 🛠️
# GeneSnap
**GeneSnap** is an interactive, educational React application designed to help users explore genetic information through fun visualizations and games. Users can learn about their genetic makeup, inheritance patterns, and how certain traits are passed down through generations. With a focus on visualizing DNA sequences and chromosome structures, **GeneSnap** aims to make genetics engaging and approachable for students, hobbyists, and anyone curious about the science of heredity.
## Key Features:
- **DNA Sequence Visualizer**: Users can input a DNA sequence and visualize it with color-coded base pairs.
- **Trait Inheritance Simulator**: Simulate Mendelian inheritance patterns and see how traits are passed through generations.
- **Gene Encyclopedia**: A library of commonly studied genes and their associated traits, along with detailed explanations.
- **Interactive Games**: Fun, interactive challenges to test your knowledge of genetics, such as guessing the genotypes of offspring based on parents’ traits.
- **Genetic Crosses Tool**: A visual tool for performing Punnett square calculations and determining possible offspring outcomes.
- **Educational Content**: Learn about genetics, genetic disorders, and gene therapy through easy-to-understand explanations and images.
## Tech Stack:
- **React**: For building the user interface.
- **D3.js**: For rendering dynamic, interactive charts and genetic visualizations.
- - **Redux**: For managing global state and user interactions.
- **React Router**: For handling routing between different pages.
- **Tailwind CSS**: A utility-first CSS framework for fast and customizable UI design.
- **Vite**: For fast development and bundling.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/genesnap.git
cd genesnap
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm start
```
4. Open your browser and navigate to `http://localhost:3000` to start exploring genetics with **GeneSnap**!
## Directory Structure
```
genesnap/
├── public/ # Public assets served by the app
│ ├── index.html # Root HTML file
│ ├── favicon.ico # App favicon
│ └── assets/ # Public static assets
│ ├── images/ # Images like logos, icons, etc.
│ └── fonts/ # Custom fonts
├── src/ # Main source code for the app
│ ├── components/ # Reusable React components
│ │ ├── DNAVisualizer.js # Component to visualize DNA sequences
│ │ ├── TraitSimulator.js # Component for inheritance patterns simulator
│ │ ├── GeneEncyclopedia.js # Component for displaying genes and traits info
│ │ ├── PunnettSquare.js # Component for performing Punnett square calculations
│ │ ├── EducationalContent.js # Component for displaying educational content
│ │ └── Navbar.js # Navbar component
│ ├── pages/ # Page-level components
│ │ ├── HomePage.js # Main landing page
│ │ ├── AboutPage.js # About page for the project
│ │ ├── GamePage.js # Page for interactive games
│ │ └── GeneLibraryPage.js # Gene library page
│ ├── store/ # Redux store for global state management
│ │ ├── actions.js # Redux actions
│ │ ├── reducers.js # Redux reducers
│ │ └── store.js # Redux store configuration
│ ├── utils/ # Utility functions
│ │ ├── colorUtils.js # Helper functions for color gradients
│ │ └── geneticUtils.js # Functions for genetic calculations
│ ├── App.js # Root component of the application
│ ├── index.js # Entry point to render the app
│ ├── router.js # React Router configuration for page routing
│ ├── styles/ # Global and component-specific styles
│ │ ├── global.css # Global styles for the app
│ │ └── tailwind.css # Tailwind CSS customizations
│ ├── .env # Environment variables (e.g., API keys)
│ └── .gitignore # Git ignore file
├── tests/ # Unit and integration tests
│ ├── components/ # Component tests
│ │ ├── DNAVisualizer.test.js # Tests for DNA visualizer
│ │ ├── TraitSimulator.test.js # Tests for trait simulator
│ │ └── PunnettSquare.test.js # Tests for Punnett square
│ ├── pages/ # Page tests
│ └── utils/ # Utility function tests
├── tailwind.config.js # Tailwind CSS configuration
├── package.json # Project dependencies and scripts
├── vite.config.js # Vite configuration for bundling
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation
```
## Screenshots:
- **DNA Sequence Visualizer**: Visualize your DNA sequences with interactive base pairs.
- **Punnett Square**: Easily simulate genetic crosses and explore inheritance patterns.
## Contribution:
Contributions to improve **GeneSnap** are welcome! Whether you want to add a new genetic trait, improve the visualizations, or contribute to the educational content, feel free to submit a pull request or open an issue.
## License:
This project is open-sourced under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact:
- **Project Maintainer**: [Your Name]
- **Email**: [Your Email]
- **Project Repository**: [https://github.com/yourusername/genesnap](https://github.com/yourusername/genesnap)