Front-End to Full-Stack Journey Part 3: Server Proxies, React and Progress

I am super proud to be writing a Part 3 of this journey, especially considering the amount of progress I have made since the last update. I was able to focus my ADHD superpowers for a couple of days straight on finishing up a few different courses that helped familiarize myself with writing JSX, and used the momentum to carry myself into learning React. But, being the impatient person that I am, I wanted to see how far I could get in setting up my local environment given the knowledge I've gained with Express, SQL and node so far.

Setting up the Proxy Server

This one was new to me, but I wanted to things "The right way". My app will be making API calls to my SQL database, and I want to have as little client-side processing going on as possible. So, I decided to host my database on a separate server that the client will make requests to, and return to the app. I probably could have kept the database in the client to save this step, but that didn't feel right. Plus, this whole journey is about learning, right?

I installed Nodemon to help here. For those who don't know already, Nodemon is a tool that helps by restarting the Node application everytime a change has been made to the code. This proved to be quite helpful as the trial & error was about to begin.

Getting the server set-up was actually quite easy. I created my server.js file, imported Express & Cors, and declared a variable for my SQLite file. I made a few very basic SQL functions to return all of the teams, all the users, and all of the games played from my database. I then created my app.listen() method to listen on port 8080 (this is important to remember later when setting up the client). This all went pretty smoothly. I did a couple console.log() messages to just troubleshoot some basic stuff, but overall, no big issues.

Here's a look at one of the API functions. This code updates the [teams] array with every user's info, and joins the user's info with their current team's info. So I can access an array from the client later that has all members of the league & what team they are currently controlling.

db.each(
  "SELECT * FROM users INNER JOIN teams ON users.current_team = teams.team_id",
  (error, row) => {
    users.push({
      user_id: row.user_id,
      username: row.username,
      current_team: row.current_team,
      twitch_name: row.twitch_name,
      platform: row.platform,
      school_name: row.school_name,
      team_name: row.nickname,
      team_abbr: row.abbr,
    });
  }
);

Setting up the Client

This is where I anticipated things might get a little tricky. I am still in the process of finishing up my React classes, so I thought I might be getting a bit ahead of myself here, but I had momentum and coffee, so I kept going. I created a separate client folder inside of my project and started a react project. I hit my first speedbump immediately because it was today I learned that create-react-app is no longer the best way to start a React application. After about 30 minutes of Google-Fu, I discovered Vite. To be honest, I don't really fully understand what Vite is besides it's now the best way to get a React project up and off the ground.

My main goal for the night was to create the most basic of basic "Hello World" React apps, with the caveat that I need to successfully access my database that is hosted on the server. For this, I just wanted to list out every user in the User array I posted above.

I am using Axios to fetch a response from my server proxy on port 8080 (the port I set the proxy to listen to as mentioned above) and setting a local array in the client to match what is on the server. Currently, I am just querying and storing the USERS array.

The code below is a basic example of how I am using React useState to fetch a list of all users and their teams. This is utilizing the SQL query I posted above, and exposing that info to the client.

  const [users, setUsers] = useState([]);


  const fetchAPI = async () => {
    const response = await axios.get("http://localhost:8080/api");
    setUsers(response.data.users);
  };

I created a super simple component on the homepage that displays a list of all users and their teams. I will add CSS later, but focusing on functionality now (I love CSS and styling this would derail me for 8 hours).

Each of these names is actually a link to a teams page. I am utilizing React's package to render a page dynamically based on the user that is in the URL.

If the Route path is "/team/:user" (the colon ':' indicates a url parameter), then we are telling React to render the component. The TeamPage component uses the axios fetchAPI to find the USER in USERS where the USERNAME equals the ":user" in the URL. From there we can use this object to return all team info. Right now, I'm just showing the username and their team but eventually this will show records, stats and more!

<BrowserRouter>
      <Routes>
        <Route path="/">
          <Route index element={<Home users={users} />} />
          <Route path="/team/:user" element={<TeamPage />} />
        </Route>
      </Routes>
    </BrowserRouter>

I am over the moon with the progress I have made on this project. I've already gotten further than I thought, with barely any frustrations. The patience I have shown by making sure to study the subject or language before tackling the next step has paid off.

Next, I am finishing my React courses on CodeAcademy because there are still things I don't fully understand that I am currently using (BrowserRouters, UseState, UseEffect) that I want to wrap my head around. I am getting close to an MVP launch! Just waiting for that next ADHD-inspired motivation!