📈 Trading Journal Web Application

A comprehensive swing-trade journaling web application built with vanilla JavaScript and powered by Supabase. Track, analyze, and improve your trading performance with detailed trade logging, performance analytics, reviews, and rule management.

✨ Features

Core Functionality

• User Authentication: Secure login and registration with email/password
• Trade Management: Create, edit, delete, and view all your trades
• Advanced Filtering: Filter trades by date, strategy, market, direction, profit/loss, and rule compliance
• Search: Quick search by symbol or notes
• Live Calculations: Automatic P/L and R-Multiple calculations
• Screenshot Uploads: Document your trades with chart screenshots

Analytics & Performance

• Dashboard KPIs: Total trades, win rate, profit factor, average R, net P/L
• Equity Curve: Visual representation of your trading performance over time
• Recent Trades: Quick access to your latest 5 trades

Reviews & Reflection

• Weekly/Monthly Reviews: Document your trading performance and learnings
• Key Insights: Track top trades, mistakes, learnings, and next focus areas

Rules & Checklists

• Trading Rules: Maintain your personal trading rules
• Pre-Trade Checklist: Items to check before entering a trade
• Post-Trade Checklist: Items to review after closing a trade

Export & Data

• CSV Export: Export your trades to CSV for external analysis
• User Profile: View account information and logout

🛠️ Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6 Modules)
• Backend: Supabase
  • PostgreSQL Database
  • Authentication (Auth)
  • File Storage
  • Row Level Security (RLS)
• No Build Tools: Runs directly in the browser

📁 Project Structure

/
├── index.html              # Login/Register landing page
├── dashboard.html          # Dashboard with KPIs and equity curve
├── trades.html             # Trades list with filters
├── trade-new.html          # Create new trade
├── trade-edit.html         # Edit existing trade
├── reviews.html            # Weekly/Monthly reviews
├── rules.html              # Trading rules and checklists
├── settings.html           # User profile and logout
├── assets/
│   ├── css/
│   │   └── styles.css      # Complete application styling
│   └── js/
│       ├── supabaseClient.js   # Supabase configuration
│       ├── auth.js             # Authentication functions
│       ├── guard.js            # Route protection
│       ├── dashboard.js        # Dashboard logic
│       ├── trades.js           # Trades list logic
│       ├── tradeForm.js        # Trade create/edit logic
│       ├── reviews.js          # Reviews CRUD logic
│       ├── rules.js            # Rules CRUD logic
│       ├── settings.js         # Settings page logic
│       └── utils.js            # Helper functions
├── sql/
│   └── schema.sql          # Database schema and RLS policies
└── README.md               # This file

🚀 Setup Instructions

Step 1: Create Supabase Project

1. Go to supabase.com and create a free account
2. Click "New Project"
3. Fill in your project details:
   • Project Name: trading-journal (or your choice)
   • Database Password: Create a strong password
   • Region: Choose closest to you
4. Click "Create new project" and wait for setup to complete

Step 2: Set Up Database

1. In your Supabase dashboard, go to SQL Editor
2. Open the file /sql/schema.sql from this repository
3. Copy the entire SQL content
4. Paste it into the SQL Editor in Supabase
5. Click "Run" to execute the SQL
6. This will create:
   • trades table with all trade fields
   • reviews table for weekly/monthly reviews
   • rules table for trading rules and checklists
   • Row Level Security (RLS) policies for all tables
   • Indexes for better performance
   • Triggers for automatic timestamp updates

Step 3: Set Up Storage Bucket

1. In your Supabase dashboard, go to Storage
2. Click "Create a new bucket"
3. Configure the bucket:
   • Name: trade-screenshots
   • Public: Uncheck (keep it private)
   • File size limit: 5242880 (5MB)
   • Allowed MIME types: image/jpeg,image/png,image/gif,image/webp
4. Click "Create bucket"

Step 4: Set Up Storage Policies

1. Click on the trade-screenshots bucket
2. Go to "Policies" tab
3. Add the following policies:

Policy 1: Users can upload their own screenshots

• Policy name: Users can upload their own screenshots
• Target roles: authenticated
• Policy command: INSERT
• Policy definition:

  bucket_id = 'trade-screenshots' AND auth.uid()::text = (storage.foldername(name))[1]

Policy 2: Users can view their own screenshots

• Policy name: Users can view their own screenshots
• Target roles: authenticated
• Policy command: SELECT
• Policy definition:

  bucket_id = 'trade-screenshots' AND auth.uid()::text = (storage.foldername(name))[1]

Policy 3: Users can update their own screenshots

• Policy name: Users can update their own screenshots
• Target roles: authenticated
• Policy command: UPDATE
• Policy definition:

  bucket_id = 'trade-screenshots' AND auth.uid()::text = (storage.foldername(name))[1]

Policy 4: Users can delete their own screenshots

• Policy name: Users can delete their own screenshots
• Target roles: authenticated
• Policy command: DELETE
• Policy definition:

  bucket_id = 'trade-screenshots' AND auth.uid()::text = (storage.foldername(name))[1]

Step 5: Get Your Supabase Credentials

