- In Commit 1.1 we made a data which consists of an array containing Objects, in this case our products. the objects contain information like the product name, price, slug, and so on.
We then use the map function to map our data.products into jsx and use the slug as a key while also styling and setting classes.
- Installed react-router-dom - Frontend.
- This a relatively smaller change because I want to be able to look back at this later and make sure I understand this. So what we did here was add our routes using React-Router-Dom. Moved the old design that was in app.js to HomeScreen.js so now when you click on products it brings you to a blank page of the slug. we then added a route with the path of /product/:slug and an element of another screen we made called ProductScreens.js Here we use the useParams() which "returns an object of key/value pairs of the dynamic params from the current URL that were matched by the route path." -- Meaning it grabs the key aka the product.slug we set in v-1.1 I wanted to make sure I understand this so that is why this commit is called 1.1b
- After Version 1.1b all we did was change our anchors to react-router Links so that we have a single page and stops reloading everytime we switch screens.
- Installed Express and Nodemon - Backend.
- In this update we start the setup of the backend express server. we have it running on port 5000 and when users visit the address /api/proudcts we send a responce of data.products, we cloned our data.js from frontend and put it in backend as well. Other than that we installed nodemon for quality of life, nodemon updates on file save.
- Installed Axios - Frontend.
- in package.json we set our proxy to localhost:5000, which is our backend address, then we installed axios and put it in a useEffect hook so that it can fetch the JSON from our backend endpoint of /api/products which then gets stored in a useState hook.
- Installed use-reducer-logger.
- In this patch we implemented useReducer to replace useState to manage complex states in the homescreen with the 3 cases of fetch,request, and fail. we then replaced the old useState code with our new reducer in our fetchData function. after setting everything up we added some render conditions for a loading and error screen before showing the data to user.
- Installed react-bootstrap && react-router-bootstrap
- In this patch we started the design of the site utilizing some bootstrap components, like container, and navbar.
- This update consisted of further designing with bootstrap, specifically, making products its own component, moved out of HomeScreen, and also made a rating component for reviews. Other than that we added bootstrap Buttons, Columns, and Card Bodies.
- Installed react-helmet-async.
- Implemented product details page. Updated webpage titles using helmet package, in backend we added an API endpoint to return product information based on their slug.
- Added loading spinner and error alert. loading spinner shows loading inbetween pages and error alert shows if product slug isn't found. Other than that we made a utils.js and put logic to grab error response from backend and deliver it for use in frontend.
- In this update we created a cart and used react context to manage the state of items in the cart. We created Store.js and made a StoreProvider to wrap our webapp. Other than that we just added and styled a cart in the navbar.
- In this version we refined the add to cart feature, making it so duplicate items wont add to cart; and adding more than 1 item increments quantity until item is out of stock. we also added a unique ID to product data
- In this update we added a cart UI for users to view items in cart. In app.js we added a new route to /cart; we also added a useNavigate hook to the end of our addToCart button handler in ProductScreen.
- Finished most of the button functionality (plus and minus quantity and remove item button) and also made it so adding to cart in the home screen adds to cart as well as making it show out of stock if all items are in your cart. Cart items are also stored in local storage now.
- Implemented UI for signin screen... thats pretty much it
- Installed mongoose and dotenv
- connected to mongoose and added URI to env file
- Created a ProductSchema for products to be stored in mongoDB
- Seeded database with product data instead of using a static data.js file.
- moved all routes in server.js into a routes directory
- Insalled bcryptjs to encrypt passwords
- Made sample User data and seeded in mongoDB
- Insalled express-async-handler to handle async errors
- Installed jwtwebtoken to create and verify tokens
- made a signin API that recieves a post requests and checks Database for user data. if user is found, it creates a token and sends it back to the user. if user is not found, it sends an error back to the user.
- Added signin State to store user data in local storage, and added a signin/signout button to the navbar. Navbar also show's user name if user is signed in, as well as order history with a dropdown menu.
- Completed basic functionality of Shipping Address page ex. Adding shipping address to local storage, removing items from cart and removing address from local storage on sign-out, Button in the shipping adress page now redirects to payment page, and some other small features.
- Added a signup screen with an api endpoint to create a new user.