A professional-grade, full-stack gold trading Single-Page Application (SPA) built with React 18+ that allows users to monitor real-time market prices, execute trades, and manage their gold portfolio.
- User registration with comprehensive validation
- Secure login/logout functionality
- Protected routes with session management
- 30-minute session timeout
- Live gold prices from Metals.live API (free, no API key required)
- Automatic fallback to simulated data if API unavailable
- Price tracking for 24K, 22K, and 18K gold
- Interactive price history charts (7D, 30D, 90D views)
- Real-time price updates every 5 seconds
- Price change indicators with percentage
- Buy gold with real-time price calculations
- Sell gold from your holdings
- Automatic fee and tax calculations:
- 2% processing fee
- 3% GST
- Transaction confirmation modals
- Instant notifications for successful trades
- Real-time portfolio value tracking
- Holdings breakdown by purity
- Profit/Loss calculations with percentages
- Average buy price tracking
- Dynamic value updates as market prices change
- Complete transaction log
- Filter by type (Buy/Sell/All)
- Sort by date (newest/oldest)
- Detailed transaction breakdown
- Export-ready data structure
- Professional design with deep blue and gold color scheme
- Fully responsive (Mobile, Tablet, Desktop)
- Smooth animations and transitions
- Loading states and error handling
- Toast notifications
- Accessibility compliant (WCAG AA)
- Node.js 16+ and npm
- Modern web browser (Chrome, Firefox, Safari, Edge)
-
Clone the repository
git clone https://github.com/yourusername/gold-trading-platform.git cd gold-trading-platform -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
The platform uses Metals.live API for real-time gold prices:
- ✅ Free tier - No API key required
- ✅ Real-time data - Updates every 5 seconds
- ✅ Automatic fallback - Uses simulated data if API unavailable
- ✅ USD to INR conversion - Automatic currency conversion
For more features, you can add API keys for additional providers:
-
Create a
.envfile in the root directory:VITE_GOLDAPI_KEY=your_goldapi_key_here
-
Sign up for free API keys:
- GoldAPI.io - 100 requests/month free
- Metals-API.com - 60-second updates
gold-trading-platform/
├── src/
│ ├── components/
│ │ ├── auth/ # Authentication components
│ │ ├── dashboard/ # Dashboard components
│ │ ├── market/ # Market data components
│ │ ├── portfolio/ # Portfolio components
│ │ ├── transactions/ # Transaction components
│ │ └── ui/ # Reusable UI components
│ ├── contexts/
│ │ ├── AuthContext.jsx # Authentication state
│ │ ├── MarketContext.jsx # Market data state
│ │ └── PortfolioContext.jsx # Portfolio state
│ ├── hooks/
│ │ ├── useLocalStorage.js
│ │ ├── useNotification.js
│ │ └── useTransactionCalculation.js
│ ├── pages/
│ │ ├── LoginPage.jsx
│ │ ├── RegisterPage.jsx
│ │ ├── DashboardPage.jsx
│ │ ├── PortfolioPage.jsx
│ │ └── HistoryPage.jsx
│ ├── utils/
│ │ ├── validation.js # Input validation
│ │ ├── formatting.js # Data formatting
│ │ ├── marketData.js # Market data logic
│ │ └── goldPriceAPI.js # API integration
│ ├── styles/
│ │ └── variables.css # CSS variables
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── public/
├── package.json
└── vite.config.js
- Frontend Framework: React 18+
- Build Tool: Vite 5.0
- Routing: React Router DOM 6+
- Charts: Recharts
- Date Handling: date-fns
- State Management: Context API + Custom Hooks
- Styling: CSS Modules + CSS Variables
- Data Persistence: LocalStorage
- API Integration: Metals.live API (free)
- Email validation with regex patterns
- Password strength requirements (8+ chars, uppercase, lowercase, number)
- Input sanitization to prevent XSS attacks
- Session management with automatic timeout
- Real-time price fetching from Metals.live API
- Automatic USD to INR conversion (1 USD ≈ ₹83)
- Price calculation for different purities:
- 24K: 99.9% pure gold
- 22K: 91.6% pure gold (24K × 0.916)
- 18K: 75% pure gold (24K × 0.75)
- 90-day price history with interactive charts
- Real-time cost calculations
- Fee structure:
- Subtotal = Quantity × Current Price
- Processing Fee = 2% of subtotal
- GST = 3% of (subtotal + fee) for buy, (subtotal - fee) for sell
- Average buy price tracking for profit/loss calculations
- Current Value = Quantity × Current Market Price
- Invested Value = Quantity × Average Buy Price
- Profit/Loss = Current Value - Invested Value
- Profit/Loss % = (Profit/Loss / Invested Value) × 100
- Mobile (320px+): Single column layout, stacked components
- Tablet (768px+): Two-column grid, collapsible sidebar
- Desktop (1024px+): Multi-column layout, full navigation
- WCAG AA compliant (4.5:1 color contrast)
- Semantic HTML5 elements
- ARIA labels and roles
- Keyboard navigation support
- Screen reader compatible
- Focus indicators on all interactive elements
- Input sanitization (XSS prevention)
- Client-side validation
- Session timeout (30 minutes)
- No sensitive data in LocalStorage
- Secure password requirements
Note: This is a demo application. For production deployment:
- Implement backend authentication (JWT tokens)
- Use a database for data persistence
- Add server-side validation
- Implement HTTPS
- Add CSRF protection
- Use environment variables for API keys
npm run buildThe optimized build will be in the dist/ directory.
The application includes:
- Form validation testing
- Transaction calculation verification
- Portfolio value calculations
- Responsive layout testing
- LocalStorage persistence testing
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
- Gold price data from Metals.live
- Icons and design inspiration from modern fintech applications
- Built with ❤️ using React and Vite
For issues or questions, please open an issue on GitHub.
Made with 💛 for gold traders and investors