Frontend

For the frontend, Vite (React) was used along with TypeScript. We use Redux Toolkit to manage the state with the Redux Persistor to persist store. We also use React Router.

I use redux toolkit createAsyncThunk to create callback function which allows you to manage data in communication with the API and the store. This allows you to create queries efficiently. I use the Axios library to create HTTP request.

const { data, status } = await axios.post(
  `${apiUrl}/users/${userId}/projects`,
  {
    name: name.trim(),
  },
  {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${jwt}`,
    },
  },
);

I am using JSON Web Tokens for authentication in my project. For this purpose, when querying the protected endpoint, I add the header: Bearer ${jwt} .

export const fetchAllUserTasks = createAsyncThunk(
  "tasks/fetchAllUserTasks",
  async (projectName: string, { getState, rejectWithValue }) => {
    const { user, auth } = getState() as RootState;
    const userId = user.userId;
    const token = auth.token;

    if (!userId || !token) {
      return rejectWithValue("Please login first");
    }

    try {
      const response = await axios.get(
        `${apiUrl}/users/${userId}/projects/${projectName}/tasks`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (response.status !== 200) {
        throw new Error("Something went wrong!");
      }

      return await response.data;
    } catch (err) {
      if (err instanceof Error) {
        toast.error(err.message);
        return rejectWithValue(err.message);
      }
      return rejectWithValue("Something went wrong!");
    }
  },
);