Scuba Diving App 🤿

A React-based web application for scuba divers to track their dives, manage equipment, and explore dive sites.

Features

• Dashboard: Overview of your diving statistics and recent dives
• Dive Log: Complete history of all your logged dives
• Add Dive: Log new dives with details like depth, duration, temperature, visibility, and marine life observed
• Dive Sites: Explore popular diving destinations
• Equipment: Track and manage your diving gear with service reminders
• Profile: View your diver profile and certifications

Tech Stack

• React 18
• TypeScript
• Vite
• React Router DOM

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn

Installation

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Docker

Build and Run with Docker Compose

docker compose up --build

The app will be available at http://localhost:8080

Build Docker Image Manually

docker build -t scuba-diving-app .
docker run -p 8080:80 scuba-diving-app

Stop the Container

docker compose down

Project Structure

src/
├── components/
│   └── Layout.tsx      # Main layout with sidebar navigation
├── pages/
│   ├── Dashboard.tsx   # Home dashboard with stats
│   ├── DiveLog.tsx     # Dive history list
│   ├── AddDive.tsx     # Form to log new dives
│   ├── DiveSites.tsx   # Dive site directory
│   ├── Equipment.tsx   # Equipment management
│   └── Profile.tsx     # User profile & certifications
├── App.tsx             # Main app with routing
├── App.css             # Application styles
├── main.tsx            # Application entry point
└── index.css           # Global styles

Future Enhancements

• Backend integration for data persistence
• Map integration for dive sites
• Photo/video upload for dives
• Dive planning calculator
• Social features (buddy system, dive groups)
• Export dive log to PDF
• Mobile app version