Frontend Architecture

Frontend

• Vite 5 - Lightning-fast build tool and HMR dev server

• React 18 - Modern UI framework with hooks and concurrent features

• Tailwind CSS 3 - Utility-first CSS framework for rapid UI development

• Lucide React - Comprehensive icon library

• NEAR Wallet Selector 8 - Multi-wallet integration (MyNearWallet, Meteor)

• React Markdown - Markdown rendering for AI responses

• Sonner - Toast notifications

• AOS - Scroll animations

├── src/
│   ├── components/
│   │   ├── ExampleDetail.jsx      # Main example view with editor & panels
│   │   ├── CodeEditor.jsx         # Code editing interface
│   │   ├── InfoPanel.jsx          # Explanation, AI, and testing tabs
│   │   ├── AITab.jsx              # Gemini AI integration
│   │   ├── ConsolePanel.jsx       # Compilation/deployment output
│   │   ├── ExamplesBrowser.jsx    # Main examples interface
│   │   ├── CategorySidebar.jsx    # Category navigation
│   │   ├── SearchBar.jsx          # Example search
│   │   ├── FiltersPanel.jsx      # Difficulty/category filters
│   │   └── ...                    # Other UI components
│   ├── near/
│   │   └── near.js                # Wallet selector & NEAR utilities
│   ├── data/
│   │   ├── examples.js            # Example metadata
│   │   ├── exampleCode/           # Contract code for each example
│   │   └── constants.js           # Category icons, colors, etc.
│   ├── App.jsx                    # Main app component & routing
│   └── main.jsx                   # React entry point
├── public/                         # Static assets
├── index.html                     # HTML template
├── vite.config.js                 # Vite configuration
└── package.json                    # Dependencies and scripts

https://github.com/Learn-Near-AI/near-frontend

The frontend is built with React 18 and Vite, providing a fast development experience and optimized production builds. The application uses a component-based architecture where the main App.jsx component manages routing between the landing page and the examples browser. The examples browser (ExamplesBrowser.jsx) serves as the central hub, managing state for selected examples, search queries, filters, and category navigation.

When a user selects an example, the ExampleDetail component renders a comprehensive interface split into three main sections: the code editor, the information panel, and the console output. The code editor (CodeEditor.jsx) provides a syntax-aware textarea where users can modify contract code, switch between Rust and JavaScript implementations, and trigger compilation or deployment actions. The editor maintains separate code state for each language, ensuring that switching languages preserves the user's edits.

The information panel (InfoPanel.jsx) contains three tabs: Explanation, AI Assistant, and Function Testing. The Explanation tab displays static documentation about the example, while the AI tab (AITab.jsx) integrates with Google's Gemini AI to provide interactive code explanations. The Function Testing tab becomes available after a contract is successfully deployed, allowing users to call view and change methods on their deployed contracts.