Claude Code has tools for reading and editing Jupyter notebooks. In this lesson, we'll go through our second example and use Claude Code to refactor a Jupyter notebook and transform it into a dashboard. Let's get to it. So far we've seen how to use Claude Code to work with web applications on the front end and back end. Now let's shift gears and showcase how to use Claude Code to work with a Jupyter notebook. I have a Jupyter notebook here with some e-commerce data that is fictitious. This ecommerce data is reading information from a few CSVs that I have in this ecommerce_data folder. I'm using pandas to read data from the CSV. I'm displaying some information here, reading some other CSVs, and as you can see here, I'm getting the answers that I want, but this data is not really the most organized. I'm getting some statistical information, but the formatting and the display might not be what I'd like out of the box. As I go through and take a look at some more of this information. I can start to see that I'm beginning to do some more complicated procedures here. One of the things that I'd like to get out of this data are some insights around things like how much revenue did we generate year over year. Specifically, 2023 to 2022. I have the necessary operations here to do what I want. In fact, there's a little bit of merging between two different CSVs and data frames. And here, I'm working my way towards the answer that I want, but there are some warnings that I'm seeing here. at the same time, it takes a while just to show visually what I want and how best to display it. So while I do end up getting the numbers that I want, it's a little bit tedious and messy. I want a way to better showcase this information and I want to explore how I can refactor this Jupyter notebook. As we see in a few other sections, I'm trying to calculate some high level metrics like average order values and not only am I looking for this number, but this is just for 2023. What happens when I want 2024 and so on. As we scroll down, we'll see some visualizations that are pretty good. But I think we could do better. As we work our way towards the bottom, we're still calculating more of these high level values like sales by state. We're generating some visualizations again, but I think we could do much better as we start to use tools like Claude Code. So with that in mind, let's showcase how we can use Claude Code to refactor this notebook and better consolidate our business logic from our presentation. So I'm going to go ahead and open up Claude, and I'm going to put in a prompt that I have here that references the notebook as well as the other files that that I'm working with. I'm going to go ahead and paste in this prompt. And then I want to talk a little bit about what's actually happening here. So before I paste in this prompt, I'm actually going to make a new markdown file just to showcase what this looks like and walk through why we've done what we're doing here. Notice here, I'm referencing the name of the file using this sign, as well as the name of the folder using this as well. If you're ever unsure of how best to prompt or how best to ask Claude for what to do, you can always ask Claude as well. So many times, I find myself using tools like Claude AI or even Claude Code and just asking Claude, here's what I want to do, give me the best possible prompt to accomplish this task. In our case, we have some Refactoring Requirements for how we want the structure to be laid out. We have Code Quality Improvements and some asks that we have for particular Python files that we want. What we're asking Claude to do here is create a separate Python file for loading our data and processing it. And then another Python file for calculating these metrics. This separation of concerns is going to allow us to better test and better understand what the code is that's powering these visualizations that we make in our refactored notebook. We're also asking for improved visualizations. We're being a little bit more specific with what we mean by that. Finally, we want to have a little bit more configuration around the data that we're working with. In general, it's a good practice to let Claude know what you're expecting here. So instead of just refactor this, give me underlying asset for a refactored notebook. Give me a way to document my functions and calculate my business metrics. and then give me some other important files for the dependencies I'm working on, as well as a README explaining how to use this. So let's go ahead and copy this and paste it in. And you'll notice that after you paste a certain number of lines, Claude Code is not going to show you everything. to keep things a little bit more concise in the terminal. So let's go ahead and run this prompt. As we've done with other kinds of tools, we're going to be using a slightly different suite of tooling here. instead of reading, we're going to be dealing with notebook reading. But the same to-do list that we saw before, it's going to be executed just like we've gotten very accustomed to with Claude Code. Here we're using that read notebook. We're going to explore those cells, we're going to analyze the structure and create the refactored notebook that we expect. Once this is done, we should expect to see not only some powerful visualizations, but also some other files with helper functions for loading data, processing data, and calculating the business metrics that we need. accept the changes to these Python files and we'll see that Python is being written for us using the right tool. We'll then go ahead and write another Python file with metric calculations for our eventual data and display. As Claude Code is working through these individual tasks, we can always examine the files that have been created. We can give that a look and we can see right out of the box this kind of object-oriented approach is much cleaner than trying to embed everything directly inside of our notebook. We can see the same thing for our business metrics calculation. and we can see here, the ability to calculate, passing in data frames and returning visualizations and validation of that data. Looks like we've created our business metrics, and finally, our notebook, our requirements.txt, and soon to be our README. So while this is running, let's take a look at the refactored notebook. Let's go ahead and make sure we can run all of these cells as expected. Right off the bat, this is looking a bit nicer visually for us. I see here that it's trying to read the prompt, and I'll just let Claude know, no need to read the prompt, just finish making the README. As I take a look at this notebook, I can see right out of the box, this is much, much nicer. I'm getting analysis into what data I'm looking at, and also some configuration to work with. I can specify the years and comparison data and even any month if I want as well. I'll be using these constants across the notebook. Here I can see the data loading that's required here are the custom modules that I have from my classes. So, as I'm running all of these cells, looks like things are pretty good so far. But if I scroll down a little bit more, I'll actually see that there's an error here. I can see right off the bat, the problem here appears to be some kind of key error. So I'm going to ask Claude to fix that for me. I'll say I'm getting KeyError when I run a particular cell. I could try to have Claude Code figure that out for me, but I'm actually going to give Claude Code the code that I used so that it has a little bit more context. Claude Code is going to take a look at what needs to be done. see what the issue is and make the change for us. All right, let's go ahead and run these cells now that this changes have been made. And let's go make sure that things are looking a bit better. You can see here as I scroll down, I'm not seeing those errors that I was before. And now let's take a look at some of the business metrics that it's returning to me. Getting nicer displays of summaries, information on customer satisfaction, that's a little bit easier to work with than what I had before. As we shift gears towards our revenue analysis, we can start to see clearer values, more displayed information and a little bit of work to more easily display the data we're working with the visualizations appear to be more pleasant looking. we can see as we look at category performance, we've got some even better tools to analyze categories and revenue associated with them. As we look at our geographic performance, we're seeing a nice visualization by state. We can hover over that to get even more information on a state-by-state basis. As we work our way to the bottom, when we take a look at additional delivery analysis, things are looking good as expected. So we've done a nice job refactoring this notebook to more visually display information and separate our concerns. But what I'd like to do now is move from a notebook to a web-based interface with a nice dashboard powered by Streamlit. If you're not familiar with Streamlit, it's a Python library that's useful for displaying interfaces, particularly dashboards, and it's very easy to seamlessly transition from notebooks to these Python files. So let's go ahead and make a new markdown file with our prompt that we'll call convert-to-dashboard.md And let's walk through what we're going to put in here. We're going to ask Claude to convert our refactored notebook into a professional professional Streamlit dashboard with this exact layout. We could start just with this first line, but in order to avoid lots of back and forth, let's just tell Claude what we want. We want a header with a title and filter, we want KPIs with cards for revenue, growth, toward average order value and total orders. And then we want some charts. revenue, categories, revenue by state, and a bar chart with satisfaction. At the bottom row, we want two cards, and we want to be specific for the way in which we display our data and render this information. So with that in mind, let's go ahead and give this a shot. Let's migrate from notebooks to visual interfaces using Streamlit. We can see that it's created our dashboard, and as it's going, we can take a look at what's being done here. We're importing Streamlit, bringing in pandas, bringing in some visualizations including Plotly. And then here you can see we're displaying some custom CSS for styling, setting up our page configuration. Most of this really comes from that st object that I have to work with Streamlit. We've updated our requirements. txt, and here we're actually going to create a README displaying everything that's going on in the dashboard. In fact, I'll just tell Claude right now, don't make a new README, just modify the one we have. In many of these longer plans, it's very easy to just let Claude go, but sometimes you want to stop the process and have it navigate the way that you want. Now that we've created this dashboard, let's open up a new terminal window to start our server. In this terminal window on the left, I'll start the server using streamlit run and then the Python file that's going to be displayed dashboard.py. We can see here that I don't have the Streamlit command. So I can see here, in order to get everything up and running, I need to install these dependencies. So let's go ahead and do that. I'll run my pip install command, install all the necessary dependencies and make sure that when the server loads, I don't have any issues with the dependencies in this application. Once that's done, I'll go ahead and run my server. And I'll do that using the streamlit run command. So let's go ahead and type in streamlit run and the name of our Python file. Python file just like it suggests right here. Back in the browser, here's what things look like. I've got some revenue, I've got some growth. As we scroll down a little bit, we're definitely going to want to verify that these numbers are what we expect. And we see that some things are still missing a little bit. When we take a look at this dashboard, it's a pretty good start, but we can see that we're missing a couple things. It looks like these cards here are empty and actually redundant because we're getting the information that we want. At the same time, it's a little difficult to start with 2024. because we're not seeing much information year over year. So maybe we should ask Claude to not only clean up these pieces, but also start with a default year of 2023, so we can have some slightly nicer visualizations. but also make sure we have the ability to filter based on the month as well. The reason why we'll want to start with 2023 is because we don't have data for every single month for 2024. So as we start to look at this, the monthly growth is a little bit confusing. And the data here, we just don't have yet. So let's go make those asks, put them back in Claude. This is a good start, but I want to implement the following changes. Let's go ahead and make a new line here and first we'll start with making sure the default year is 2023. Next, ask Claude to add filters for months as well. And then finally, we'll make sure to remove the empty card for each. So, let's update the code in our dashboard for these particular tasks. We'll set the default year to 2023, which looks good. And here we'll add some filters for months. Now let's update the revenue chart to handle the case where we're filtering by a specific month. We can see the CSS is changing as well. So it looks like this chart container should be a little bit cleaner than before. Let's go back to the browser, see what things look like. We can see that 2023 is the default, which is a good start. We can also see that those empty cards are gone, which is great. We'll stop here for now, but you can imagine as you keep prompting, you can create more powerful visualizations. But in a short period of time, we started with a notebook that was a bit disorganized, was a little hard to read and understand. And we migrated now to a dashboard that we can deploy, share with team members and iterate on quickly. In the next lesson, we'll build a Next.js application and use Claude Code to connect to MCP servers for Figma and Playwright to take a mockup and build a powerful web application with Claude Code quickly.