A comprehensive, feature-rich trading journal application built with Next.js, TypeScript, and Tailwind CSS. Track, analyze, and improve your trading performance with advanced analytics, risk management tools, and detailed reporting.
Visit: Trading Journal Dashboard
- Trade Entry & Management: Add, edit, and delete trades with comprehensive details
- Risk Management: Calculate ideal stop losses, risk amounts, and position sizing
- Expected R Analysis: Track performance using R-multiples and expected value
- Real-time Calculations: Automatic P&L, fee, and risk metric calculations
- Trade Grading System: Grade trades from A++++ to F for performance tracking
- Performance Dashboard: Win rate, P&L, Sharpe ratio, and drawdown analysis
- System Performance: Compare different trading systems and strategies
- Session Analysis: Track performance across different trading sessions
- Day-of-Week Analysis: Identify your best and worst trading days
- Fee Impact Analysis: Monitor how fees affect your profitability
- Risk Deviation Tracking: Identify over-risked and under-risked positions
- CSV Import: Import trades from broker statements with automatic parsing
- JSON Export/Import: Full data backup and restore functionality
- Bulk Operations: Update multiple trades simultaneously
- Advanced Filtering: Filter trades by system, timeframe, grade, session, and more
- Duplicate Detection: Prevent duplicate trade entries based on ticket numbers
- Trading Systems: Configure your own trading strategies and systems
- Asset Fees: Set custom fee structures for different assets
- Trading Sessions: Define custom trading sessions with time zones
- Risk Settings: Configure risk tolerance and ideal risk amounts per system
- Account Balance Tracking: Track balance changes and adjustments
- Node.js 18+
- npm or yarn package manager
- Clone the repository
git clone https://github.com/...
cd trading-journal- Install dependencies
npm install
# or
yarn install- Run the development server
npm run dev
# or
yarn dev- Open your browser Navigate to http://localhost:3000
-
Click the "Add Trade" button
-
Fill in the basic trade information:
- Date and time
- Asset (BTC, ETH, etc.)
- Trade type (Long/Short)
- Entry, stop loss, and exit prices
- Position size
-
The system automatically calculates:
- Risk amount and percentage
- Expected R-multiple
- P&L and fees
- Risk deviation from ideal
- Go to Import → CSV Import (Broker)
- Set your default ideal risk amount
- Upload your broker's CSV file or paste the data
- Review the preview and click Import
- Exness.com
Supported CSV Format:
symbol,type,opening_time_utc,closing_time_utc,lots,opening_price,closing_price,stop_loss,take_profit,profit_usd,commission_usd,close_reason,ticket
BTCUSD,buy,2024-01-15 10:30:00,2024-01-15 14:45:00,0.1,50000,51000,49500,52000,100,-5,tp,12345
Navigate to the Analytics tab to access:
- Performance Overview: Key metrics and charts
- System Comparison: Compare different trading strategies
- Risk Analysis: Identify patterns in your risk management
- Time-based Analysis: Performance by session and day of week
-
Click Settings to configure:
- Account balance
- Asset fees (per lot)
- Trading systems/strategies
- Risk tolerance settings
- Trading sessions and time zones
-
System-Specific Risk: Set different ideal risk amounts for each trading system
- Measures performance relative to your ideal risk amount
- Formula:
Profit / Ideal Risk Amount - Positive values indicate profitable trades relative to your risk target
- Shows how much your actual risk differs from your ideal risk
- Formula:
((Actual Risk - Ideal Risk) / Ideal Risk) × 100 - Helps identify over-risked and under-risked positions
- Risk-adjusted return measure
- Higher values indicate better risk-adjusted performance
- Calculated using Expected R values
- Largest peak-to-trough decline in your account
- Important for understanding worst-case scenarios
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Charts: Recharts
- Icons: Lucide React
- Data Storage: Browser localStorage (client-side)
├── app/ # Next.js app directory
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── trade-form/ # Trade entry form components
│ └── ... # Feature-specific components
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
└── README.md
- TradeEntryForm: Comprehensive trade input with validation
- TradesList: Sortable, filterable trade table with bulk operations
- AnalyticsDashboard: Performance metrics and visualizations
- AdvancedAnalytics: Deep-dive analysis tools
- ImportDialog: CSV/JSON import functionality
- SettingsPanel: Configuration management
- Ideal Stop Loss Calculation: Automatically calculates optimal stop losses based on your risk settings
- Position Sizing: Ensures consistent risk across all trades
- Risk Status Indicators: Visual alerts for over-risked and under-risked positions
- R-Multiple Analysis: Track performance in risk-adjusted terms
- System Performance: Compare the effectiveness of different trading strategies
- Session Analysis: Identify your most profitable trading times
- Consecutive Win/Loss Tracking: Monitor streaks and psychological patterns
- Broker Integration: Import trades directly from popular broker CSV formats
- Backup & Restore: Full JSON export/import for data portability
- Duplicate Prevention: Automatic detection of duplicate trades by ticket number
- Go to Settings → Trading Systems
- Add your system name
- Set system-specific ideal risk amounts
- Configure system-specific analysis parameters
- Navigate to Settings → Asset Fees
- Add your assets and their respective fees per lot
- Fees are automatically calculated for all trades
- Configure your trading sessions in Settings
- Set start/end times and time zones
- Track performance across different market sessions
- Local Storage: All data is stored locally in your browser
- No Server: No data is sent to external servers
- Export Control: You control all data exports and backups
- Privacy First: Your trading data remains completely private
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Use TypeScript for all new code
- Follow the existing component structure
- Add proper error handling and loading states
- Include JSDoc comments for complex functions
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework for production
- shadcn/ui - Beautiful and accessible UI components
- Tailwind CSS - Utility-first CSS framework
- Recharts - Composable charting library
- Lucide - Beautiful & consistent icon toolkit
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Include screenshots and error messages when applicable
- Mobile app version
- Cloud sync capabilities
- Advanced backtesting tools
- Integration with more brokers
- Machine learning performance predictions
- Social trading features
- Advanced portfolio analytics
- Tax reporting tools
Happy Trading! 📈
Remember: Past performance does not guarantee future results. Always trade responsibly and never risk more than you can afford to lose.