User should be able to click their item from the shop page and see items w descripiton and additional details

When a user uploads a new item, the image must be stored in an AWS S3 bucket, as the the will not persist in the filesystem in a production environment on heroku https://devcenter.heroku.com/articles/active-storage-on-heroku
Recommended solution is S3 stooage for image files https://devcenter.heroku.com/articles/s

After the user uploads an item and is redirected to the shop page, each item should display the corresponding image that was fetched from the S3 bucket

Upon adding an item to their cart, the user should see the cart icon in the navbar with an incremented count based on the number of items in their cart

It is done when each item on the shop page id displayed as an individual card component with image title price description using css grid layout

Currently add to cart functionality continues to increment quantity after item has been initially added. Assume that items users are posting are singular and, therefore, should only be able to add to cart once.

After a user adds an item to their cart, the button changes to show the item has been added, and the can no longer add additional quantities of that item

When users are browsing items on the shop page, any items that they posted themselves should not have the add to cart button enabled

Use jest/RTL to mock context/api call to all items endpoint to test the item cards and other components render correctly

Current behavior:
Upon visiting the landing page, a first-time user only sees the login form and has to scroll down in order to view items from the shop page. This is unintuitive and now a great user experience as they may only see the login form, not feel like creating an account, and leave

Expected behavior:
Upon visiting the site, user can immediately see browsable items without having to scroll. Two buttons are visible above the items to render and hide the login and signup forms. As opposed to rendering the form immediately over the items.

when a user first logs into their account, the shop page and cart page do not reflect the current state of their shopping cart on first page visit, but onluy upon refreshing the page or navigating back to it

Users should immediately see the state of their cart when visiting the shop page and cart page

currently if an item is in cart, and another user purchases it, the item remains in the cart even though it is marked as sold. Remove item from cart if it is bought by someone else

Users should be able to check filters for which products they want to see and then click 'apply filers' to only see matching products

It is done when users can filter products on shop page by category and price

After user clicks add to cart button, button shows that item is being loaded, and has been added afterwards

Site should have header DW Rugs with cut out images of popular rugs on either side. Either at the top or incorporated into navbar

When a user enters a wrong username or password, a text field appears next to the login form reading an error of incorrect credentials so the user knows why they were not logged in

Users should be able to click on an item from the shop page and navigate to a page that shows all details for that specific item with a button to add to cart

It is done when clicking on an item from the shop page redirects to the backend route that gets an item by its id.

It is done when the app has migrated from using sessions to JWT for authenticating users. This should circumvent the issue of having the client and server deployed separately and not being able to send a cookie and remember the session across requests bc JWT should keep the token in local storage for the user

Users should be able to add item to a cart and see the cart page, only when they click checkout should they be required to make an account.
--> currently users cannot add to cart (see message telling them to log in)
--> this is because the instances of a shopping cart is coupled to a user's account
--> when a user is not logged in a clicks an add to cart button, a local instance of that cart containing the item ids should be saved in local storage

Users should be able to fill in their shipping and payment info on the checkout page and then have their payment be processed with the recipients being the users whose items they purchased. For now the payment process is simulated for development purposes and no real charge should be made.

Items listed on shop page should display the username of the user that posted it

Cookie eventually gets removed from browser but logged in status remains true bc using local storage userId to check if user should be logged in. Currently if no cookie exists, it still looks like user is logged in bc of loggedIn state being true, but no session exists for any of the backend routes to work.

User should have the experience of being completely logged out once the cookie is no longer present

After the user submits the form to post their item, it can take some time for that route's middleware to complete and return a success response - insert item into database, image must upload to s3..

During this time the user should see a message and loading spinner notifying them that the item is being uploaded and not to refresh or close page

When user clicks the checkout button from cart, they are notified that they are about to be redirected to Stripe and that it is using test mode, therefore no real payment/order will processed and no charge is going to be made. They are provided with a list of test credit card numbers to try instead of their real info

user deleting their item should automatically remove that item's image from s3 bucket

After user finishes checkout for an item and it has been added to their orders, that item is marked as sold on the shop page with the add to cart option disabled.

Youtube page should have iframe players for each video provided from channel.

Behavior: If user is on cart page or any page with a path parameter and clicks log out button, it reloads at the same path with the user no longer logged in, thus showing a blank page. Logging out should always redirect to the base url '/' so that the user can still see the shop page with all the items.

I should have an Admin user I can login as and have the ability to delete items belonging to any users and remove user accounts.

In production this will act as a safe guard against malicious users or inappropriate posts

Chakra UI inputs see, to lack default html form behavior of submitting on Enter key press, make this an available option so that users can type in their login info and hit enter instead of having to always click login button

items in local storage cart are not removed after they are bought or deleted by another user

like the product card view on the shop page, users should not be able to add an item to their cart on the single item page when it already is in their cart

users should be able to type in an input and see their search results update in real time - debounce the api call/filtering and make sure it results are synced with the filter checkbox

Issue where items need to be accessed in multiple components shop page and singleitem page

It is done when items are globally accessible via a react context provider

user should be able to click checkout button on the cart page that navigates them to a checkout page where they can confirm their order details and fill out their shipping and payment information.

It is done when users can navigate from the cart page to the checkout page containing an order summary, form for address info, and form for payment info

Users should be able to upload an image of their choice when posting a new item and that image should then be displayed on the shop page with the rest of the items info

It is done when an image can be submitted through the add product form, be uploaded into the file system, and then have its path saved in the mysql database under the imagePath field for that product. The image should then be rendered back to the user on the front end when a request for that product's data is made with imagePath being the src attribute for the item's image

when a user first visits the page, set a key in local storage to keep track of this. When the localStorage value isn't there (first time user), render a message explaining what the app is, and that it is strictly in dev mode, therefore all purchases and sales are simulated and no real money is being exchanged.

Users visiting page for first time should see a message telling them about the app and development mode, and also see the signup form instead of login

Steps to implement:

add an Auth util function that returns a boolean for wether we have a returning user.
If not, we want to render an alert/modal with a message for first time users on page load

Implement server side logic to handle when user a request for adding cart item is made without valid auth headers provided. Only being handled on client side currently.

If user is logged out and tries to add an item to cart, server should return appropriate status code and error message rather than crashing when it cannot find the logged in user from database

Have a seed npm script that can be run to bulk delete all items, and create a new list of items using the aws image urls.

Add to cart button is intentionally displayed when user is logged out to incentivize them to create an account to actually purchase an item.

Logged out users should see a modal message telling them to log in when they attempt to add an item