Build a stock chart web application

Building a stock chart web application on a Windows computer is a great project for a beginner. Here are the very detailed steps to guide you from start to finish. We'll use Visual Studio Code, a popular and user-friendly code editor, and the command prompt for running commands.

Build a stock chart web application

Building a web application in Python to generate stock charts involves several key components, including data acquisition, chart generation, a web framework for serving the application, and a frontend for user interaction. This guide will walk you through the process step-by-step.

Overview of the Application

This application will allow users to enter a stock ticker symbol, and in response, it will display an interactive stock chart. The backend will be powered by Python using Flask, and the frontend will use HTML, CSS, and JavaScript. For charting, we'll use  yfinance   to fetch data and  Plotly   for creating interactive visualizations.

Step 1: Install Necessary Software

First, you need to set up your computer with the right tools.

  1. Install Python:
  2. Go to the official Python website: https://www.python.org/downloads/
  3. Download the latest version of Python for Windows.
  4. Run the installer. Very important: Check the box that says "Add python.exe to PATH" during installation. This makes it easy to run Python from anywhere on your computer.
  5. Install Visual Studio Code (VS Code):
  6. Go to the VS Code website: https://code.visualstudio.com/
  7. Download and install the application.
  8. VS Code is an excellent text editor for writing code.
  9. Create a Project Folder:
  10. Go to your Desktop or Documents folder.
  11. Create a new folder named    stock_app   . This will be your project's home.

Step 2: Set Up the Project Environment

Now, let's open your project folder in VS Code and install the required libraries.

  1. Open VS Code:
  2. Launch Visual Studio Code.
  3. Go to File > Open Folder... and select the    stock_app     folder you just created.
  4. Open the Terminal:
  5. In VS Code, go to the top menu and click Terminal > New Terminal.
  6. A command line window will open at the bottom of VS Code. This terminal is your control panel.
  7. Install Libraries:
  8. In the terminal, type the following command and press Enter: pip install Flask yfinance pandas plotly. This will download and install all the Python packages needed for the project:
  9. Check Point: After running the command, you should see a lot of text showing that packages are being successfully installed. When it finishes, you'll see a new command prompt line.

Step 3: Create the Python Backend

Now you'll create the Python file that powers the application. This file will contain your Flask application, responsible for fetching data and generating chart JSON.

  1. Create the Flask Application  app.py :
  • In the VS Code file explorer (on the left side), click the "New File" icon (it looks like a document with a plus sign).
  • Name the file app.py .
  • Copy and paste the complete Python code from the resources folder into this app.py file. Make sure you don't miss any part.
  • Save the file by pressing Ctrl + S.


Step 4: Frontend Development (HTML, CSS, JavaScript)

Next, you'll create the webpage the user sees. Now, let's create the frontend files that the Flask application will serve.

  1. Create a templates Folder:
  2. In the VS Code file explorer, click the "New Folder" icon.
  3. Name the new folder templates .
  4. Create index.html :
  5. Click on the new templates folder to select it.
  6. Click the "New File" icon inside the templates folder.
  7. Name the file index.html .
  8. Copy and paste the complete HTML code from the resources folder into this file.
  9. Save the file by pressing Ctrl + S.
  10. Check Point: Your project structure should now look exactly like this:

stock_app/

 ├── app.py

 └── templates/

  └── index.html


Step 5: Run the Application

This is the final step where you'll bring everything to life.

  1. Start the Server:
  2. Go back to the terminal at the bottom of your VS Code window.
  3. Type the following command and press Enter: python app.py
  4. Server Status:
  5. Check Point: You will see a few lines of text appear in the terminal. The most important line will say something like:
  6. * Running on http://127.0.0.1:5000 (Press CTRL+C to quit)
  7. This means your server is up and running. Do not close this terminal window. If you do, the server will stop.
  8. Visualize Your Progress:
  9. Open your web browser (Google Chrome, Firefox, etc.).
  10. In the address bar, type http://127.0.0.1:5000 and press Enter.
  11. Final Check Point: You should see your web application page with the stock chart for NVDA automatically loaded. This is your final result! You can now type a new stock symbol in the input box and click the button to see a new chart.



