For this exercise, I developed a web application for the Rijksmuseum. The main goal was to allow visitors to scan a QR code and view information about the related painting. Through this project, I learned a lot about building web applications, working within a tight schedule, and collaborating effectively with other students to create an awesome project. This project was made together Samed
You can see the final product at: Rijksmuseum application
- Scan QR codes to view painting information.
- Interactive and mobile-friendly design.
- Clone the repository.
- Install dependencies using
npm install. - Run the application using
npm run dev.
The main purpose of this project is showing your programming skills. You will work alone or in a team of 2 students.
- Photo of the end result.
- Video's of tests.
- Technical design (Tinkercad, WokWi, ...).
- ...
2 day parts a week (3 hours each) for 8 weeks. In total 48 hours.
Make sure you loop through these phases during the project:
- Read what the project is about in the PROPOSAL.md, which you can find in the sintlucas folder.
- Ask for details if you still have questions.
- Start designing the application (see below).
A Game Design Document
- Visualizations
- Mechanics
- Dynamics
- Aesthetics
A technical design is a translation of the proposal (functional design) to technical terms. You can think of:
- What stack/frameworks will you use (HTML/CSS/JS, frameworks, etc.)?
- What hardware do you need?
- What parts does your application consist of?
- How will these parts work together (front-end/back-end/database/webservice/...)?
- What data does your application need and how you will you store it (REST webservice/database/SessionStorage api/...)?
- Are there any security risks and how will you deal with them?
- How important is the performance?
- How will you deploy it?
- How will you test it?
- ...
A User Interface design, think of:
- Draw (paper or digital) a wireframe.
- Write a style guide with more info about fonts, colors, logo etc.
- ...
Create a user interface design (drawing) and save a screenshot in the sintlucas folder.
- Write down the Issues (user stories) in
GitHub Issues(which will act as your backlog). - Use the MoSCoW method to prioritize the backlog items (M: Must have, S: Should have, C: Could have, W: Won't have).
- Create a Scrum Board in GitHub Projects.
- Refine each item into smaller, more technical items (this is called the sprint planning).
- Place just enough refined items in the Scrum Board in the ToDo column (this is called the sprint backlog). Enough means that you can finish all items in the sprint.
- Start each lesson with a stand-up meeting:
- Open the scrum board
- Every team member answers these questions:
- What did you do last time?
- What will you do today?
- Are there any impediments in your way?
- Start developing on the sprint backlog items (ToDo).
Don't forget:
- Pull the changes of your team members regularly.
- Commit and push your changes regularly to prevent merge conflicts.
- Make sure that your code is readable and has comments.
- Think beforehand how you will test your application/product.
- Make video's/photos of the tests and place them in the sintlucas folder.
- During development, you will get a review and a retrospective with one of the teachers.
- During the last lesson you will present the results to the other teams.
- The teacher will evaluate your work (see the file
SD - Feedback en feedforward door docent).- Your designs are in line with the requirements (6).
- The issues have been refined into smaller, more technical items (8).
- The final product is in line with the designs (9).
- You can argue why you made certain choices (9).
- The product runs smooth and is bug free (10).
- The code is clean, readable and follows code conventions (11).
- The product has been tested (12).
- You can evaluate the process and are open to feedback (16).