Calc Visualizer

Calc Visualizer

Inspiration

We wanted to make calculus easier to understand through interactive visuals. While exploring ideas, we came across AlgoVision Knights, which inspired us with its clean and intuitive animations. It showed how powerful visual learning can be, and we aim to bring that same clarity to calculus topics like limits, derivatives, and integrals.

What it does

The Calc Visualizer website provides users with a variety of preset math functions for Limits, Derivatives, and Integrals. Once clicked, they will be welcomed with an interactive visual that the user can use to better understand these topics. If the user doesn't see one of their desired functions, there is a custom function option for each topic.

How we built it

We built this using React for the frontend and Express for the backend. Authentication was implemented using the Better Auth library and stored in MongoDB. Prisma ORM was used to interact with our database and store extra user info, like custom functions.

We used Plotly, the Python library, to create the graphs. For the custom graphs, the user’s function is sent to a server and processed with Python code, then sent back to the user as a graph. We used Manim to create the animations on the home page.

Accomplishments we're proud of

We're proud of creating a tool that will be useful for students that want to delve deeper into Calculus topics. We're even more proud of being able to link together our frontend and backend and utilize multiple web development tools to create a working site.

Challenges we ran into

We had a lot of new technologies to learn since it was our first time using many of the backend libraries. When one of us needed help with a specific task, the other team members needed to quickly learn the technology they were using so they could help them. This was not the most efficient approach because the person who needed help sometimes had to wait a while to get help. It would have been better for two or three people to start learning a new technology together, so it does not all fall on one person.

What we learned

We learned how to navigate version control tools, such as Git and GitHub and use these platforms to communicate effectively. Most importantly, we learned valuable problem-solving skills that allowed us to transform our initial project into a usable resource for students at UCF.

What's next for Calc Visualizer

Our next step for the Calc Visualizer website is to upgrade the current authentication for our users. We also plan to implement a custom limits feature later on, as well as make enhancements to the current custom graphs and AI features within our site. Lastly, we aim to make changes to the design of our website to make it look more presentable.