This project is a modern, responsive stock portfolio tracking application designed to help you keep a close eye on your investments. Built with the powerful Next.js framework, it offers a seamless user experience for managing and visualizing your stock holdings.
The application leverages a robust Azure Functions API to fetch real-time stock data directly from Yahoo Finance, ensuring you always have up-to-date information. Secure user authentication is handled via Auth0, providing a safe and personalized environment for your financial data.
Whether you're a seasoned investor or just starting, this tracker provides a clean and intuitive interface to monitor your portfolio's performance.
- Real-time Stock Data: Get instant updates on your stock prices and portfolio value, powered by Yahoo Finance.
- Personalized Portfolio Management: Track individual stock holdings and see their performance at a glance.
- Secure Authentication: Log in with confidence using Auth0 for secure access to your portfolio.
- Dynamic Data Visualization: Understand your investments better with clear and concise data representation.
- Responsive Design: Access your portfolio from any device, thanks to a mobile-first and responsive user interface.
- CSV-based Portfolio Loading: Easily load your portfolio data from a CSV file hosted on GitHub, offering flexibility and easy updates.
- Dark Mode Support: Enjoy a comfortable viewing experience with built-in dark mode, powered by Tailwind CSS.
- Next.js: A React framework for production, providing server-side rendering and static site generation.
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
- Auth0: For secure and seamless user authentication.
- Azure Functions: Serverless compute service that enables you to run code without provisioning or managing infrastructure.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
yahoo-finance2: A library for fetching financial data from Yahoo Finance.
- ESLint & Prettier: For code quality and consistent formatting.
- Fully Tested: Comes with a comprehensive test suite using Jest.
- GitHub Actions: For continuous integration and continuous deployment (CI/CD).
- Automated Docker Builds: Docker images are automatically built and published to Docker Hub.
- Vulnerability Scanning: Published Docker containers are scanned for security vulnerabilities.
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js (LTS recommended)
- Azure Functions Core Tools (for running the backend API locally)
- Git
-
Clone the repository:
git clone https://github.com/YOUR_USERNAME/StockQuotes.React.git cd StockQuotes.React -
Configure Environment Variables: Create a
.envfile in the root directory of the project (you can copy.env.exampleas a template) and fill in the necessary environment variables for Auth0 and your API endpoint. -
Install Frontend Dependencies: Navigate to the project root and install the dependencies:
npm install
Note: The Azure Functions backend lives in a separate repository. For local development you can either point
NEXT_PUBLIC_*_URLto a deployed instance or run the API locally onhttp://localhost:7071.
-
Start the Frontend Application: Navigate to the project root, and start the Next.js development server:
npm run dev
The frontend application will typically run on
http://localhost:3000. -
Access the Application: Open your web browser and go to
http://localhost:3000.
The project is configured for continuous deployment using GitHub Actions:
- The frontend is deployed to GitHub Pages.
- The Azure Functions API is deployed to Azure Functions.
We welcome contributions! Please feel free to fork the repository, open issues, and submit pull requests.
Happy Investing! 📈