Leratto

Índice

• 1. Product definition
• 2. User Story
• 3. Prototypes
• 4. Feedback
• 5. Learning objectives

1. Product definition

Social network for food lovers. In Leratto you can share and find gastronomic recommendations of the city. Post the best photo of your dish, qualify for quality and price.

2. User story

• H1: As a user who loves food, I want to register on a social network to be a member of Leratto.
• H2: As a user who loves food, I want to log in to the social network to share and find gastronomic recommendations.
• H3: As a user who loves food, I want to create posts through text and images to share my gastronomic experiences.
• H4: As a user who loves food, I want to see posts from other users to get recommendations.
• H5: As a user who loves food, I want to edit and delete posts through text and image to share my gastronomic experiences.
• H6: As a user who loves food, I want to like posts to react to other posts.

3. Prototypes

Color palette

In our color palette, there is a contrast of warm colors with cold colors. Our colors represent the trend for dark mode apps, because we want our users to reduce eye strain caused by prolonged exposure to bright screens plus help make them look nicer. The yellow color generates more appetite in people.

Low Protype

Discharge Protype

#####Mobile

Web

4. Feedback

In our project we receive feedback from our colleagues, the Laboratory team and different potential users of our app. In the different comments they recommended us to increase the size of the typography, buttons and layout of the texts in the post cards.

5. Learning objectives

HTML and CSS

• Use of semantic HTML.
• Use of CSS selectors.
• Build your application respecting the design made (layout).
• Use of flexbox in CSS.

DOM and Web APIs

• Use of DOM selectors.
• DOM event handling.
• Dynamic manipulation of the DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
• History API.
• localStorage.

JavaScript

• Using conditionals (if-else | switch | ternary operator)
• Function Usage (parameters | arguments | return value)
• Manipulate arrays (filter | map | sort | reduce)
• Manipulate objects (key | value)
• Use ES modules (import | export)
• Differentiate between expression and statements.
• Differentiate between primitive and non-primitive data types.
• Use of callbacks.
• Consuming Promises.

Testing

• Unit testing.
• Asynchronous testing.
• Use of Mock libraries.

Code structure and style guide

• Organize and divide code into modules (Modularization)
• Use of descriptive identifiers (Nomenclature | Semantics)
• Using linter (ESLINT)

Git and Github

• Using git commands (add | commit | pull | status | push)
• GitHub repository management (clone | fork | gh-pages)
• Collaboration on Github (branches | pull requests)
• Collaboration on Github (tags)
• Organization on Github (projects | issues | labels | milestones)

Firebase

• Firestore.
• Firebase Auth.
• Firebase security rules.
• Observers. (onAuthStateChanged)
• Observers. (onSnapshot)

###UX

• Design the application thinking and understanding the user.
• Create prototypes to get feedback and iterate.
• Apply visual design principles (contrast, alignment, hierarchy)
• Plan and execute usability tests.