Investment Tracker Web App

A modern investment tracking web application built with Next.js and Tailwind CSS v3. Track stock prices with interactive charts and stay updated with the latest company news.

Features

• 🔍 Stock Search - Search for any stock ticker symbol
• 📈 Price Charts - Interactive price charts with 30-day historical data
• 📰 Latest News - Real-time company news and updates
• 🎨 Modern UI - Beautiful, responsive design with Tailwind CSS v3
• ⚡ Fast Performance - Built with Next.js App Router for optimal speed

Technologies

• Next.js - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS v3 - Utility-first CSS framework
• Recharts - Powerful charting library
• Alpha Vantage API - Stock price data
• NewsAPI - Company news articles

Getting Started

Prerequisites

• Node.js 18+ installed
• API keys (optional - app works with demo data without keys)

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Set up environment variables (optional):

Copy .env.example to .env.local:

cp .env.example .env.local

Then add your API keys:

• Get a free Alpha Vantage API key at: https://www.alphavantage.co/support/#api-key
• Get a free NewsAPI key at: https://newsapi.org/register

Running the App

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm start

Usage

1. Enter a stock ticker symbol (e.g., AAPL, TSLA, GOOGL) in the search box
2. Click "Search" or press Enter
3. View the interactive price chart and latest news articles
4. Click on any news article to read the full story

Demo Mode

The app works without API keys using generated demo data. This is great for:

• Testing the UI and functionality
• Development without API rate limits
• Demonstrations

To use real data, add your API keys to .env.local.

API Rate Limits

• Alpha Vantage: Free tier allows 25 requests/day
• NewsAPI: Free tier allows 100 requests/day

License

ISC