Table of Contents

• Purpose
• User stories
  • First Time Visitor Goals
  • Returning Visitor Goals
  • Frequent Visitor Goals
• Technologies
• Initial MVP idea
• Design
  • Colour Scheme
• Testing
  • Manual Testing
• Future planned developments
• Wireframes

FESTIVE MEMORIES WEBSITE

Purpose:

Goal:

To enable users to engage with others around the world.

To have a visible record of their location and to share.

• Back to contents

User stories

First Time Visitor Goals

• As a First Time user, I want to easily understand the main purpose of the site.
• As a First Time user, I want to view the website and content clearly on my mobile device.
• As a Firt Time user, I want to find to be able to contact the site owners.

Returning Visitor Goals

• As a Returning user, I want to enjoy the experience and the interactive options .
• As a Returning user, I want to contact the site owners so I can share my experience.

Frequent Visitor Goals

• As a Frequent user, I want to check to see if there are any changes.

• As a Frequent user, I want to check to see if there are any new updates.

• Back to contents

---

Technologies:

• HTML
  • This project uses HTML as the markup language to structure the Website.
• CSS
  • This project uses custom written CSS to style the Website.
• Javascript
  • This project uses Javascript to implement dynamic features on the site and therefore making it interactive.
• Google Fonts
  • This project uses Google Fonts
• Slack
  • This project used 'Slack' and 'Huddle' to aid in collaboration.
• Vercel
  • This is the frontend cloud platform used to host the site.
• Leaflet

  • This javascript library was used for the interactive map.

  • Back to contents

---

Initial MVP idea:

Photo Sharing Public Access Well Wishing Application (MVP - static site)

• HTML (Single Page Application or Multi Page Application)

• CSS (consider use of root variables and resets)

• Javascript (small DoM manipulation on page - buttons / navbars / etc)

• File structure:

  • index.html
  • assets folder >
    • images > all copyright free images
    • css > style.css file
    • js > main.js file
  • 404.html (error handling)
  • extra html pages...

---

Actual idea & content:

A fictional image-sharing web application, that utilises the user's mobile/local equipment to geo-tag an image on upload, along with a Sentimental / Well wishing message.

Design

Color Scheme:

The colors were chosen to complement each other as well as provide accessiblity.

• #00372d
• #aa9049
• #ffbd59
• #782722
• #8a2420
• #f4f6ed

• Back to contents

  ---

Manual Testing:

• The site was tested via Lambda in order to test on Browsers - Firefox - Safari - Google Chrome - Opera.

---

Logo:

---

Future planned developments

(if we have the time):

• https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos

• https://www.freecodecamp.org/news/how-to-get-user-location-with-javascript-geolocation-api/

• take picture using device

• save picture to device file directory (mobile phone gallery)

• add geolocation meta data

• add picture & message to map

• Back to contents

---

Wireframes:

Desktop:

Mobile: