A responsive Single Page Application (SPA) Point of Sale (POS) System developed using HTML, CSS, JavaScript, jQuery, and Bootstrap as part of the ITS1119 Web Technologies coursework assignment.
This project simulates a real-world POS system with customer management, item management, order processing, authentication, and dynamic user interactions using frontend web technologies.
Sitemap URL:: https://www.gloomaps.com/wwtqrXvvQV
Wireframe URL:: https://drive.google.com/file/d/1fQegukWnoo7ScIoDXl9d_dwRI40XigSU/view
Mockup URL:: https://www.figma.com/design/8nBWbQH8cQcw2OoqFvJaeO/Pos-system?node-id=0-1&t=eCVBp5noTtWqEMZH-0
The main objective of this project is to design and implement a fully functional SPA-based POS system that demonstrates practical frontend development skills using JavaScript and Bootstrap.
The application follows the MVC architectural pattern and provides a responsive user interface for managing customers, inventory, and orders.
- Build a Single Page Application (SPA)
- Implement dynamic user interactions
- Practice CRUD operations
- Apply MVC architecture concepts
- Develop responsive UI using Bootstrap
- Use JavaScript arrays for temporary data storage
- Improve frontend development skills
- Login functionality
- Logout functionality
- Session handling simulation
- Secure access to system features
- Add customers
- Update customer details
- Delete customers
- View customer list
- Search customers
- Add new items
- Update item details
- Delete inventory items
- View items in tables
- Inventory handling features
- Place customer orders
- Select multiple items
- Calculate subtotals dynamically
- Calculate grand totals
- Generate order summaries
- View order history
- Real-time calculations
- Interactive UI updates
- Form validation
- Responsive layouts
- Dynamic table rendering
- HTML5
- CSS3
- JavaScript
- jQuery
- Bootstrap 5
- Single Page Application (SPA)
- MVC Architecture
- CRUD Operations
- DOM Manipulation
- Event Handling
- JavaScript Arrays
- Form Validation
- Responsive Web Design
- Dynamic Rendering
- ❌ No backend/database
- ❌ No local storage
- ❌ No external UI libraries except Bootstrap
- ✔ Data stored temporarily in JavaScript arrays
- ✔ Fully frontend-based implementation
- Clone the repository
git clone https://github.com/ANu-771/Internet-Technologies-Exercise-07-POS-System.git-
Open the project folder
-
Run
index.htmlin your browser -
Login and explore the POS system
The application is optimized for:
- Desktop devices
- Laptops
- Tablets
- Mobile devices
Implemented using:
- Bootstrap Grid System
- CSS Media Queries
- Flexible layouts
The project was developed through the following phases:
- Requirement Identification
- Sitemap Creation
- Wireframe Design
- Mock-up Design
- Responsive UI Development
- MVC-Based Implementation
Through this project, I improved my understanding of:
- SPA development concepts
- MVC architecture
- JavaScript-based CRUD operations
- Bootstrap responsive design
- DOM manipulation techniques
- Frontend application structure
- Interactive UI development
Developed by ISURU ANUPAMA
This project is created for educational purposes as part of the ITS1119 - Web Technologies coursework assignment.