You are browsing as a guest. Sign up (or log in) to start making projects!

Calculator

  • 4 Devlogs
  • 5 Total hours

Made a working Calculator using react, vite and bootstrap

Open comments for this post

16m 46s logged

Deployment Debugging and Re-Certification Journey

Today’s ship turned into a deployment debugging session rather than a coding session.

I had already completed my React + Vite calculator and deployed it on Render. After submitting it for review, I received feedback that Render free-tier links are not accepted because they may become unavailable in the future.

To solve this, I decided to migrate the project to GitHub Pages and began setting up a new deployment workflow.

The migration wasn’t smooth. Although GitHub Pages reported that the site was live, opening the link only showed a blank white screen. After checking the repository structure, deployment settings, and project configuration, I traced the issue to the Vite base path configuration.

Once the base path was corrected, I rebuilt the project, redeployed it, and tested the site again.

Success — the calculator loaded correctly and the GitHub Pages deployment worked as expected.

This experience taught me that shipping a project isn’t only about writing code. Understanding deployment, hosting platforms, project structure, and debugging production issues is just as important.

The calculator is now successfully hosted, ready for re-certification, and I’m ready to move on to building and shipping the next project.

Deployment Debugging and Re-Certification Journey

Today’s ship turned into a deployment debugging session rather than a coding session.

I had already completed my React + Vite calculator and deployed it on Render. After submitting it for review, I received feedback that Render free-tier links are not accepted because they may become unavailable in the future.

To solve this, I decided to migrate the project to GitHub Pages and began setting up a new deployment workflow.

The migration wasn’t smooth. Although GitHub Pages reported that the site was live, opening the link only showed a blank white screen. After checking the repository structure, deployment settings, and project configuration, I traced the issue to the Vite base path configuration.

Once the base path was corrected, I rebuilt the project, redeployed it, and tested the site again.

Success — the calculator loaded correctly and the GitHub Pages deployment worked as expected.

This experience taught me that shipping a project isn’t only about writing code. Understanding deployment, hosting platforms, project structure, and debugging production issues is just as important.

The calculator is now successfully hosted, ready for re-certification, and I’m ready to move on to building and shipping the next project.

Replying to @SK

0
Ship #1

I built a fully functional calculator using React, Vite, and Bootstrap. The calculator supports basic arithmetic operations such as addition, subtraction, multiplication, and division with a clean and responsive user interface.
The most challenging part was managing the calculator logic, handling user inputs correctly, and ensuring calculations were performed accurately while maintaining the application state in React.
I am proud of successfully creating a working calculator from scratch and implementing a responsive design using Bootstrap. This project helped me strengthen my understanding of React components, state management, event handling, and modern frontend development practices. Through this project, I learned how to build interactive user interfaces with React, organize components efficiently, and deploy applications using GitHub and Render.
To test the project, users can enter numbers using the calculator buttons, perform arithmetic operations, clear inputs, and verify that the displayed results are calculated correctly.

  • 4 devlogs
  • 5h
Try project → See source code →
Open comments for this post

2h 40m 10s logged

Completed the code for project calculator

Completed the code for project calculator

Replying to @SK

0
Open comments for this post

1h 1m 8s logged

I am currently working on the functioning of react by implementing html, js and css in it.

I am currently working on the functioning of react by implementing html, js and css in it.

Replying to @SK

0

Followers

Loading…