andreidimaano / bobaful Goto Github PK

Create Modal for Menu Item Popout

:)

hide mongoDB URL

https://nextjs.org/docs/getting-started

1. Use nextjs bootstrapper
2. Create NavBar
3. Render one product

If user adds to cart, add checkout button on the bottom of the page

id does not show up in createItem resolver

• How express works in our project
• How we use cookies
• How we log in users
• How we use reference Ids to save space in Database

I just want the project to be well-documented for future use, that way during behavioral interviews we know exactly what we did with the project and can explain the tradeoffs we made and the technologies we used :)

We need to automate the menu display process.

• Implement Urql Client
• Create graphQL files for Mutations
• Create GraphQL files for queries
• Implement Login/Logout
• Implement shopping Cart Query
• Implement Add to Cart Mutation
• Implement Delete from Cart Mutation
• Implement User Orders Querys
• Implement get All Products Query

Create functions for the query resolvers

1. Create reference of Product
2. Move price and quantity to item
3. Create reference of Item

https://typeorm.io/#/entities

1. Fan Fav bool
2. Chef Fav bool
3. Price
4. Oz
5. Description

Products represent the boba drinks
Fan fav & chef fav are defined by Bobaful

List of Products:
https://www.instagram.com/stories/highlights/17890854553494681/

• Qty
• Product

Item as in shopping cart item

Frontend:

• Shopping cart will query the database using urql to display number of items in shopping cart when page first loads
• Shopping Cart will update cart quantity using state (cross tab updating will not work)
• Adding Shopping Cart Icon to the top of Navigation Bar (2 divs: 1 icon, 1 Number of Items)
• Shopping Cart Page will query the database using urql to display all items in shopping cart as a stack (see checkout issue)
• Add Shopping Cart to Sidebar

Backend:

• Add shopping cart to users
• Create Array of Items in mongoDB
• getNumberOfItems() returns array size
• Update Array of Items: Delete from Cart and Add to Cart
• getItems() returns all items in shopping cart

• Write about how we use URQL to connect frontend and backend
• Write about how we structure the frontend
• Write about how login, logout works
• Write about how updating cache works
• Write about how cors works

We will use twilio to notify a user that their order has been placed, shipped, and delivered

Order object needs to have shipping progress added.

• Array[Item]
• Total Price
• User

Current Navbar needs better color, and hamburger menu interaction

Boba photo, product name, description, setState()

1. Create Server using apollo-server-express
   https://www.youtube.com/watch?v=camfkdmuR8M
   https://www.apollographql.com/docs/apollo-server/integrations/middleware/#gatsby-focus-wrapper
2. Create a Product Entity to test the server

installation:
Dependencies:

1. apollo-server-express
2. reflect-metadata
3. express
4. graphql
5. type-graphql
6. typeorm
7. express-session

DevDependencies

1. @types/express
2. @types/express-session
3. @types/node

npm init -y
npx tsc --init

install the following packages:
Dev Dependencies:
typescript
ts-node
ts-node-dev
nodemon
@types/node

Change the scripts:
"scripts": {
"start": "node build/index.js",
"build": "tsc --build tsconfig.json",
"dev": "nodemon --exec ts-node src/index.ts"
},

Add boba images to all products

Name
Email
Phone
Password
Array [Order]

update description: takes new description and either (name or id) as parameters. update the description of product

update favorite: takes a bool as a parameter and updates the product chefFav or fanFav

• Add conditional logout/login page to the menu bar
• If user is logged in (check sessions) display logout
• If user is not logged out, display login
• loginUser() and logoutUser() using UrqlClient

We will use stripe API to handle payments

use the menu on instagram and add it to the database as a product

Images are not showing up
Create Menu Items for boba

Add README.md in backend/resolvers that explains new GraphQL references

• Create a reusable item component: remove, incrementer and decrementer, price, description
• Create a stack that displays all items in a shopping cart
• Calculate the subtotal and display it at the bottom of the page
• Create a button for going back to order more
• Create a button for payment

Create NavBar for website

When creating delete mutations get rid of all dependencies

User Query returns a password

We need resolvers for adding or deleting an item in the items array.
We'll pass in an Item id as a parameter

AddItem(item id)
RemoveItem(item id)

https://typeorm.io/#/mongodb

Figure out how to Create a Product Object using TypeORM

Product has ounces and price but Ounces and Price should be independent of a Product. This simplifies the product interface and creates a better abstraction. Item will now act as a Decorator to the Product class. Before, we needed to add a Thai Tea with 32 oz, a Thai Tea with 64 oz, and a Thai Tea with 128 oz to the database. Now, we will no longer need to add 3 Products for every menu item.

TLDR:
We need to transfer ounces and price to Item object

Item: quantity, product, price, ounces

Product: no longer has price and ounces

the following resolvers need to be fixed:

Item
Order
User

References need to be parsed

After Creating a modal, refactor the code into a reusable component

• Create An Array of "Items" that will act as a shopping cart for a user
• Create an Update Mutation that will take in an item as a parameter and add push it to the array of Items
• Test Code
• Write about Code

Create an ordering form in modal