Quantace Asset Tracker

A personal finance dashboard to track the real-time prices of your favorite cryptocurrencies and stocks.

Live Demo

---

✨ Core Idea

Quantace Asset Tracker is a full-stack Next.js application designed to provide a simple and clean interface for monitoring your financial assets. Users can search for assets from external APIs (CoinGecko for crypto, AlphaVantage for stocks), add them to a personal portfolio, and view live-updating prices on their dashboard.

🚀 Key Features

• Dual Asset Tracking: Seamlessly track both cryptocurrencies and stocks.
• Live Price Updates: Asset prices automatically refresh every 5 minutes to provide up-to-date information. A manual refresh button is also available.
• Debounced Search: Efficiently search for assets with a debounced search implementation that minimizes API calls.
• Favorites: Mark your most-watched assets as "favorites" for quick access on a dedicated page.
• Secure API Proxy: All external API calls are proxied through Next.js API routes, keeping your API keys secure on the server.
• Persistent Storage: Your portfolio is saved to a PostgreSQL database.

🛠️ Tech Stack

• Framework: Next.js (React)
• Backend: Next.js API Routes (Node.js)
• Database: PostgreSQL
• Styling: Tailwind CSS
• Icons: Lucide React
• Data Fetching: Axios
• External APIs:
  • CoinGecko for cryptocurrency data.
  • AlphaVantage for stock data.

---

📂 Project Structure

The project is organized to separate concerns, making it scalable and easy to maintain. Below is a detailed breakdown of the key files and directories.

quantace-asset-tracker/
├── hooks/ # Custom React hooks for managing state and logic.
│ ├── useAssets.js # Manages state for the main asset portfolio.
│ ├── useFavorites.js # Manages state for favorite assets.
│ └── useSearch.js # Handles search logic, including debouncing.
├── lib/ # Utility libraries and helpers.
│ └── _db.js # PostgreSQL database connection pool setup.
├── public/ # Static assets like images and fonts.
│ ├── screenshot.png # Screenshot of the application.
│ └── favicon.ico # Favicon for the application.
├── src/ # Main source code for the application.
│ ├── components/ # Reusable UI components.
│ │ ├── AssetCard.js # Component to display a single asset.
│ │ ├── Header.js # Header component for navigation.
│ │ ├── SearchBar.js # Search bar component with debounced input.
│ │ ├── FavoritesList.js # Component to display a list of favorite assets.
│ │ └── PortfolioList.js # Component to display the main portfolio.
│ ├── pages/ # Next.js pages for routing.
│ │ ├── api/ # API routes for server-side logic.
│ │ │ ├── assets.js # API for fetching and adding assets.
│ │ │ ├── favorite.js # API for toggling favorites.
│ │ │ └── search.js # API proxy for searching assets.
│ │ ├── _app.js # Main App component for global configuration.
│ │ ├── add.js # Page to add new assets.
│ │ ├── favorites.js # Page to display favorite assets.
│ │ └── index.js # The main dashboard page.
├── .env.local.example # Example environment variables file.
├── package.json # Project metadata and dependencies.
├── tailwind.config.js # Tailwind CSS configuration.
├── postcss.config.js # PostCSS configuration for Tailwind.
├── next.config.js # Next.js configuration.
└── README.md # Project documentation.

---

⚙️ Local Setup

Follow these steps to get the project running on your local machine.

1. Prerequisites

• Node.js (v14 or later)
• npm, yarn, or pnpm
• A running PostgreSQL database instance.

2. Clone the Repository

git clone https://github.com/your-username/quantace-asset-tracker.git
cd quantace-asset-tracker

3. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

4. Database Setup

Connect to your PostgreSQL instance and run the following SQL query to create the necessary assets table.

CREATE TABLE assets (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    symbol VARCHAR(50) NOT NULL,
    coingecko_id VARCHAR(255),
    alphavantage_symbol VARCHAR(50),
    current_price NUMERIC(20, 10),
    last_updated TIMESTAMPTZ,
    is_favorite BOOLEAN DEFAULT false
);

5. Environment Variables

Create a .env.local file in the root of the project and add the following environment variables.

# .env.local

# Your PostgreSQL connection string
POSTGRES_URL="postgres://USERNAME:PASSWORD@HOST:PORT/DATABASE"

# API Keys for external services
COINGECKO_API_KEY="YOUR_COINGECKO_API_KEY"
ALPHAVANTAGE_API_KEY="YOUR_ALPHAVANTAGE_API_KEY"

Note: You can get a free API key from CoinGecko and AlphaVantage.

6. Run the Development Server

npm run dev

The application should now be running at http://localhost:3000.

---

🌐 API Endpoints

The application uses the following API endpoints to manage data:

• GET /api/assets: Fetches all assets from the database and updates them with the latest prices.
• POST /api/assets: Adds a new asset to the database.
• GET /api/search?type=<type>&q=<query>: Searches for a crypto or stock asset.
• GET /api/favorites: Fetches all assets marked as favorites.
• PATCH /api/favorite?id=<assetId>: Toggles the is_favorite status of an asset.

---

🚀 Deployment

This Next.js application is optimized for deployment on platforms like Vercel or Netlify.

1. Push your code to a GitHub repository.
2. Import the repository on Vercel.
3. Set up a production PostgreSQL database. Neon is an excellent choice for a serverless PostgreSQL database with a generous free tier.
4. Add the environment variables from your .env.local file to the Vercel project settings.
5. Deploy!

---

📄 License

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