/Maxs-Trofi-client

Max’s Trofí List is inspired by the Greeks, come live above the clouds! Submit food, organize it by category, add units, and choose a purchase date. A simple way to feast like the Gods. No more sticky notes. Check your made grocery list as you walk inside a store.

Primary LanguageJavaScriptOtherNOASSERTION

Max's Trofí! A Grocery List Creator

Max’s Trofí List is inspired by the Greeks, come live above the clouds! Submit food, organize it by category, add units, and choose a purchase date. A simple way to feast like the Gods. No more sticky notes. Check your made grocery list as you walk inside a store.

Planning Story

So many times I have misplaced a grocery list written on a sticky note. The feeling of getting to the grocery store excited to purchase groceries, and then to find myself going through all my pockets looking for a  list that is nowhere to be found. It is like Zeus just stroke me with a lighting bolt! 

Inspired by Zeus’ might of overseeing it all, I came up with the idea to create a grocery list app as a way to tackle down a constant problem with my earthly desires: Food. I decided to mix my lack of love for sticky notes and my love for Greek Gods to come up with the concept of my app. My cloud background, inspired by ancient Greek artwork, depicts the idea of looking at everything from above. One of the most important aspects of my visual conceptualization is being able to find a name that speaks to me, refers somehow to food, and could potentially be catchy to my users. Therefore, I decided to play with the word τροφή or Trofí, Greek for food. Max’s Trofí was born! I decided to add Greek elements to the logo to integrate my ideas: a  trident, a lightning bolt, a shield, and more Greek artwork. 

Time constraints made me think about being practical yet creative. I decided that my background needed to be catchy enough to make everything else revolve around it. Once I made up my mind for the background, I then I played with the colors of the letters. I wanted to give it a spirited and lively feeling. I wanted colors not to be too pastel nor too bright, but just right. The idea behind the letters of my logo is so that it serves as a welcome statement.   The log in form, aside from standing on its own, needed to somehow embrace the background rather than clashing with it. Thus, I added a dark color with transparency to the form to integrate it in the look of the app. For the grocery list form, I went back to my original idea of being in the clouds, so I decided to make it hang in there. I kept playing with my black, white, yellow palette for buttons of the forms.

Tecnologies Used

  • HTML
  • JavaScript
  • CSS
    • Flexbox
    • Bootstrap
  • Mongodb
    • Express
    • Cors
    • Mongoose

Links

Technical Details

User Account

  • Users have the ability to create brand new accounts in order to login.
  • Users have the ability to change their passwords at anytime or to be able to sign out as well.
  • Users have the ability to create a new grocery list.
  • Users have the ability to see all of their made grocery lists.
  • Users have the ability to edit one of their made grocery lists.
  • Users have the ability to delete one of their made grocery lists.

Image

Wireframe

User Stories

  • As a user, I want to be able to sign-up.
  • As a user, I want to be able to sign-in.
  • As a user, I want to be able to change my password.
  • As a user, I want to be able to sign-out.
  • As a user, I would like to check my past lists
  • As a user, I would like to add items to the list.
  • As a user, I would like to remove items from the list.
  • As a user, I would like to edit items from the list.

Unsolved Problems/Strived Goals

I would like to add more features to the grocery list creator such as having one form that does the create, show, edit and delete functions to create a more interactive user experience. I would also like to add popular emoji's and visual effects to create more visual interactivity.