add project structure
This commit is contained in:
157
PROJECT_STRUCTURE.md
Normal file
157
PROJECT_STRUCTURE.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# Deckerr
|
||||
|
||||
A modern Magic: The Gathering deck builder and collection manager built with React, TypeScript, and Supabase.
|
||||
|
||||
## Overview
|
||||
|
||||
Deckerr is a web application that allows Magic: The Gathering players to build and manage their decks, track their card collections, search for cards, and use a life counter during games. The application provides a clean, animated interface with user authentication and persistent storage.
|
||||
|
||||
## Features
|
||||
|
||||
- **Deck Management**: Create, edit, and organize your Magic: The Gathering decks
|
||||
- **Collection Tracking**: Keep track of your card collection with quantity management
|
||||
- **Card Search**: Search and browse Magic cards to add to your decks or collection
|
||||
- **Life Counter**: Track player life totals during games
|
||||
- **User Profiles**: Personalized user profiles with theme customization
|
||||
- **Authentication**: Secure user authentication powered by Supabase
|
||||
- **Format Support**: Support for different Magic formats (Commander, Standard, etc.)
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Frontend**: React 18 with TypeScript
|
||||
- **Build Tool**: Vite
|
||||
- **Styling**: Tailwind CSS with custom animations
|
||||
- **Backend/Database**: Supabase (PostgreSQL)
|
||||
- **Authentication**: Supabase Auth
|
||||
- **Icons**: Lucide React
|
||||
- **Linting**: ESLint with TypeScript support
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
deckerr/
|
||||
├── src/
|
||||
│ ├── components/ # React components
|
||||
│ │ ├── CardCarousel.tsx # Card carousel display
|
||||
│ │ ├── CardSearch.tsx # Card search interface
|
||||
│ │ ├── Collection.tsx # Collection management
|
||||
│ │ ├── DeckBuilder.tsx # Deck building interface
|
||||
│ │ ├── DeckCard.tsx # Deck card component
|
||||
│ │ ├── DeckEditor.tsx # Deck editing interface
|
||||
│ │ ├── DeckList.tsx # List of user decks
|
||||
│ │ ├── DeckManager.tsx # Deck management
|
||||
│ │ ├── LifeCounter.tsx # Game life counter
|
||||
│ │ ├── LoginForm.tsx # User authentication form
|
||||
│ │ ├── MagicCard.tsx # Magic card display component
|
||||
│ │ ├── ManaIcons.tsx # Mana symbol icons
|
||||
│ │ ├── Navigation.tsx # App navigation
|
||||
│ │ └── Profile.tsx # User profile page
|
||||
│ │
|
||||
│ ├── contexts/ # React contexts
|
||||
│ │ └── AuthContext.tsx # Authentication context
|
||||
│ │
|
||||
│ ├── lib/ # Library code
|
||||
│ │ ├── Entities.ts # Supabase database types
|
||||
│ │ └── supabase.ts # Supabase client configuration
|
||||
│ │
|
||||
│ ├── services/ # API and service layers
|
||||
│ │ └── api.ts # API service functions
|
||||
│ │
|
||||
│ ├── types/ # TypeScript type definitions
|
||||
│ │ └── index.ts # Shared types
|
||||
│ │
|
||||
│ ├── utils/ # Utility functions
|
||||
│ │ ├── deckValidation.ts # Deck validation logic
|
||||
│ │ └── theme.ts # Theme utilities
|
||||
│ │
|
||||
│ ├── App.tsx # Main application component
|
||||
│ ├── main.tsx # Application entry point
|
||||
│ ├── main.js # JavaScript entry
|
||||
│ ├── index.css # Global styles
|
||||
│ └── vite-env.d.ts # Vite type definitions
|
||||
│
|
||||
├── public/ # Static assets (if any)
|
||||
│
|
||||
├── index.html # HTML entry point
|
||||
├── package.json # Project dependencies
|
||||
├── vite.config.ts # Vite configuration
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
├── tsconfig.app.json # App-specific TS config
|
||||
├── tsconfig.node.json # Node-specific TS config
|
||||
├── tailwind.config.js # Tailwind CSS configuration
|
||||
├── postcss.config.js # PostCSS configuration
|
||||
├── eslint.config.js # ESLint configuration
|
||||
├── LICENSE # Project license
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Database Schema
|
||||
|
||||
The application uses Supabase with the following main tables:
|
||||
|
||||
- **profiles**: User profiles with username and theme preferences
|
||||
- **decks**: User decks with name, format, and timestamps
|
||||
- **deck_cards**: Cards in decks with quantity and commander status
|
||||
- **collections**: User card collections with quantities
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v18 or higher)
|
||||
- npm or pnpm
|
||||
- Supabase account and project
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd deckerr
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
# or
|
||||
pnpm install
|
||||
```
|
||||
|
||||
3. Set up environment variables:
|
||||
Create a `.env` file with your Supabase credentials:
|
||||
```
|
||||
VITE_SUPABASE_URL=your_supabase_url
|
||||
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
|
||||
```
|
||||
|
||||
4. Run the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
5. Open your browser 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
|
||||
|
||||
## Features in Detail
|
||||
|
||||
### Deck Builder
|
||||
Build and customize your Magic decks with support for different formats. The deck editor validates your deck composition according to format rules.
|
||||
|
||||
### Collection Manager
|
||||
Track which cards you own and their quantities, making it easy to see what cards you have available when building decks.
|
||||
|
||||
### Card Search
|
||||
Search through Magic cards using various filters and criteria to find exactly what you need for your deck.
|
||||
|
||||
### Life Counter
|
||||
A built-in life counter for tracking player life totals during games, with an animated interface.
|
||||
|
||||
## License
|
||||
|
||||
See the LICENSE file for details.
|
||||
Reference in New Issue
Block a user