Skip to content

Latest commit

 

History

History
131 lines (98 loc) · 3.6 KB

README.md

File metadata and controls

131 lines (98 loc) · 3.6 KB
Raw

Next.js Trading Platform Template

A modern web application template demonstrating frontend development fundamentals using Next.js 14, TypeScript, and Supabase authentication. This project serves as an educational resource for developers learning to build full-stack web applications with a focus on trading platform interfaces.

Quick Links

  • For detailed setup instructions, refer to my-app/README.md
  • For development methodology and architectural decisions, see the docs/ folder

Development Philosophy

This project follows a structured development approach influenced by modern AI-assisted development practices:

1. Research Phase (Using ChatGPT O1 Preview)

Inspired by CJ Vinay's AI Development Workflow, our research phase involves:

  • Define core functionality: "I want to build a software that does x,y,z"
  • Generate Project Requirements Document (PRD)
  • Create dashboard and page layouts
  • Document functionality specifications
  • Develop application flow documentation

2. Design Phase (Using V0 by Vercel)

Following the workflow:

  • Create new project structure
  • Upload PRD, page layouts, and app flow docs
  • Implement dashboard page design
  • Code and save all page components
  • Iterate on UI/UX elements

3. Structure Phase

  • Engage Claude for:
    • Project structure organization
    • Folder hierarchy setup
    • Documentation integration
    • Architecture planning

4. Implementation Phase

  • Iterative development focusing on:
    • Strategy management implementation
    • Performance monitoring systems
    • User authentication flows
    • API integration
    • Manual code refinement and testing

Core Technologies

  • Framework: Next.js 14
  • Language: TypeScript
  • Authentication: Supabase
  • Styling: Tailwind CSS, shadcn/ui
  • Development: Docker
  • State Management: React Hooks

Project Structure

IBKR_auto_proto/
├── my-app/           # Next.js web application
├── docs/            # Project documentation and examples
└── README.md        # This file

Core Features

  • 🔒 Authentication System

    • Protected routes
    • Session management
    • Supabase integration

  • 📊 Trading Interface

    • Strategy management dashboard
    • Performance monitoring
    • Basic trade tracking

  • 🎨 Modern UI/UX

    • Responsive design
    • Accessible components
    • Interactive dashboards

Quick Start

  1. Clone the repository:
git clone https://github.com/NG-sama/IBKR_auto_proto.git
  1. Navigate to the application directory:
cd my-app
  1. Follow the detailed setup instructions in my-app/README.md

Learning Path

This template demonstrates several key patterns:

  • Next.js 14 app router implementation
  • TypeScript integration in React
  • Authentication flow with Supabase
  • Protected route patterns
  • React component organization
  • State management with hooks
  • Modern UI development practices

Documentation

The docs/ directory contains:

  • Development methodology
  • System architecture
  • Implementation guides
  • Design decisions
  • Learning resources

Contributing

Contributions that improve the educational value of this template are welcome. Please submit pull requests with clear descriptions.

License

MIT License - See LICENSE file for details

Support

For development support:

  1. Check the documentation in the docs folder
  2. Review the setup guide in my-app/README.md
  3. Create an issue in the repository

⭐ Star this repository if you find it helpful!