This is a web application built using Next.js for a stocks/ETFs website. It includes two main pages: Explore Page and Product Page, with a common header and search functionality.
The Explore Page is designed to display information about the top gainers and losers in the stock/ETF market. It consists of two tabs: Top Gainers and Top Losers. Each of these sections contains a grid of cards, with 20 cards in each section, and a "Load More" button for additional cards.
- Clicking on a card in this section will route the user to the Product Page for the selected stock/ETF.
The Product Page provides detailed information about a specific stock/ETF. It displays basic information about the stock/ETF and a line graph showing price trends.
Both pages feature a common header that displays the application name and includes a search bar.
- The search bar allows users to type in stock/ETF names or keywords.
- As users type, it displays suggested stocks/ETFs based on the input.
This project utilizes the following technologies:
- Next.js: The main framework for building the web application.
- React: Used for building the user interface components.
- Chart.JS: To display the line graph of price trends (you can choose a suitable library).
- AlphaAdvantage: You'll need to integrate with a data source or API to fetch stock/ETF information.
To run this application on your local development environment, follow these steps:
- Clone this repository to your local machine.
- Install the required dependencies using your preferred package manager (e.g.,
npm installoryarn install). - Set up API integration to fetch stock/ETF data.
- Run the application using
npm run devoryarn dev.
Make sure to configure the project and API endpoints as needed.