By Flaubert Tchouangwa August 24, 2025
Install Python and create virtual environment on Windows
By Flaubert Tchouangwa August 7, 2025
Generate Code for a Webpage The marketing team is struggling to manage a web server for sharing content with external clients, as updates to web content and code are time-consuming and resource-heavy. They're looking for a more efficient, user-friendly solution, ideally using Generative AI, that enables staff with little AWS experience to handle updates with ease. Solution This solution provides seamless integration between Amazon Bedrock generative AI capabilities and traditional Amazon EC2 website hosting services. The practical approach creates and updates web content by combining AI-generated content with a conventional hosting infrastructure. Step 1: This solution provides seamless integration between the generative AI capabilities of Amazon Bedrock and the traditional website hosting services on Amazon Elastic Compute Cloud (Amazon EC2). Step 2: Enable access to an AI model through the Amazon Bedrock console. Step 3: Create static website content by using the Amazon Bedrock chat/text playground to generate HTML and text elements. Step 4: Use EC2 Instance Connect to update the generated index.html file with the static website content on an EC2 instance. Step 5: Users can view the static website by entering the EC2 instance's public IP address in their web browser Step 6: To test the system, use the Amazon Bedrock chat/text playground to create HTML content for a tic-tac-toe game. Then update the tictactoe.html file on the EC2 instance with the generated code. Practice Enable models on the Amazon Bedrock console. Search and click on Bedrock Scrow down and click on Model access Click on Amazon and Nova Lite Use a prompt to generate an index.html file in the Amazon Bedrock chat/text playground. Update a deployed application on an Amazon EC2 instance. Test the updated application by using the DNS address of the EC2 instance. Step 1: 1. Review the practice lab objectives in the Concept section. 2. Click Start Lab or Open AWS Console to begin. 3. Follow the lab instructions carefully, and use the arrows to navigate between steps. AWS services not used in this lab are disabled in the lab environment. In addition, the capabilities of the services used in this lab are limited to what the lab requires. Step 2: 1. In the top navigation bar search box, type: bedrock 2. In the search results, under Services, click Amazon Bedrock. 3. Go to the next step. Step 3: 1. Review the Amazon Bedrock Overview page. 2. In the left navigation pane, scroll down to the Bedrock configurations section. 3. Go to the next step. Step 4: 1. At the bottom of the left navigation pane, under Bedrock configurations, click Model access. 2. In the Base models section, review the displayed models. 3. Above that section, click Enable specific models. 4. Go to the next step. Step 5: 1. If needed, click to expand Amazon. 2. Choose Nova Lite. 3. Go to the next step. Step 6: 1. If needed, click to expand Amazon. 2. Choose Nova Lite. 3. Go to the next step. Step 7: 1. Click Next. 2. Go to the next step. Step 8: 1. In the Review and submit step, in the Model access modifications section, review the displayed model. 2. At the bottom of the page, click Submit. 3. Go to the next step. Step 9: 1. Review the alert message. 2. In the Base models section, scroll down to the Amazon models. 3. Go to the next step. Step 10: 1. Review the model that was granted access. 2. In the left navigation pane, under Playgrounds, click Chat / Text. 3. Go to the next step. Step 11: 1. On the Chat / Text playground page, for Mode, click the arrow to expand the dropdown list. - Be sure to review the available modes. 2. Choose Chat. 3. Go to the next step. Step 12: 1. Click Select model. 2. Go to the next step. Step 13: 1. In the pop-up box, for Model providers, choose Amazon. 2. For Models with access, choose Nova Lite. 3. For Inference, choose On demand. 4. Click Apply. 5. Go to the next step. Step 14: 1. In the Configurations window, under Randomness and diversity, for Temperature, move the slider to 0. - Temperature controls the randomness of the model's responses. - Top P (Nucleus Sampling) controls the cumulative probability threshold for token selection. 2. Under Length, for Response length, move the slider to 5120. - Length parameters control how much text the model generates in its responses. 3. In the right pane prompt box, type: Generate a static webpage for AnyCompany marketing agency without any explanation. 4. Click Run. 5. Go to the next step. Step 15: 1. Review the generated response. 2. Click the copy icon to copy the generated response, and then paste it in the text editor of your choice on your device. - You use this response in a later step. 3. Go to the next step. Step 16: 1. In the top navigation bar search box, type: ec2 2. In the search results, under Services, click EC2. 3. Go to the next step. Step 17: 1. On the Dashboard, in the Resources section, click Instances (running). 2. Go to the next step. Step 18: 1. In the Instances section, review the details of the available EC2 instance, app-server. 2. Choose app-server. 3. On the Details tab, under Public IPV4 address, click the copy icon to copy the IP address for the app-server instance, and then paste it in the copy editor of your choice on your device. 4. Go to the next step. Step 19: 1. In a new browser tab (or window) address bar, type: http:// and then, paste the IP address that you just copied, and then press Enter. - Your IP address will differ from what is displayed in the screenshot example. 2. Review the Hello World message. - This message is from the index.html file that was created on the EC2 instance during the lab's prebuild process. 3. Go to the next step. Step 20: 1. Return to the Amazon EC2 browser tab. 2. In the Instances section, click Connect. 3. Go to the next step. Step 21 1. Click the EC2 Instance Connect tab. 2. Click Connect. 3. Go to the next step. Step 22 1. In the terminal window, at the command prompt, to change the directory to the nginx html folder, run (type the command and press Enter): cd /usr/share/nginx/html 2. To list the files in the html folder, run: ls -ltr 3. Review the two .html files created as part of the prebuild process. 4. To view the contents of the index.html file, run: nano index.html - Nano is a basic, user-friendly text editor for Unix-based systems (such as Linux and macOS). 5. To close the instance details tab, click the X. 6. Go to the next step. Step 23 1. Review the file contents. 2. Review the nano commands listed at the bottom of the terminal window. - You can always access the help menu within nano by pressing Ctrl+G for a complete list of commands. 3. Delete the file contents. - You can use the backspace or delete command to delete the file contents. 4. Go to the next step. Step 24 1. Paste the contents of the static webpage that you copied in an earlier step. 2. At the bottom of the contents, delete the three backquotes. 3. Go to the next step. Step 25 1. At the top of the terminal window, delete ```html. - You can use the upward arrow on the keyboard to scroll up to the top of the file. 2. Go to the next step. Step 26 1. Press Ctrl+X on your keyboard (not shown). 2. For "Save modified buffer?", type: Y - If the terminal prompts you to enter the file name, press Enter. 3. Go to the next step. Step 27 1. In the terminal, run: ls -ltr 2. Review to confirm that the index.html file is updated. - To confirm that it's updated, you can check the file timestamp. 3. Go to the next step. Step 28 1. In a new browser tab (or window) address bar, paste the IP address that you copied and edited in an earlier step, and then press Enter. 2. Review the updated index.html file. - The contents of the provided file is an example. The contents might differ based on the response provided by the large language model (LLM). 3. Go to the next step. Step 29 1. Return to the EC2 Instance Connect terminal browser tab. 2. To view the contents of the tictactoe.html file, run: nano tictactoe.html 3. Go to the next step. Step 30 1. Review the contents of the file. - You must update this file in the upcoming DIY section of this solution. 2. Go to the next step. DIY Goals Use Amazon Bedrock to generate a tic-tac-toe game in an .html file. Update the tictactoe.html file on the EC2 instance by using EC2 Instance Connect. Hint Navigate to the Amazon Bedrock chat/text playground browser tab. In the prompt text box, type: "Generate an .html file for a tic-tac-toe game without any explanation." Copy the generated content and update the tictactoe.html file on the EC2 instance. Remove the backquotes and save the file. Test the game in a new browser tab by using the URL: http:// /tictactoe.htm Summary Use Amazon Bedrock models and the chat playground to generate your HTML content. Then use EC2 Instance Connect to update the web server. After updating the index.html file through EC2 Instance Connect, the changes are immediately visible to your clients. Enable models on the Amazon Bedrock console. Use the chat playground to generate static content. Use EC2 Instance Connect to update files on Amazon EC2.
By Flaubert Tchouangwa August 5, 2025
Build a Web Site with Flask Install Flask in a virtual environment and create a simple "Hello World" web app. You’ll learn to modify route definitions, use debug mode, and render HTML pages using Flask routes. You will also work with boilerplate HTML and CSS to customize your site, dynamically generating URLs with url_for , creating and inheriting Jinja templates, and defining multiple routes that link to the same function.
By Flaubert Tchouangwa August 1, 2025
When working with Python using Anaconda, managing environments and packages with Conda is essential for keeping your projects organized and conflict-free. Below is a handy table of common Conda commands categorized by functionality:
By Flaubert Tchouangwa August 1, 2025
To easily set up Python and Jupyter Notebook, install the free Anaconda distribution, which includes Python, Jupyter, and essential data science libraries. Download Anaconda from the official website, run the installer, and follow the setup instructions. Once installed, launch Anaconda Navigator or open Jupyter Notebook directly from the Start menu. This all-in-one package simplifies environment management and lets you start coding in Python immediately through an interactive browser-based interface ideal for data analysis, machine learning, and educational projects.
By Flaubert Tchouangwa August 1, 2025
To create an environment for working with Hugging Face’s Transformers library, start by creating a new Conda environment using conda create --name llm_project_env , then activate it with conda activate llm_project_env . Next, install the Transformers library by running conda install transformers . Launch Jupyter Notebook from within this environment using jupyter notebook , and you can begin writing Python code as usual. For example, you can use from transformers import pipeline and create a sentiment analysis pipeline with pipeline("sentiment-analysis") , then test it with a sentence like "I love NLP!" . Once you're done, deactivate the environment with conda deactivate .
By Flaubert Tchouangwa August 1, 2025
The Conda workflow for managing environments and packages begins by creating a new environment with conda create --name myenv python=3.10 to isolate dependencies and avoid project conflicts. Activate it using conda activate myenv , then install necessary packages like NumPy, Pandas, or Matplotlib with conda install . You can also use channels like conda-forge for additional packages. Use conda list to view installed packages and conda env export > environment.yml to back up or share your setup. When finished, deactivate the environment with conda deactivate , and optionally remove it using conda remove --name myenv --all . You can also list all environments with conda env list or clone one with conda create --name newenv --clone myenv .