Project 3 Deployment Link: https://street-art2022.web.app/
Project 4 Deployment Link: https://streetart20221.web.app
Usability Report: https://docs.google.com/document/d/1fu_c14aooiONTpzTearL_x1zHS6A7ZTPNsRqEETlVZc/edit?usp=sharing
Slide: https://docs.google.com/presentation/d/1Ccm_lmKUowN4UyYkC_vvDcKdGrlzil_5XGhPvD-9OCo/edit?usp=sharing
Presentation: https://youtu.be/sgDr3UghX8Q
Objective: A single-page web application for users to share and find graffiti in San Francisco streets. Users can post new graffiti they found in some unnoticeable conners with detailed information and description about these graffiti, or they can just browser our website to see all graffiti created by unknown artists but they ignored.
Functionalities:
Login/ create account - Users can register and login. Finished by Hui
Users can post new graffiti with location and detailed description. Finished by Hui
Users can update and delete information on one graffiti post. Finished by Hui
Users can browse all the graffiti posts other users uploaded. Finished by Lingyi
Users can browse all the graffiti posts they uploaded. Finished by Lingyi
User Stories:
San Francisco is a colourful city, besides doing all the touristy things, there is a lot of art to be seen along the streets throughout the city. However, for the graffiti and mural lovers, there doesn’t exist a platform for them to find street art in San Francisco. We want to provide the platform for them to share their love.
Graffiti is time-sensitive, sometimes we find a great graffiti on our way home, but when we come back a few days later, it’s gone or replaced by other graffiti, we want to keep these social memory forever and let others to explore their meanings and implications.
Color Palette:
Improvements on Usability and Acessbility:
- Because it is a street art website with dark based Background picture, the button and words color we use is kind of bright but not messy.
- Change Authenticate to Sign in, change gariffti to Street Art, and change all font to be consistent for improving accessbility.
- Upload images to AWS rather than local directory
- Change the order of inputs when registering
- Improve user accessibility using AXE DevTools.
Presentation:
- finish necessary infomations in /frontend/.env file
- run following commands:
- cd frontend/
- npm install
- npm start
- finish necessary infomations in /backend/.env file
- run following commands:
- cd backend/
- npm install
- npm start