Updated: February 11, 2025

Directory Structure

This is the main directory structure of the PowerSport Share application. Each directory will have their own respective documentation and examples later.

POWERSPORT-SHARE-CURRENT/
├── assets/              # Global assets (CSS, images, etc.)
│   └── css
├── components/          # Vue components organized by feature and type
│   ├── feature/         # Feature-specific components
│   │   ├── message
│   │   └── search
│   ├── layout/         # Layout components
│   │   ├── auth
│   │   ├── manage
│   │   └── premanage
│   ├── page/           # Page-specific components
│   │   ├── dashboard/
│   │   │   ├── bookings
│   │   │   ├── listings
│   │   │   ├── messages
│   │   │   ├── payout
│   │   │   └── settings
│   │   ├── landing
│   │   ├── listing/
│   │   │   ├── manage
│   │   │   └── public
│   │   ├── login
│   │   ├── register
│   │   └── search
│   └── ui/             # Reusable UI components
│       ├── development
│       └── modal
├── composables         # Composable functions
├── layouts            # Layout templates
├── middleware         # Route middleware
├── pages/             # Application routes
│   ├── dashboard
│   ├── legal
│   ├── listings/
│   │   ├── [id]
│   │   └── manage/
│   │       └── [id]
│   ├── support
│   └── test
├── public/            # Static files
│   └── fonts
├── server/            # Server-side code and API routes
│   └── api/
│       ├── images
│       ├── storage/
│       │   └── upload
│       ├── stripe/
│       │   ├── connect
│       │   ├── customer
│       │   ├── financial
│       │   ├── identity
│       │   ├── payment
│       │   └── webhook
│       └── supabase/
│           └── auth/
│               └── mfa
├── services          # External service integrations
├── stores           # State management
└── types           # TypeScript type definitions
.env
.gitignore
app.config.ts
app.vue
nuxt.config.ts
package-lock.json
package.json
README.md
tailwind.config.js
tsconfig.json

Each directory serves a specific purpose in the application:

  • components/: Contains all Vue components, organized by feature, layout, and page-specific components
  • pages/: Contains the application routes following Nuxt's file-based routing
  • server/: Houses server-side logic and API endpoints, including integrations with Stripe and Supabase
  • services/: Contains external service integrations and API clients
  • stores/: Manages application state (Pinia)
  • types/: Contains TypeScript type definitions and interfaces (Supabase tables)