This is a simple full-stack application that demonstrates a basic interaction between a frontend and a backend API. The application features a counter that can be incremented and decremented. The current count is stored and managed by a backend server, ensuring the value persists across browser refreshes and multiple client sessions.
- Frontend: A clean and simple user interface built with
HTML,CSS, and vanillaJavaScript. - Backend: A lightweight API created with
Node.jsand theExpress.jsframework to handle counter data. - RESTful API: Uses
GETandPOSTendpoints to retrieve and update the counter value. - In-Memory Storage: The counter value is stored in the server's memory, making it easy to understand the core logic without a database.
project-2-counter-app/
βββ public/
β βββ index.html # The main HTML file for the user interface
β βββ style.css # The CSS file for styling the app
β βββ script.js # The JavaScript file to handle frontend logic and API calls
βββ server.js # The Node.js and Express.js server
βββ package.json # Defines project metadata and dependencies
βββ .gitignore # Specifies intentionally untracked files to ignoreFollow these steps to get the application up and running on your local machine. You must have Node.js installed on your system. You can download it from the official Node.js website.
Clone the repository or create the file structure as outlined above and add the provided code to the respective files.
git clone [Simple Hello World App](https://github.com/saquib-dev/project-2-counter-app.git)Open your terminal and navigate to the project directory:
cd project-2-counter-appInstall the dependencies listed in package.json:
npm installLaunch the server with the following command. It will run on http://localhost:3000.
npm starthttp://localhost:3000You will see the counter app in your browser, and you can now interact with it!