Skip to content

Latest commit

 

History

History
106 lines (81 loc) · 3.01 KB

README.md

File metadata and controls

106 lines (81 loc) · 3.01 KB

Stellar Wrapped 🌟

A web application that provides personalized insights and analytics for Stellar blockchain users, similar to Spotify Wrapped but for your Stellar wallet activity.

Features 🚀

  • Transaction Analysis: View your largest transactions, net position, and transaction count
  • Wallet Insights: Track frequent wallets you interact with and unique wallet transfers
  • Historical Data: See your starting balance, first transaction, and last transaction
  • Performance Metrics: Analyze profit/loss and time spent on the Stellar chain
  • Most Active Period: Discover your most active months on the network
  • Shareable Stats: Generate and share your blockchain activity insights

Tech Stack 💻

  • Framework: Next.js 15.0.4
  • Language: TypeScript
  • Styling: TailwindCSS
  • State Management: TanStack Query (React Query)
  • UI Components:
    • Radix UI
    • Shadcn/UI
    • Embla Carousel
    • Framer Motion
  • Data Visualization: Recharts
  • Image Generation: html2canvas, react-to-image
  • Database: MongoDB with Mongoose
  • Icons: Lucide React

Getting Started 🏁

Prerequisites

  • Node.js (version 18 or higher)
  • pnpm package manager

Installation

  1. Clone the repository:
git clone https://github.com/daccred/stellar-wrapped-ui.git
cd stellar-wrapped
  1. Install dependencies:
pnpm install
  1. Set up environment variables: Create a .env.local file in the root directory with the following variables:
# Add your environment variables here
  1. Start the development server:
pnpm dev
  1. Open http://localhost:3000 in your browser to see the application.

Building for Production

pnpm build

Project Structure 📁

stellar-wrapped/
├── app/                   # Next.js app directory
├── components/           
│   ├── core/             # Core UI components
│   └── stories/          # Story-specific components
├── contexts/             # React contexts
├── lib/                  # Utility functions
├── public/              # Static assets
└── styles/              # Global styles

Story Components 📊

The application includes several story components that provide different insights:

  • LargestTransaction: Shows your biggest transactions
  • NetPosition: Displays your overall position on Stellar
  • TransactionCount: Total number of transactions
  • FrequentWallet: Most frequently interacted wallets
  • UniqueWalletTransfers: Number of unique wallets interacted with
  • StartingBalance: Initial wallet balance
  • MostActiveMonth: Period with highest activity
  • TimeOnChain: Total time active on Stellar
  • FirstTransaction: Details of first transaction
  • LastTransaction: Most recent transaction
  • ProfitLoss: Overall profit/loss analysis

License 📝

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments 🙏

  • Stellar Development Foundation
  • Attest.so