Deployed site: https://mam-mern.netlify.app/
Official Repo: https://github.com/MAM-MERN
Tom's Working Fork: https://github.com/dunerztd/MAM-Server
Alisa's Working Fork: https://github.com/alisay/MAM-Client
Admin Account:
username: admin
password: 123456
Click to Expand
A group project between Alisa Blakeney and Tom Dunstan
- Purpose
- Functionality / features
- Target audience
- Tech stack
This application displays the location of public artworks in City of Melbourne. It can be used to navigate between artworks and learn more about each. It has three main views:
- a landing page with a scan-and-scrollable map that shows the user's location and pin markers at the location of each artwork.
- an about page with information about the public art collection, and with a colophon.
- a search view with an open text field that searches the title and artist of the artwork [with the option to view all as an alphabetically sorted list]
From the map view or the search results view, you can navigate to see a page with a photograph of the artwork and the metadata including title, artist, location, date, materials.
Registered administrators can log in to add additional artworks to the database, and edit or delete artworks they have added.
- wayfinding (find the best route from you to another artwork, from one artwork to another)
- regular users can login to create a "favourites list" of artworks
- a "share" button that generates a shareable link
- Local residents interested in finding out more information about the artworks in their home town.
- Tourists interested in learning about the culture of the town they are visiting.
- Those with an academic interest in art, wanting a basic entry point into researching individual public artworks
Frontend:
- React
- Axios
- Turf JS
- Netlify
Backend:
- Node
- Express
- Mongoose
- MongoDB
- Express Session
- Passport
- AWS S3
- Heroku
- Atlas
Testing:
- Jest
Source Control:
- Git
- GitHub
Documention and Planning:
- Trello
- Figma
- Lucid Chart
- Diagrams.net
Click to expand
Click to expand
Click to expand
Felicity is the curator of public art for City of Melbourne. She has a Master of Arts in curatorial practice for the public space. She is 35 years old, identifies as a woman, and is married with a small child. Since giving birth, she has become increasingly forgetful. She wants everyone to feel the same transformative power of art that she feels. She cares deeply about the people who live in City of Melbourne and wants to do her job as best as possible to represent them, the artists she works with, and feel professional integrity when she goes to sleep at night.
Zal is a backpacker from Nijmegen. They have an international baccalaureate, but chose to travel before deciding on whether to attend tertiary education. They are 22 years old. Their first language is Dutch and but they speak a little English. They love bouldering, meeting new people, and adventure.
Tim is a musician who lives in North Melbourne. He has studied various university degrees but never to completion. He is 67 years old. He has autism spectrum disorder, has a strong interest in local history, music, and tends to get overloaded by sensory information. Sometimes he works as a busker in public spaces of Melbourne.
Mohammad is an artist who lives in Stoke on Trent. He is educated to PhD level in sculptural practice. He is 42 years old. He likes to travel, and his work at various large art institutions around the world means he has visited over one hundred countries. His art is exceptional, by virtue of his exacting standards.
Click to expand
- As an administrator:
- I want to be able to log in, to ensure security is not breached.
- I want to be able to add new artworks, as they are commissioned or acquired by the City collection, to ensure information is up-to-date.
- I want to be able to edit or delete artworks I have added, so that I may correct any data entry errors I may have made.
- I want to be able to log out, to ensure that no-one else using my computer can inadvertently add, delete or edit artworks.
- I want to be able to reset my password, in the case that I forget or want it changed.
- I do not wish to be able to edit artworks already in the database, as they are permanent installations and I do not wish to inadvertently delete their information.
- As a member of the public:
- I want to be able to view all artworks on a map, so I can see their distribution in the City.
- I want to view all artworks in a complete list, so I can browse all artworks.
- I want to view details of individual artworks, so that I can learn the name of the artist, the name of the artwork, when it was made and installed, and any other interesting information.
- I want to see a photo of the artwork, so I can decide whether it is worth visiting.
- I want to know how long it will take me to navigate to the artwork.
- I want to be able to search for an artwork, based on a keyword, so that I can refine the list of artworks I wish to see.
- I want to know who made the application I am using, and why, so I can be assured of its integrity and use value.
- I want to be able to contact the makers of the app, so that I can congratulate them on their fine work.
- As a local goverment arts worker:
- I want to have an easily accessible content management system, so as to be able to update the data on public artworks.
- I want to be sure that my data is always consistent and correct, so that I can ensure I can providing accurate information to serve the residents in my constituency.
- I want to have a way to reset my password when I forget what I set it to.
- I want the activities of my department represented in a way that is professional, clean and attractive, so I can feel a sense of pride about my work.
- As an urban explorer:
- I want to easily see where sculptures and art installations are in the city I am visiting, so that I can plan out an itinerary for my bouldering activities.
- I want to learn more about the artworks I see as I am walking around, so that I can be educated on cultures other than my own.
- I want to make a note of my favourite artworks, so I can easily return to them on another day.
- As someone with limited English, I want there to be clear informational graphics that guide my use of the app, so that I can navigate the different sections with ease.
- As a troubadour and proud Melbournian:
- I want to know more about my city and the artworks I see daily, so that I can feel a warm sense of familiarity with my surroundings.
- I want to be able to tell my audiences interesting facts about the monuments in front of which I busk, to add interest to my show.
- I want to be routed directly to nearby artworks, so that I don't waste time in getting to work in the afternoons.
- I want to see new artworks as they are added, so that I can be aware of where my council rates and taxes are being spent.
- I want the graphics and distracting information to be kept to a minimum, so as not to cause sensory overload.
- As an artist whose artwork is in the City of Melbourne public art collection:
- I want to be able to view my own artwork, even when I am not physically in Melbourne, so that I can experience some of the joy I am bringing to the local populace.
- I want to understand the context in which my artwork has been placed, so that I can be sure that my integrity as an artist is not compromised.
- I want my details and the information about my artwork to be prominent, accessible and accurate, so that I can ensure my moral rights as an artist are being respected.
Click to expand
Click here to view prototype on Figma
Home:
Map view:
Search view:
Artwork details:
About page:
Administrator log in:
Administrator home:
Administrator add/edit artwork:
Click to expand
Week 1
Week 2
Week 3
Week 4
We decided to split the application development into Backend and Frontend with Tom and Alisa handling them respectively. Alisa is stronger in react than Tom and since Tom handled the ADD and DFD and Alisa designed the wireframes in Part A, this pathway made the most sense.
Sprints will be weekly in duration with a standup on Mondays deciding the tasks to completed for the week. We will reconvene at the end of the week to update each other on our progress. Informal communication will be ongoing throughout the week.
All tasks will be added to Trello as tickets with labels indicating person to complete the task, whether it's server or client and a difficulty rating. The ratings are 1-Easy, 2-Medium, 3-Hard, 5-Very Hard, 8-Needs Breaking Down, 11-Needs Break Down.
There are 5 weekly sprint between Part A submission and Part B submission. We anticipate they will be broken down this way:
Week starting 14 December: Planning
Week starting 21 December: First prototype
Week starting 28 December: Aim for usable final product
Week starting 4 January: User testing
Week starting 11 January: Finalize documentation ready for submission
| Library/Dependency | Description |
|---|---|
| aws-sdk | Amazon web services software development kit for javascript. Allows developers to connect to AWS services through javascript objects |
| connect-mongo | Session store for MongoDB |
| cors | Enables CORS in an Express app |
| dotenv | Loads environment variables into process.env |
| ejs | Generates HTML markup with embedded javascript |
| express | Web application framework for Node |
| express-fileupload | Express middleware for uploading files |
| express-session | Session middleware for Express |
| mongoose | Object Data Modeling library for MongoDB and Node |
| mongoose-bcrypt | A mongoose plugin for encrypting fields with bcrypt |
| passport | Authentication middleware for Express/Node |
| passport-local | Passport strategy for authenticating with a username and password |
| chai | An assertion library for Node |
| mocha | Javascript testing framework |
| nodemon | Automatically restarts a Node application when changes are made |
| Library/Dependency | Description |
|---|---|
| @material-ui/core | A React UI framework comprising components, styles, themes and icons |
| @material-ui/icons | Material-UI icons as React components |
| @material-ui/lab | Material-UI components not available in core |
| @react-google-maps/api | React components wrapping the Google maps Javascript API |
| @testing-library/jest-dom | Custom Jest matchers for testing the DOM |
| @testing-library/react | React component testing |
| @testing-library/user-event | Simulates user interaction with the browser for testing purposes |
| axios | Promise based HTTP client for the browser and Node |
| fontsource-roboto | Self-host the 'Roboto' font |
| google-maps-react | A Google Map React component library |
| react | A Javascript library for building user interfaces |
| react-dom | Renders React components in the DOM |
| react-geocode | Transforms a location into it's longitude and latitude coordinates |
| react-router-dom | DOM bindings for React Router |
| react-scripts | Create React App scripts and configuration |
| web-vitals | Library for measuring all the Web Vitals metrics |
Git was employed as source control and a forking workflow was setup. A separate GitHub account, purely for the project was made and both members were given access. The MAM account had three repositories, one for the client, server and documentation. Each member forked this repo to their personal GitHub and they primarily worked from this. Once a feature was completed, pull requests were made to the MAM repo where the other member could review their code and merge.
We worked primarily independently with Tom completing the back-end and Alisa the front-end. Once the shape of the database was worked out, we each constructed our piece of the application to this and connected them up at the end. Trello was used for project management and ticket labels indicating the member responsible, whether it was server/client and its difficulty were followed. Git commits corresponding with task development were adhered to as much as possible. Trello screen shots are below.
While in class we were in regular contact through slack and class conference updating our progress and sharing each others desktop to explain things clearer when need be. In the holiday period, communication was informal with updates and questions through Slack.
14/12/20 - 20/12/20
21/12/20 - 27/12/20
28/12/20 - 3/1/21
4/1/21 - 10/1/21
11/1/21 - 19/1/21
Informal testing was done during and at the end of each completed function by both members. A combination of user testing and Postman were used to achieve this.
Automated tests were written for the server and a screenshot can be seen below. Unit tests for the artworks CRUD functionality and integration tests for the artworks routes, controllers and database queries. Mocha was the testing framework and chai/expect for the assertion libraries. Chai-HTTP for http integration tests.
Automated Testing Screen Shot
The deployed website was manually tested and the results were tabled.
There was no client for this project. However user testing was achieved by taking videos of all the applications functionality.
| Test | Expected Outcome | Actual Outcome |
|---|---|---|
| I want to be able to log in, to ensure security is not breached | When I click the profile/menu icon, I have the option to login | As expected |
| I want to be able to log in, to ensure security is not breached | When I click the login option, I am redirected to the login page | As expected |
| I want to be able to log in, to ensure security is not breached | When I enter the correct username and password, I am redirected to my account page | As expected |
| I want to be able to add new artworks, as they are commissioned or acquired by the City collection, to ensure information is up-to-date | When I am on my account page, I can see the add artwork option | As expected |
| I want to be able to add new artworks, as they are commissioned or acquired by the City collection, to ensure information is up-to-date | When I click the add artwork page, I am redirected to the add artwork form | As expected |
| I want to be able to add new artworks, as they are commissioned or acquired by the City collection, to ensure information is up-to-date | If I have not filled out all the fields in the add artwork form, I cannot submit the form | As expected |
| I want to be able to add new artworks, as they are commissioned or acquired by the City collection, to ensure information is up-to-date | When I submit the completed form, a new artwork is added to the database | As expected |
| I want to be able to edit artworks I have added, so that I may correct any data entry errors I may have made | When I select an artwork, and click the add/edit button, I am redirected to a pre-filled form with artwork details | As expected |
| I want to be able to edit artworks I have added, so that I may correct any data entry errors I may have made | When I submit the edited details, the artwork is updated in the database | Minor bug: additional artwork is created in backend on edit - to fix if time |
| I want to be able to delete artworks I have added, so that I may correct any data entry errors I may have made. | When I am on my account page, I can see the delete artwork option | As expected |
| I want to be able to delete artworks I have added, so that I may correct any data entry errors I may have made. | When I select an artwork and hit the delete button, the artwork is deleted from the database | As expected |
| I want to be able to log out, to ensure that no-one else using my computer can inadvertently add, delete or edit artworks | When I click log out, I am redirected to the login page | As expected |
| I want to be able to log out, to ensure that no-one else using my computer can inadvertently add, delete or edit artworks | I am unable to access the account page if I am not logged in | As expected |
| Deny access if username/password is incorrect | When I enter the incorrect username and password, I receive an error message | As expected |
| I want to be able to view all artworks on a map, so I can see their distribution in the City | When I am in the map view, all artwork locations are displayed with push pins on a map | As expected |
| I want to be able to view all artworks on a map, so I can see their distribution in the City | When I am in the map view, all artwork locations are displayed with push pins on a map | As expected |
| I want to view all artworks in a complete list, so I can browse all artworks | When I am in the list view, I can see all artworks as a list | Minor bug: this view is only available to logged in users at present - to add to public view if time |
| I want to view details of individual artworks, so that I can learn the name of the artist, the name of the artwork, when it was made and installed, and any other interesting information | When an artwork's push pin is selected, it creates an info window with further details | As expected |
| I want to see a photo of the artwork, so I can decide whether it is worth visiting | The artwork info window includes an image of the artwork | As expected (although we did not have access to images of all artworks, so they have been given a placeholder image for now) |
| I want to know how long it will take me to navigate to the artwork | I can view my location on the map | Minor bug: the map has access to my location, but it is not visually represented - to fix if time |
| I want to know how long it will take me to navigate to the artwork | I can wayfind/access directions between points on the map | "Nice to have" feature not implemented |
| I want to be able to search for an artwork, based on a keyword, so that I can refine the list of artworks I wish to see | When I enter a search term in the search bar, the map shows the artwork with that term in the title | As expected |
| I want to know who made the application I am using, and why, so I can be assured of its integrity and use value | When I hit the about button, I am shown Tom and Alisa's name | As expected |
| I want to be able to contact the makers of the app, so that I can congratulate them on their fine work | When I hit the about button, I am shown Tom and Alisa's contact details | Not implemented in submitted version due to privacy concerns |
| Map correctly shows current location | To fix | |
| App restricts access to add/edit/delete routes if user is unauthenticated | To fix | |
| Image loads when pin is clicked | As expected | |
| Shows errors when admin forms aren't filled in correctly | To fix |
Video
Video shows map with clickable artwork pins. Basic map functions such as zoom in/out and satellite/map display. Pins are clicked to show artwork details and image.
The search box finds an image by artwork title and brings up the same information as if the pin was clicked.
Video
Video shows login/logout procedure for the admin account. Once logged in, the admin dashboard displays a list of all artworks on the map with buttons to add/edit or delete a selected artwork. The video also shows the admin navbar menu.
Video
Video shows procedure to add a new artwork to the map. Admin fills out a form with all required details including attaching an image. Returning to the map view shows the new artwork entry.
Video
Video shows procedure to edit an artwork. The edited artwork is shown however it makes a new entry instead of editing and leaves the original still in the database.
Video
Video shows deleting of an artwork. Returning to the map shows the artwork is no longer displayed.