Week_4-6.md

Guidance

Answer the following questions considering the learning outcomes for

• Week 4
• Week 5
• Week 6

Make sure to record evidence of your processes. You can use code snippets, screenshots or any other material to support your answers.

Do not fill in the feedback section. The Founders and Coders team will update this with feedback on your progress.

Week 4

Assessment

1. Show evidence of some of the learning outcomes you have achieved this week.

** This week I made big progress on learning about SQL, it's syntax, and how to make SQl queries to access data from the database. Queries I made included and INSERT queries** <img

** I added some CRUD operations to the project. We can Create a user, Read information about a product**

I also gained a better understanding of relational data, including how to organize data into tables or 'entities.' With my team, I planned how the data would be stored and accessed across multiple tables. I learned that every table should have a primary key, and you can reference another table using a foreign key. Additionally, I learned that data with a many-to-many relationship requires an intermediary table to connect columns from different tables. We did this by creating an orders table to match up products (a product_id) with an order (an order_id), because an order can have several product ids.

2. Show an example of some of the learning outcomes you have struggled with and/or would like to re-visit.

[Learning outcome...]
[your evidence here]

Feedback (For CF's)

[Shaughn]
[What went well] Good balance of text and images like that youre doing it by week [Even better if] youd kept going each week and there was stuff in 7-9

---

Week 5

Assessment

1. Show evidence of some of the learning outcomes you have achieved this week.

** Implement navigation between different pages using React Router **
I used React Router on the frontend repo. I used CORS to connect the backend endpoints and giving permission for the frontend repo to access those routes. React Router was used to navigate between pages on the from end. I had to link the path endpoint to a component. I also managed to add a dynamic route. I used useParams() to extract the number from /:id and then feed this through to functions like fetchProductById().

** I used the useContext API to store infomation about products and + or - quantity from the shopping cart **
I was having a lot of bugs but I eventually figured out that I was calling functions like handleAddToCart()from a utils folder, but this wasn't working, I needed to define it within the ShoppingCartContext as this function was affecting statevariables defined within the context.

2. Show an example of some of the learning outcomes you have struggled with and/or would like to re-visit.

** I didn't encounter a need to use the the useReducer hook and how it can aid in using useContext for state management, this is something I will need to read about and see where it can be useful. To my understanding, useReducer is a hook, simillar to useEffect, which return 2 things [ [1] The current state. [2] The dispatch function (which is a function which updates the the state and rerenders the state variable. I didn't see the benefit of using this over useEffect in the project. **
[your evidence here]

Feedback (For CF's)

[Shaughn]
[What went well] Break downs clearly show learning and technical knowledge [Even better if] more setting the scene what is the project and the thing you are actually trying to build

---

Week 6

Assessment

1. Show evidence of some of the learning outcomes you have achieved this week.

[Learning outcomes...] This week my team and I completed our project which was a book app. I tried to make code more modular and reusabile (K7, S1, S11) and as well as this I have solidified typescript skills (K7, S1, S11, S12). I did this by using custom hooks (custom state hooks for operations you often use.) Here is an example of a custom hook which fetches data. I now only have to call this once in my code and the result is stored in the FetchHookState.data.

import { useState, useEffect } from "react";
import { Books } from "../types/books";

// Defines the state types for the custom useFetch hook.
interface FetchHookState {
  isLoading: boolean;
  error: Error | null;
  data: books[] | null;
}

const useFetch = (url: string,): FetchHookState => {
  const [data, setData] = useState<Books[] | SingleReviewData | null>(
    null,
  );
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const res = await fetch(url);

        if (!res.ok) throw new Error(res.statusText);

        const json = await res.json();

        setData(json.data ? json.data : []) 
       
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } catch (error: any) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { isLoading, error, data };
};

export default useFetch;

2. Show an example of some of the learning outcomes you have struggled with and/or would like to re-visit.

I struggled with validating inputs when people log in. I could not return the correct error message object.

Feedback (For CF's)

[Shaughn]
[What went well] context for what the project was more present here [Even better if] explain a bit more about how this makes code modular and reusable