1. In your Supabase dashboard, go to Settings → API
2. Copy your credentials:
   • Project URL (looks like: https://xxxxx.supabase.co)
   • anon public key (looks like: eyJhbGc...)

Step 6: Configure the Application

1. Open the file /assets/js/supabaseClient.js in your code editor
2. Replace the placeholder values with your actual credentials:

   const SUPABASE_URL = 'YOUR_SUPABASE_URL';  // Replace with your Project URL
   const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';  // Replace with your anon public key

3. Save the file

Step 7: Run the Application

Since this is a pure HTML/CSS/JS application with no build process, you can run it in several ways:

Option 1: Live Server (VS Code Extension - Recommended)

1. Install the "Live Server" extension in VS Code
2. Right-click on index.html
3. Select "Open with Live Server"
4. The app will open in your default browser at http://127.0.0.1:5500

Option 2: Python HTTP Server

# Python 3
python -m http.server 8000

# Then open http://localhost:8000 in your browser

Option 3: Node.js HTTP Server

# Install http-server globally
npm install -g http-server

# Run in project directory
http-server

# Then open http://localhost:8080 in your browser

Option 4: Any Static Web Server

You can deploy this to any static hosting service:

• Netlify
• Vercel
• GitHub Pages
• Cloudflare Pages

Just deploy the entire project folder and it will work!

📖 Usage Guide

First Time Setup

1. Open the application in your browser
2. Click on the "Register" tab
3. Enter your email and password (minimum 6 characters)
4. Click "Register"
5. Check your email for verification (depending on Supabase settings)
6. Log in with your credentials

Adding Your First Trade

1. After logging in, you'll be on the Dashboard
2. Click "New Trade" or navigate to "Trades" → "New Trade"
3. Fill in the trade details:
   • Required: Symbol, Direction
   • Recommended: Entry/Exit prices, dates, position size, risk amount
   • Optional: Strategy, psychology fields, notes, screenshot
4. Watch the live P/L and R-Multiple calculations update as you type
5. Click "Save Trade"

Filtering and Searching Trades

1. Go to the "Trades" page
2. Use the filter bar to:
   • Search by symbol or notes
   • Filter by date range
   • Filter by strategy, market, direction
   • Filter by profit/loss
   • Filter by rules followed
3. Click "Reset Filters" to clear all filters

Exporting Trades

1. On the "Trades" page, apply any filters you want
2. Click "Export CSV"
3. Your filtered trades will download as a CSV file
4. Open in Excel, Google Sheets, or any spreadsheet software

Creating Reviews

1. Navigate to the "Reviews" page
2. Click "+ New Review"
3. Select review type (Weekly or Monthly)
4. Set the period start and end dates
5. Fill in your insights:
   • Summary of the period
   • Top trades and why they worked
   • Mistakes and lessons learned
   • Key learnings
   • What to focus on next
6. Click "Save Review"

Managing Trading Rules

1. Navigate to the "Rules" page
2. Add rules in three categories:
   • Trading Rules: Your core trading principles
   • Pre-Trade Checklist: What to check before entering
   • Post-Trade Checklist: What to review after exiting
3. Use these as reference when trading and journaling

🔒 Security Features

• Row Level Security (RLS): All database operations are user-scoped
• Authentication Required: All pages except login are protected
• Secure Storage: Screenshots are stored with user-specific paths
• No Direct DB Access: All operations go through Supabase's secure API

🎨 Customization

Changing Colors

Edit /assets/css/styles.css and modify the CSS variables in the :root selector:

:root {
  --primary-color: #2563eb;  /* Main brand color */
  --success-color: #10b981;  /* Profit/success color */
  --danger-color: #ef4444;   /* Loss/danger color */
  /* etc. */
}

Adding Strategy Options

Edit trade-new.html and trade-edit.html, find the strategy <select> element and add your options.

Modifying KPI Calculations

Edit /assets/js/utils.js and modify the calculation functions like calculateWinRate, calculateProfitFactor, etc.

🐛 Troubleshooting

"Cannot read properties of undefined" errors

• Make sure you've replaced the Supabase credentials in supabaseClient.js
• Check that the Supabase CDN is loading (check browser console)

Screenshots not uploading

• Verify the storage bucket is created with the name trade-screenshots
• Check that all 4 storage policies are configured correctly
• Ensure file size is under 5MB

Trades not showing up

• Check browser console for errors
• Verify RLS policies are active on all tables
• Make sure you're logged in with the correct user

Authentication issues

• Clear browser cache and cookies
• Check Supabase Auth settings in dashboard
• Verify email confirmation settings

📝 Database Schema

Trades Table

• Stores all trade information including entry/exit, risk management, psychology, and performance data
• Contains 30+ fields for comprehensive trade journaling

Reviews Table

• Stores weekly and monthly trading reviews
• Includes summary, top trades, mistakes, learnings, and focus areas

Rules Table

• Stores user's trading rules and checklists
• Categorized into: rules, pretrade, posttrade

All tables have:

• User ID foreign key to auth.users
• Created/Updated timestamps
• RLS policies for data isolation

🤝 Contributing

This is a personal trading journal application. Feel free to fork and customize for your own needs!

📄 License

MIT License - Feel free to use and modify as needed.

🙏 Acknowledgments

• Built with Supabase
• Icons: Unicode Emoji
• Inspired by professional trading journals

📞 Support

If you encounter issues:

1. Check the Troubleshooting section above
2. Review Supabase documentation
3. Check browser console for error messages
4. Verify all setup steps were completed

---

Happy Trading! 📊💰

Remember: Consistent journaling leads to consistent improvement. Track every trade, review regularly, and stick to your rules!