An interactive React-based educational app that helps users explore and identify common rock types. Designed for amateur geologists, hikers, students, and curious minds, this app makes geology accessible, engaging, and fun.

The Rock App empowers users to explore and identify rocks through an intuitive, visually engaging interface. Designed with accessibility and scientific clarity in mind, it blends interactive filtering, search functionality, and personalized collection tools to foster curiosity about geology and natural history.

• 🔍 Search & Filter
  Browse rocks by name, type (igneous, sedimentary, metamorphic), texture, color, and origin using an intuitive interface.
• 🪨 Rock Gallery
  Explore a dynamic collection of rock cards with detailed info and fun facts. Click any card to open a modal with deeper insights.
• 📘 Rock Detail Modal
  View high-resolution images, geological context, and identification tips—all without leaving the gallery.
• ➕ Collection Manager
  Save, tag, and annotate rocks in your personal collection. Perfect for field notes or study references.
• 🧠 Quiz Mode
  Test your knowledge with a “Rock Quiz” game. Great for learners and enthusiasts alike.
• 🧭 Modular Navigation
  Clean routing between Home, Explore, Collection, Quiz, and Settings—wrapped in a consistent layout.
• 💾 Local Storage (coming soon)
  Persist your collection across sessions for offline use and long-term tracking.
• 🎨 Responsive Design (coming soon)
  Optimized layout and interactions for both desktop and mobile devices.

• React (with Hooks)
• JavaScript (ES6+)
• CSS (global stylesheet)
• React Router
• JSON (rock and quiz data source)
• Local Storage API

src/
├── app/
│   └── assets/
│       └── img/
├── components/
│   ├── CollectionManager.js
│   ├── FilterPanel.js
│   ├── Footer.js
│   ├── Header.js
│   ├── RockCard.js
│   ├── RockDetailModal.js
│   └── SearchBar.js
├── data/
│   ├── quiz.json
│   └── rocks.json
├── pages/
│   ├── Quiz.js
│   ├── RockCollection.js
│   └── RockGallery.js
├── App.js
└── index.js

• USGS Rock Identification Basics
• Geology.com Rock Gallery
• Mindat.org
• Minerals Education Coalition
• Rock Scanner

git clone https://github.com/Do0ky/RockApp.git
npm install
npm start

• 📚 Learn Page (glossary terms and visual guides to understand geology fundamentals and rock classification)
• 📊 Fetch more data from an API
• 📸 Image upload for rock identification
• 🗺️ Map integration to show rock locations
• 🧑‍🤝‍🧑 User submissions and community features

Co-created by:

• Claire Peyre
• Aaron Escobar