ShoppingListApp_LoggedInHeader.png

My Favorite Project (That I Coded)

by Bander Saleh (CSI140_Lab_6) published on 1-30-2023.

LoginPage.png
AccountPage.png
CU_Array.png

About

I personally built a Full-stack App that allows a User to create an account where they can store their shopping list data to the backend and easily customize and personalize the design of the frontend. This app is titled, “Shopping List App, save paper!” And it was built on a Ruby-on-Rails backend and a Vue.js Javascript frontend, incorporating and modifying Bootstrap elements and JavaScript transition elements.

I chose to spotlight my first Full-stack Thesis Project as my favorite coding creation because it helps me look past the basics that you can build with code and motivates me to think bigger next time.

What I Learned

  • Learned fundamentals and best practices for full-stack web development in areas of project architecture, backend, frontend, and how to effectively self-teach new technologies.

    • Generated technical requirements and determined the most effective solutions, created wireframes, designed schema, and researched outside resources.
    • Built and tested the backend, incorporating external APIs or User generated APIs.
    • Created pages and RESTful routes, made web requests to retrieve data, formatted and styled results, incorporated libraries and themes.

    • Functionality

    ShoppingListApp_statsCU.png

  • Create Account: The User can create an Account that is only accessible with the declared key value pair: Email and Password
  • Create List: The User can input an Item with subDetails and store it in the backend inside one array called MyShoppingList
  • MyShoppingList button functions: Each item displayed as a Item in the MyShoppingList array can be either: deleted, updated, completed(moved to the User's CompletedShoppingList array with a timestamp on day complete)
  • View User Stats: A Page that displays multiple types of graphs that all reflect the same data: Quantity vs Data.

    • Upcoming Updates

    1. Incorporate an external API that can take the names in MyShoppingList array and output the different meals that the current MyShoppingList array could make (bonus: include the cooking instructions)