The business domain that was selected by the team members is an online glasses and sunglasses shopping site named Anotherspecs that allows users to explore products from our brand. In this project, the members are assigned to design and develop a front-ended section of the web application (UI) using the combination of HTML, CSS, and JavaScript; all pages are hosted in the front-end server; and a back-ended section (database and web services) using the combination of Node.js and JavaScript; all components are hosted in the back-end server.
The project will be delivered in two phases. The first phase plan prioritizes the website's visual design using HTML and CSS to build the front-end. This includes essential pages like Home, Search, Product details, About Us, and dedicated admin sections for login, add account, product management, and information management.
The second phase tackles the website's internal system. This involves creating a database to store administrator and product information. The team will then develop web services for core functionalities: administrator login (authentication), product management (search, view, insert, update, delete), and administrator information management (similar functionalities for administrator data). Finally, these services will be integrated with the user interface and a public Currency Data API to enable real-time currency conversion.
These are some sample pages that were developed.
Web server of the homepage: http://localhost:8013
Web server of the login page: http://localhost:8013/login
On this page, administrators can fill in their username and password and click on the Login button to login, or new administrators can click on Create New Account to go to the Create Account page.
Web server of the glasses page: http://localhost:8013/Glasses
Web server of the Add product page: http://localhost:8013/Addproduct
After the administrator clicks on the Add Product button at the bottom of the homepage, they will get to the Add Product page (this page). On this page, they can add product ID, product image, product name, description, price, color, material, and category, and then click the Apply button to add the new product successfully. If they click the Cancel button, it will go back to the homepage.
Web server of the Create Account page: http://localhost:8013/CreateAdministratorAccount
On this page, new administrators can create their accounts by filling out their email address, name, username, and password, and then clicking on the Create Account button to save their information, or clicking on the cancel button to get back to the login page.
Web server of the Edit Product page: http://localhost:8013/Editproduct
On this page, the administrators can edit product by filling product ID and Product’s name and click on the edit button to update the product.
