Programming for the web – Assessment Task

Welcome to the Programming for the Web Assessment Task. In this project, you will apply your knowledge of web development to design and implement a Progressive Web Application (PWA). This task is an opportunity for you to show your front-end and back-end development skills using modern web technologies like HTML, CSS, JavaScript, Node.js, and SQL.

Your goal is to build a fully functional web application that can work offline, interact with a database, and provide a smooth user experience. You will also be required to test and debug your web application to ensure it meets the expected performance and accessibility standards.

For this assessment, you are required to design and develop a Progressive Web Application (PWA) with the following features:

• Front-end design using HTML, CSS, and JavaScript to create an accessible and user-friendly interface.
• Back-end functionality developed with Node.js and integrated with a SQLite database to manage and store data.
• Offline capability using service workers and caching to ensure the application functions without an internet connection.
• Testing and debugging using tools like Google Lighthouse and W3C to ensure your application meets performance, accessibility, and security standards.

This assessment task is designed to develop and assess a range of skills aligned with the Software Engineering syllabus. The task focuses on the application of web development techniques, both front-end and back-end, and incorporates the analysis, design, and evaluation of software solutions. The following syllabus outcomes are specifically addressed:

• SE-12-01: Justifies methods used to plan, develop, and engineer software solutions.
• SE-12-02: Applies structural elements to develop programming code.
• SE-12-03: Analyses how current hardware, software, and emerging technologies influence software engineering solutions.
• SE-12-05: Designs and evaluates software solutions to meet user needs and technical requirements​​.

During this lesson, you will:

Choose a project from the provided examples (e.g., To-Do List App, Flashcards App) or propose a similar project of their own design.

• Choose a project
  • Select a project from the provided examples (e.g., To-Do List App, Flashcards App) or propose a similar project of their own design.
• Set Up Development Environment
  • Install necessary tools such as VSCode, Node.js, and SQLite3 (You should already have these installed).
    • Organise the core files and folders for your project.
• Database Design
  • Plan and implement the database structure, ensuring meaningful field names and appropriate data types for all tables.

You can select an app to develop from the list below, but you can also come up with their own idea, provided it has similar requirements to those on the list below.

• To-Do List App with Database Storage
  • Users can add, edit, and delete tasks.
  • Tasks are stored in a SQLite3 database on the server.
  • Implement offline functionality by caching the app assets.
• Notes App with Persistent Storage
  • Allows users to create, edit, and delete notes.
  • Notes are saved in a SQLite3 database.
  • Supports offline access to notes through cached data.
• Flashcards App with User-Generated Content
  • Users can create, edit, and delete flashcards.
  • Flashcards are stored in SQLite3.
  • Supports studying offline with cached data.
• Contact Manager
  • Users can add, edit, and delete contacts.
  • Contact information stored in SQLite3.
  • Accessible offline through cached data.
• Movie Watch list App
  • Users can add movies to a watch list.
  • Movie data stored in SQLite3.
  • Mark movies as watched and write notes on them.

Over these five lessons, you will transform your project from a concept into a working application. These lessons correspond to the “Producing and Implementing” phase of the project, focusing on coding and structuring the web app.

You can use the time in the next 5 lessons how you wish, but as a guide, the plan below is a reasonable target to hit each lesson.

• Front-end Development
  • Build the user interface (UI) with HTML and CSS, ensuring that it is intuitive and accessible for all users.
• Back-end Development
  • Use Node.js to write the backend logic that connects to your database, allowing for data to be added, edited, and retrieved.
• PWA Features
  • Implement offline capabilities by using service workers and caching techniques.
  • Ensure your application can function seamlessly even without an internet connection.

By the end of Lesson 5, you should have a functioning PWA with a working database, ready for testing and evaluating.

Here are some additional resources that might help you along the way:

• Building an offline-first application with Node.js and SQLite – DEV Community
• Get started with Progressive Web Apps – Microsoft Edge Developer documentation | Microsoft Learn
• Progressive Web Apps (PWA): A Comprehensive Guide – DEV Community

In this final lesson, you will pair up with another student to test each other’s web applications.

• Testing & Debugging
  • Test your application thoroughly to ensure it is free of major errors, meets accessibility guidelines, and performs well under various conditions.
  • Use Google Lighthouse and W3C validation tools to evaluate your app’s performance, accessibility, and security.
• Peer review: Each student will provide feedback on their peers’ work, focusing on UI, database functionality, and PWA architecture.

By the end of this lesson, students should have their final version of the web application, with all bugs addressed and ready for submission.