# Math Solver

Time duration: **September 28, 2024, to Present**.

### **Updates and Enhancements**

#### **Styling with Tailwind CSS:**

I migrated the app's styling to **Tailwind CSS**, which has greatly streamlined the design process. Tailwind CSS offers utility-first classes, making it quicker and more efficient to create consistent and visually appealing interfaces.

#### **Migrating Backend to FastAPI:**

The backend was initially built using Flask but has since been migrated to **FastAPI**. This change improved the application's performance, scalability, and ease of development, leveraging the modern features of FastAPI.

#### **Adding Graph Functionality:**

I introduced **graph functionality** to the application. This feature enables data visualization, providing users with intuitive insights and an enhanced overall experience.

### **Frontend: Built with React, Hosted on Netlify**

For the frontend, I used React to build the application and managed my code on GitHub. After ensuring everything was functional locally, I chose Netlify to host the frontend. Netlify makes it simple to deploy and manage frontend projects with its seamless integration with GitHub repositories.

1. **Code:** Frontend Repository on [GitHub](https://github.com/Neelpatel1604/mathsolverfrontend)
    
2. **Hosting:** I linked my GitHub repo to Netlify, set up continuous deployment, and configured the build settings.
    
3. **Update:** Whenever I push new updates to the GitHub repository, Netlify automatically redeploys the application, keeping the live version up-to-date.
    
4. AWS Amplify: I also deployed the website using AWS Amplify.
    

### **Backend: Built with Python, Hosted on Render**

The backend of my application, developed using Python with Flask, is also hosted on GitHub. I decided to use Render for hosting due to its flexibility and ease of use.

1. **Code:** Backend Repository on [GitHub](https://github.com/Neelpatel1604/mathsolverbackend)
    
2. **Hosting:** Render allowed me to deploy the backend quickly by linking it with my GitHub repository. I could easily set up environment variables, monitor logs, and manage services.
    

### **Synchronizing Frontend and Backend**

One key step was ensuring the frontend communicated seamlessly with the backend. After deploying the backend on Render, I updated my frontend code to reference the new backend URL. This allowed the frontend to correctly interact with the backend services, providing a smooth user experience.

### **Deployment Process: A Visual Journey**

Here are some images illustrating key steps I followed while deploying:

1. **Deploying Frontend on Netlify:**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728851443773/154e29ff-c5dc-4065-b927-4edd7cedeedf.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728851544951/dc32fcad-22ab-47cc-9dd2-85543954eca8.png align="center")
    
2. **Deploying Backend on Render**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728851751168/d9254205-952e-4841-8f26-1ad3aaa1906f.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728851757488/041eefb8-4504-45c5-a177-5f8f186591c9.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728851762480/df331504-8ccc-4159-bde7-8faa7f315a9c.png align="center")
    
3. Amplify frontend on amplify
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739419782595/b09faf5e-7009-4ea8-a351-c5abd0365f09.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739419887377/c92e438c-01a5-4732-8d78-0fb7f37fb106.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739419964946/b7031221-212a-40bf-8863-71f4505e6ca5.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739419994609/c5da511d-1db2-4d9c-bcd5-88edf126a6fa.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739419935207/e21b07fe-b63a-4be7-8202-6e3b736bbd2c.png align="center")
    

### **Conclusion**

Building and deploying this full-stack application has been a rewarding journey. Throughout this process, I not only learned how to configure environments and synchronize services across different platforms but also significantly enhanced my skills in both React and Python. It’s empowering to see how a simple GitHub push can trigger updates across both the frontend and backend. I’m excited to continue building and developing more projects in the future.