Week 2 Assignment: Student Store

Submitted by: Ashani Jewell

Application Features

CORE FEATURES

• [x] The API should contain an endpoint that serves an array of all products in the store
• [x] A Store model should handle all data management logic for the API and be the interface for read/write operations to the JSON file.
• [x] The frontend should include a landing page that displays the products available for purchase.
• [x] Each product should have an individual page that shows the details of the product.

STRETCH FEATURES

• [ ] Deploy your website with Heroku & Surge.
• [ ] An endpoint should exist for creating orders and saving them to a JSON file. Each order should contain the email of the person placing the order, the items associated with the order, and the quantity of each item purchased.
• [ ] There should be a Sidebar component that appears on every page and has two states - open and closed. When the sidebar is opened, it should display a shopping cart of all the products the user currently has in their cart. It should also calculate and display the total amount in dollars for the checked-out items. When it's closed, the sidebar should be much thinner and not display its internal content.
• [ ] A checkout form should be available that allows the user to enter their email and send their order to the API.
• [ ] Create an endpoint for fetching all orders in the database, and an endpoint for serving an individual order based on its id.
• [x] Create an endpoint that serves only a single product based on the product's id
• [ ] Build a page in the UI that displays the list of all past orders and lets the user click on any individual order to take them to a more detailed page of the transaction.
• [ ] Allow users to use an input to filter orders by the email of the person who placed the order.

Walkthrough Video

<iframe src="https://www.loom.com/share/848419009f624547a601a308f266d89f" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">

NOTE: AS THE URL INDEX CHANGE WHEN NAVIGATING THROUGH THE SITE ex: http://localhost:3000/store/1 (for the Rice Krispies page)

Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

For this week, the topics from the lab strongly correlated to this week's assignment. Starting from Monday, we were introduced to the backend(Express) which helped us better understand and build API's. When it came to Tuesday, we were provided with the skills to work on the frontend using React. To no surprise, on Wednesday we worked on being able to connect both parts so they can produce a website that is not only aesthetically pleasing but also functional. One feature, which was not mandatory, that I felt unprepared to do was the sidebar, which I will discuss in the future questions.

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

If I had more time, I would focus on the sidebar feature and I felt like I was very close to implementing it. This might have been a feature that was made in one of the labs, and I might not have gotten that far. I would have also tried to implement the search bar feature that was similar to the one we did last week (Flixster), so I would have a way to connect both week's task into one.

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

When doing the project demo, I think my overall presentation went well as I was able to show a website that met all the requirements and had a color scheme of my liking. I did think by the time we did demos, I would have had the sidebar working so that was a little disappointing but nonetheless it wasn't anything to stress about. One thing I noticed my peers did was deploy the website which I look forward to doing in the coming weeks!

Open-source libraries used

• w3schools
• stackoverflow
• youtube
• github

Shout out

Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc.

I would like to give a shoutout to Henry and Rodgrigo again as they served as amazing resources during working hours and outside of them. I would also like to shout out my working group from Thursday, Leonel and Maritza as they made me feel understood in my frustrations and made an amazing space to ask questions.