Update README.md

README.md

@@ -1,36 +1,139 @@
-# Hyperliquid Stats
+Hyperliquid Stats
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<p align="center">
+A highly performant data visualization and analytics dashboard for the Hyperliquid decentralized perpetuals exchange.
+Track market data, volume distribution, open interest trends, and user performance in real-time.
+</p>
 
-## Getting Started
+✨ Features
 
-First, run the development server:
+Real-time Data: Integration with the Hyperliquid API and WebSocket for live data updates.
+
+Modular Components: Built with React and designed for easy extension and component reuse.
+
+Responsive Design: Optimized layout using Tailwind CSS for all screen sizes.
+
+Type Safety: Developed entirely in TypeScript for robust and predictable data handling.
+
+💻 Tech Stack
+
+Technology
+
+Description
+
+Framework
+
+Next.js (App Router)
+
+Language
+
+TypeScript
+
+Styling
+
+Tailwind CSS
+
+Data Fetching
+
+Custom hooks leveraging Hyperliquid's API
+
+Deployment
+
+Vercel (recommended)
+
+🚀 Getting Started
+
+This guide will walk you through setting up and running the project locally.
+
+Prerequisites
+
+Ensure you have the following installed:
+
+Node.js (v18+)
+
+pnpm (recommended) or npm/yarn
+
+1. Installation
+
+Clone the repository and install dependencies using pnpm:
+
+git clone [https://github.com/your-username/hyperliquid-stats.git](https://github.com/your-username/hyperliquid-stats.git)
+cd hyperliquid-stats
+pnpm install
+
+
+2. Environment Variables
+
+Create a local environment file based on the example. Although Hyperliquid's public API endpoints are generally open, external services (like a specific RPC endpoint or public rate limit key) may be required.
+
+cp .env.example .env.local
+
+
+Populate .env.local (at minimum, ensure the public API URL is correct):
+
+# Hyperliquid API Base URL (Public Endpoint)
+NEXT_PUBLIC_HYPERLIQUID_API_URL="[https://api.hyperliquid.xyz/info](https://api.hyperliquid.xyz/info)"
+
+# Optional: If you use a custom node for secondary data
+# NEXT_PUBLIC_CUSTOM_RPC="[https://some-public-rpc.com](https://some-public-rpc.com)"
+
+
+3. Run Development Server
+
+Start the application in development mode:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
 pnpm dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+Open http://localhost:3000 with your browser to see the result. The page will auto-update as you edit files in the app/ directory.
+
+📂 Project Structure
+
+├── app/                  # Next.js App Router (Routing and Layouts)
+│   ├── (dashboard)/      # Main application routes
+│   └── layout.tsx        # Root layout (Tailwind/Font imports)
+├── components/           # Reusable React components (e.g., Chart, StatsCard)
+├── lib/                  # Backend logic and utilities (API clients, data transformation)
+│   └── hyperliquid-client.ts # Core API/WebSocket fetching logic
+├── styles/               # Global CSS styles
+├── public/               # Static assets
+└── types/                # TypeScript interfaces and types
+
+
+🛠️ Data Handling (Key Concepts)
+
+Data is primarily sourced via a custom client located in lib/hyperliquid-client.ts. The application fetches:
+
+Static Data: Market configurations, asset lists.
+
+Historical Data: Past trades, funding rates, used for trends.
+
+Real-time Data: Uses the WebSocket connection (implemented in lib/) for live price feeds, liquidation alerts, and open interest changes.
+
+🤝 Contributing
+
+Contributions are highly encouraged! If you have suggestions for new stats, charts, or improvements:
+
+Fork the Project
+
+Create your Feature Branch (git checkout -b feature/AmazingNewStat)
+
+Commit your Changes (git commit -m 'Feat: Add perpetuals funding rate chart')
+
+Push to the Branch (git push origin feature/AmazingNewStat)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Open a Pull Request
 
-## Learn More
+🌐 Deployment
 
-To learn more about Next.js, take a look at the following resources:
+The easiest way to deploy this Next.js app is to use the Vercel Platform.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+For custom deployments, use the build command:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+pnpm build
+pnpm start
 
-## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Distributed under the MIT License. See LICENSE for more information.