This repository will be your one stop shop for all the technical tutorials you need to get your single page web application up and running. The purpose of this repository is for us to give you practical tutorials that support you to learn the MEAN stack (a development toolkit for creating single page applications) basics, however, we expect you to try to build upon this knowledge base in order to create your own novel application.

You are able to clone this repository to your own machine or visit in your web browser. Inside the /dev/Worksheets/ folder, you will find all of the tutorial resources that will be used during each technical workshop for the entire unit. You can see how the tutorial resources relate to the weeks of the course in the schedule table further down this page. For instance, to prepare for the first week, please review the 0_gettingstarted.md tutorial document. There are also supporing videos inside the /dev/Worksheets/videos/ folder, that will support the markdown (.md) tutorial documents, so please review these materials.

Our aim is to turn you into “Full Stack Developers” - developers with experience of all aspects of a system implementation. Getting to grips with the MEAN stack development tool kit will give you first hand experience of building all aspects of a single web application, including:

• Mongo DB for data storage
• Express web application framework
• Angular Javascript web frontend
• Node.js application server

Single page applications can be large and complex to develop and we don’t expect you to become experts in everything. But, we wish to give you a “taster” of everything so you can at least be able to say that you have tried them.

The assignment for this unit is to design and build a web app that is based around the concept of “serious play”. By serious we mean something that addresses a real-world problem or raises the profile of a serious issue but using playful techniques to engage. This isn’t a free license to just make a game! Your system has to incorporate serious real world applications and it’s primary purpose is not entertainment. However, in contrast your application has to have elements of fun and play in it which capture and sustain user attention.

For example can create a web app that encourages children to brush their teeth whilst measuring progress over time? Or can you create a game for gorillas that gives a report of their eyesight? Or can you create an interactive social network game that educates and informs about social media addiction? Due to the fact that this is a significant piece of work, you will need to work in small teams in order to complete the assignment. This brief is designed to balance ambition with the challenge of technical implementation. The markers will expect to see a blend of low-fidelity / high concept design, coupled with the solid and significant implementation of certain key elements. The extent to which your team successfully achieves this balance will be reflected in the marks awarded for this assignment. Although you are not required to create a fully working system, each element that you do build and its relation to the other components of the system must be clearly explained and justified.

Due to the scale of this challenge, you are not required to fully implement all aspects of this application - you must develop your idea to a level that would be presentable as a proof-of-concept prototype to potential investors. Each week we will be covering the technical development alongside the design development of your project.

The members of the team supporting the technical workshops and learning materials, and technical queries are Tom Bale and Marceli Wac. Tom is a former graduate of the MSc Conversion Course at the University of Bristol, now studying a Human Computer Interaction and Vision PhD which considers AR for Nuclear Plant Maintenance. During this unit Tom will be focused on MEAN Stack & Technical workshop development/delivery. Meanwhile Marceli PhD candidate in Digital Health and Care at University of Bristol. During this unit, Marceli will be undertaking technical support related to software architecture, development and DevOps.

The unit will be 100% coursework assessed and undertaken in your groups. Collectively you will have to deliver:

1. A MEAN stack web app (with source code posted on Github)
2. A project report on GitHub which documents both the product and the process of the development

You must use Github to collect together all your work as a portfolio which you will then deliver at the coursework deadline. However, you should also use continuous integration (Docker or online) so we can provide feedback throughout the development process. You will learn about setting this up in the technical materials and workshop.

Also on your Github repository, you must write a front-page document (readme.md) that will form your project report. It is scored out of 100 marks and should include the following sections in the order outlined.

• Team (product) name
• Name / photo / role for each team member.

• Abstract. Motivation for the project, framing of the problem and a high-level overview of the system.
• Project Objectives. The high level goals of the project and the contribution towards solving the problem. A checklist against which the team can evaluate their success.
• Video. Short (1-2min) demo video to explain your system (think Kickstarter)

• Background literature. Academic research review.
• State of the art survey. Current industry review.
• Clear definition of the problem. How does your project relate to the above? We will be marking the ability of your team to identify a worthwhile and important problem and clearly articulate the scope and challenge of the problem.

• Stack architecture and system design (e.g. class diagrams, sequence diagrams).
• Back End - MongoDB - database implementation, the data model that you developed your back end from (e.g. entity relationship diagrams).
• Middle Tier - Express, Node, the RESTful API
• Front End - Angular. Details of implementation.
• Additional elements and components e.g. authentification. Tell us about any other aspects not covered above!
• Deployment details (including Docker), include how you have been achieving continuous integration and deployment.

• Design Process and Early prototyping and ideation (including mood boards and paper prototyping)
• Identification of interacting users and broader stakeholders.
• UX approach – design heuristics/approach, design methods (design fiction / heuristics)
• Understanding of user group (questionnaires / user stories / interviews)
• Wireframes and interaction flow diagrams for final key subsystems.

• Group working methods used (for instance did your team choose a particular style of agile? what communication channels did you use?)
• Discussion of team roles (specialisation is ok!). A summary of individual contributions (note: this is for reference, your team will all receive the same grade!).
• Documentation of your sprints, including both high level overview, timeline, and selected highlights that were critical points in the project (remember to show the users stories implemented in each sprint). We expect a summary of meeting logs (including for instance apologies for absence etc)
• Team use of Git, how your team used continuous integration / continuous deployment. Streamlining of workflow throughout.

• Details of how you evaluated your designs (techniques used & awareness of their limitations). Description of techniques suitable for your particular design. A timeline of evaluation of your design.
• Unit testing / Functional testing.
• User acceptance testing. Evaluation of your design with users – methods undertaken, findings, implications.

• Reflect on the working practices of your group, how well they did or did not work, e.g, management of issues, communication, Agile (etc).
• Reflective discussion of the success of the project. How well did your project fulfil the brief? Were all of your own objectives met
• This is a chance to reflect on how coronavirus has affected your project (remote working practices etc)
• Discussion of Social and Ethical implications of your work.
• Discussion of future work (in terms of design, development and evaluation)

• There is a 5% mark for presentation, including formatting. We are looking for consistency, readability, conciseness, good use of figures and with the ultimate aim of this being a readable and useful public repo!