Fixing the frontend code

The frontend is a standard React application. The application entry point is index.ts, which is located under the ./web/src directory. This, in turn, loads the App component. The App component holds the Header, SideBar, and Main components of our application. You can examine the rest of the code by yourself, but the bits we are interested in are within the Main component, which is located at /web/src/components/Main/index.ts. Open the file in your text editor and let’s examine what is happening with our frontend not being able to make the calls to our API. See the following extract of the file:

...
{ MainContainer } from './styles';
/* ----------
 * Add backend URL provided by the cdk deploy here!
 * ---------- */
const backend_url = 'http://localhost:3333/';
export const Main: React.FC = () => {
  /* ----------
   * States
   * ---------- */
  const [todos, setTodos] = useState...