杨显智83240212724127671Web Calculator with Front-End and Back-End Separation1. Project InformationItemDescriptionProjectWeb CalculatorArchitectureFront-End and Back-End SeparationFront-EndHTML, CSS, JavaScriptBack-EndJava 21, Spring BootDatabaseH2 DatabaseFront-End DeploymentGitHub PagesBack-End DeploymentRailwayVersion ControlGit and GitHubOnline Demohttps://yxz-520.github.io/calculator-frontend/Front-End Repositoryhttps://github.com/YXZ-520/calculator-frontendBack-End Repositoryhttps://github.com/YXZ-520/calculator-backendBack-End APIhttps://calculator-backend-production-527f.up.railway.app2. Project OverviewThis project implements a web-based calculator using a front-end and back-end separated architecture.The front-end is developed with HTML, CSS, and JavaScript. It is responsible for displaying the calculator interface, receiving user input, showing calculation results, and presenting calculation history.The back-end is developed with Java 21 and Spring Boot. It receives mathematical expressions from the front-end through REST APIs, parses and evaluates the expressions, handles invalid input, and stores successful calculation records in an H2 database.The communication between the front-end and the back-end is implemented through HTTP requests and JSON data.Compared with a calculator that performs all calculations directly in JavaScript, this project moves the main calculation logic to the server side. This makes the project a complete front-end/back-end separated web application.3. Project RequirementsThe system supports the following functions:AdditionSubtractionMultiplicationDivisionContinuous mathematical expressionsOperator precedenceParenthesesDecimal numbersNegative numbersInvalid expression handlingDivision-by-zero handlingCalculation history storageCalculation history retrievalDeletion of individual history recordsFront-end/back-end communication through REST APIsPersistent local database storagePublic web deploymentDesktop and mobile browser access4. PSPThe Personal Software Process was used to estimate and record the time spent on different stages of the project.PSP StageTaskEstimated Time (min)Actual Time (min)PlanningRequirement analysis2030DesignSystem architecture design3030DevelopmentFront-end interface6050DevelopmentSpring Boot environment setup4050DevelopmentREST API implementation6050DevelopmentExpression parser8060DevelopmentDatabase implementation6080IntegrationFront-end/back-end connection6070DebuggingCORS and deployment issues9080TestingFunctional testing4060DeploymentGitHub Pages and Railway6060DocumentationREADME and final report6060The most time-consuming parts of the development process were front-end/back-end integration, cloud deployment, and solving cross-origin communication problems.These problems were also the most useful parts of the project because they helped me understand how browsers, servers, APIs, and databases work together in a real web application.5. System ArchitectureThe project adopts a front-end and back-end separated architecture.User | v Web Browser | v HTML CSS JavaScript | | HTTP / JSON v Spring Boot REST API | ----------------- | | v v Expression Parser History Service | v Spring Data JPA | v H2 DatabaseThe general workflow is:User Input | v Front-End | | HTTP Request v Spring Boot Back-End | -- Expression Calculation | -- Error Handling | -- Save Calculation History | v JSON Response | v Front-End Display6. Technology Stack6.1 Front-End TechnologiesThe front-end was developed using:HTML5 CSS3 JavaScript Fetch APIHTML is used to define the structure of the calculator.CSS is responsible for the visual design and responsive layout.JavaScript handles user interaction, expression construction, API requests, result display, and history management.The Fetch API is used to communicate with the Spring Boot back-end.6.2 Back-End TechnologiesThe back-end was developed using:Java 21 Spring Boot Spring Web Spring Data JPA MavenSpring Boot provides the web server and REST API framework.Spring Data JPA is used to simplify database operations.Maven is used for dependency management and project building.6.3 DatabaseThe project uses H2 Database.During local development, a file-based H2 database is used instead of an in-memory database.This allows calculation history to remain available after the local Spring Boot application is restarted.The database files are excluded from GitHub using.gitignore.7. User Interface DesignThe calculator interface contains two main areas:Calculator Calculation HistoryThe calculator panel contains:A display areaNumber buttonsArithmetic operator buttonsParenthesesDecimal pointClear buttonBackspace buttonEqual buttonThe calculation history panel displays previously completed calculations.The interface uses rounded cards, soft shadows, a light gradient background, and a responsive layout.Figure 1. Main Interface of the Web CalculatorThe page is designed to work on both desktop and mobile devices.8. Front-End Implementation8.1 User InputUsers create mathematical expressions by clicking calculator buttons.For example:12 8 * 2The corresponding expression generated by JavaScript is:128*2When the user presses the equal button, the expression is sent to the back-end instead of being calculated directly in the browser.8.2 Back-End AddressThe deployed front-end communicates with the following public back-end:const API_BASE_URL https://calculator-backend-production-527f.up.railway.app;During local development, the back-end can also be accessed using:http://localhost:80808.3 Fetch APIThe front-end sends calculation requests using the Fetch API.A simplified version of the request is shown below:const response await fetch( ${API_BASE_URL}/api/calculate, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ expression: expression }) } );The request body is sent in JSON format:{ expression: 128*2 }The general communication process is:JavaScript | v HTTP POST Request | v Spring Boot | v JSON Response | v JavaScript9. Back-End Project StructureThe main structure of the back-end project is:src/main/java/com/example/calculator_backend/ ├── controller/ │ ├── CalculatorController.java │ └── TestController.java │ ├── model/ │ └── CalculationHistory.java │ ├── repository/ │ └── CalculationHistoryRepository.java │ ├── service/ │ └── CalculationHistoryService.java │ └── CalculatorBackendApplication.javaEach package has a different responsibility.ControllerThe controller layer receives HTTP requests from the front-end and returns HTTP responses.ModelThe model layer defines the structure of calculation history records.RepositoryThe repository layer communicates with the database using Spring Data JPA.ServiceThe service layer manages calculation history operations.This structure separates different responsibilities and makes the project easier to maintain.10. REST API DesignThe back-end provides the following REST APIs.HTTP MethodAPIFunctionGET/api/testTest whether the back-end is runningPOST/api/calculateCalculate an expressionGET/api/historyRetrieve calculation historyDELETE/api/history/{id}Delete a history record10.1 Back-End Test APIThe following endpoint is used to check whether the Spring Boot server is running:GET /api/testExample public URL:https://calculator-backend-production-527f.up.railway.app/api/testA successful response confirms that the back-end service is available.11. Expression CalculationThe back-end is capable of processing complete mathematical expressions instead of only two individual numbers.For example:128*2According to mathematical operator precedence:8 * 2 16Then:12 16 28Therefore:128*2 28Figure 2. Operator Precedence TestThis test confirms that multiplication has a higher priority than addition.12. Parentheses SupportThe expression parser also supports parentheses.For example:(128)*2The expression inside the parentheses is calculated first:128 20Then:20*2 40The final result is:40Figure 3. Parentheses Calculation TestThis test confirms that parentheses correctly change the order of evaluation.13. Decimal and Negative Number SupportThe calculator also supports decimal numbers.Example:3.5*2Result:7Negative numbers are also supported.Example:-58Result:3These functions allow the calculator to process more realistic mathematical expressions.14. Error HandlingThe back-end includes error handling for invalid mathematical expressions.For example:10/0Division by zero is invalid.Instead of causing the server to crash, the calculator reports an error to the user.The system also handles malformed expressions and other invalid input.This improves the reliability of the application.15. Calculation HistoryAfter a calculation is successfully completed, the expression and result are stored in the database.Each history record contains information such as:id expression result createdAtFor example:Expression: 128*2 Result: 28The front-end retrieves calculation history using:GET /api/historyThe returned data is formatted as JSON.Figure 4. Calculation History REST API ResponseAn example response is:[ { expression: (128)*2, result: 40.0, createdAt: 2026-10-07T08:45:34, id: 2 }, { expression: 128*2, result: 28.0, createdAt: 2026-10-07T08:45:08, id: 1 } ]This demonstrates that the calculation records are stored by the back-end and can be retrieved through the REST API.16. Delete History FunctionEach calculation history record has a unique ID.When the user clicks the delete button, the front-end sends a DELETE request.The API format is:DELETE /api/history/{id}For example:DELETE /api/history/2The back-end then removes the corresponding record from the database.After deletion, the front-end reloads the history list so that the interface remains synchronized with the database.Figure 5. Delete Calculation History Function17. Database ImplementationThe project uses Spring Data JPA to access the H2 database.The calculation history repository extends:JpaRepositoryThis provides common database operations such as:save() findAll() deleteById()without requiring large amounts of SQL code.The main database flow is:Successful Calculation | v CalculationHistory Object | v Service | v Repository | v H2 Database18. Local Data PersistenceThe local back-end uses a file-based H2 database.The database configuration allows the history data to be stored in a local database file instead of only being kept in memory.The test process was:Start Spring Boot | v Perform Calculations | v Save History | v Stop Spring Boot | v Restart Spring Boot | v Request /api/history | v Previous History Still ExistsThis confirms that the local H2 database provides persistence across application restarts.The database files themselves are not uploaded to GitHub because they are excluded using.gitignore.For the cloud deployment, the Railway version is mainly used as a public demonstration environment. The local file-based H2 environment is the environment in which restart persistence was verified.19. Front-End and Back-End IntegrationThe complete system workflow is:1. The user enters an expression. 2. JavaScript reads the expression. 3. The front-end sends the expression to Spring Boot. 4. Spring Boot parses the expression. 5. The back-end calculates the result. 6. Successful calculations are saved to H2. 7. Spring Boot returns the result. 8. JavaScript displays the result. 9. The front-end requests the latest history. 10. The updated history is displayed.This creates a complete front-end/back-end data flow.20. Functional TestingSeveral expressions were used to test the application.Test InputExpected ResultTest Result12820Pass128*228Pass(128)*240Pass3.5*27Pass-583Pass10/0ErrorPassInvalid expressionErrorPassOther functions were also tested:FunctionResultCalculation HistoryPassDelete HistoryPassPage RefreshPassLocal Back-End RestartPassDesktop BrowserPassMobile BrowserPassPublic Front-End AccessPassPublic Back-End AccessPass21. Deployment21.1 Front-End DeploymentThe front-end is deployed using GitHub Pages.The final public address is:https://yxz-520.github.io/calculator-frontend/This URL can be accessed directly without starting a local Live Server.The website was tested successfully on both desktop and mobile browsers.Figure 6. Mobile Browser Access21.2 Back-End DeploymentThe Spring Boot back-end is deployed on Railway.The public address is:https://calculator-backend-production-527f.up.railway.appThe health-check endpoint is:https://calculator-backend-production-527f.up.railway.app/api/testThe calculation history endpoint is:https://calculator-backend-production-527f.up.railway.app/api/historyThe deployed front-end communicates directly with this public back-end.22. Git and GitHubGit was used for version control during development.Common commands included:git add . git commit -m commit message git pushTwo independent GitHub repositories were created.Front-End Repositoryhttps://github.com/YXZ-520/calculator-frontendFigure 7. Front-End GitHub RepositoryBack-End Repositoryhttps://github.com/YXZ-520/calculator-backendFigure 8. Back-End GitHub RepositoryThe two repositories separate the front-end and back-end source code, which is consistent with the front-end/back-end separated architecture of the project.23..gitignoreFiles that should not be uploaded to GitHub are excluded using.gitignore.Examples include:data/ *.mv.db *.trace.db target/ .vscode/Thedata/directory contains local H2 database files.Thetarget/directory contains Maven compilation output.These files do not need to be stored in the source code repository.24. Problems Encountered During DevelopmentSeveral technical problems were encountered during the project.24.1 Java EnvironmentThe original Java environment was not suitable for the Spring Boot project.Java 21 was installed and configured to provide a compatible environment for the back-end.This solved the Java version compatibility problem.24.2 Front-End and Back-End Running SeparatelyBecause the project follows a separated architecture, the front-end and back-end must run independently.During local development:Front-End: Live Server Back-End: Spring BootBoth services must be available at the same time for the complete application to work.This helped me understand that the browser interface and the server application are two independent parts of the same system.24.3 Localhost ProblemDuring local development, the API address was:http://localhost:8080This works when both the front-end and back-end are running on the same development computer.However, after the front-end was deployed publicly, users on another computer or mobile phone could not use the samelocalhostaddress becauselocalhostalways refers to the users own device.Therefore, the API address was changed to the deployed Railway back-end:https://calculator-backend-production-527f.up.railway.appAfter this modification, the public front-end could communicate with the public back-end correctly.25. CORS ProblemOne of the most important problems encountered during deployment was CORS.After deploying the front-end, the browser console displayed an error similar to:blocked by CORS policy No Access-Control-Allow-Origin headerThe reason was that the front-end and back-end were hosted on different domains.The front-end was hosted on GitHub Pages, while the back-end was hosted on Railway.Therefore, the browser treated requests between them as cross-origin requests.The Spring Boot CORS configuration was updated to allow requests from the deployed front-end.For this project, the final configuration allowed the REST API to accept requests from the public front-end.After updating the configuration and redeploying the back-end, the calculation function worked successfully.This problem helped me understand how browser security policies affect front-end/back-end communication.26. Cloud Deployment ProblemsDifferent deployment approaches were tested during development.The most important requirement was that the application should be publicly accessible.The final deployment architecture became:GitHub Pages | | HTTPS v Railway Spring Boot Server | v H2 DatabaseThe final public front-end was tested successfully on both computer and mobile browsers.27. README DocumentationREADME files were created for both repositories.The front-end README contains:Project overviewFeaturesTechnologiesOnline demoProject structureBack-end addressThe back-end README contains:Project overviewTechnologiesREST API descriptionDatabase descriptionLocal running instructionsFront-end repository linkThis makes it easier for other developers or reviewers to understand the project.28. Final ResultThe completed project provides a functional web calculator with a real front-end/back-end separated architecture.The final system supports:Basic Arithmetic Continuous Expressions Operator Precedence Parentheses Decimals Negative Numbers Error Handling Calculation History Database Storage History Deletion REST APIs Public Deployment Desktop Access Mobile AccessThe application is available through the public GitHub Pages URL:https://yxz-520.github.io/calculator-frontend/29. What I LearnedBefore completing this project, my programming experience was mainly focused on traditional programming languages such as Java and C.This project helped me understand how a complete web application is built.Through the development process, I learned the responsibilities of HTML, CSS, and JavaScript in front-end development.I also learned how Spring Boot can be used to build REST APIs and how JSON data is exchanged between a browser and a server.Another important learning outcome was understanding that the front-end and back-end are independent applications.The front-end is responsible for presentation and interaction, while the back-end is responsible for business logic, calculation, data processing, and database operations.The database part of the project also helped me understand how Spring Data JPA simplifies persistence operations.Instead of manually writing SQL for every operation, common operations can be implemented through repository interfaces.Deployment was another important part of the project.During local development, usinglocalhostwas sufficient. However, after public deployment, I learned that both the front-end and back-end require publicly accessible addresses.I also encountered CORS restrictions when the front-end and back-end were deployed on different domains. Solving this problem improved my understanding of browser security and cross-origin HTTP communication.Finally, using Git and GitHub helped me understand the importance of version control, repository organization,.gitignore, and project documentation.Overall, this project gave me practical experience with the complete development process of a web application:Requirement Analysis | v Front-End Development | v Back-End Development | v Database Integration | v API Integration | v Testing | v Git Version Control | v Cloud Deployment30. ConclusionThis project successfully implements a web calculator using a front-end and back-end separated architecture.The front-end was developed with HTML, CSS, and JavaScript, while the back-end was developed with Java 21 and Spring Boot.The system supports arithmetic expressions, operator precedence, parentheses, decimal numbers, negative numbers, error handling, calculation history, and deletion of history records.Spring Data JPA and H2 Database were used for data persistence.The front-end communicates with the back-end through REST APIs using JSON.Git and GitHub were used for source code management, while GitHub Pages and Railway were used to make the project publicly accessible.Through this project, I gained a clearer understanding of the complete workflow of web application development, including interface design, server-side programming, database operations, REST APIs, debugging, version control, and cloud deployment.The final application can be accessed and used through both desktop and mobile browsers.31. Project LinksOnline Demohttps://yxz-520.github.io/calculator-frontend/Front-End Repositoryhttps://github.com/YXZ-520/calculator-frontendBack-End Repositoryhttps://github.com/YXZ-520/calculator-backendBack-End APIhttps://calculator-backend-production-527f.up.railway.app