Frontend Skeleton

Devlog #1

FormulaOS, a little OS for F1 lovers.

Progress

I really just added a lot of the skeleton/components I will be using throughout this project. For example, I made a reusable window component. It currently has a full screen button working but isn’t freely resizable by the user like actual OS windows typically are.

Next Steps

• Find a better color scheme?
  • Add wallpapers (although I might save this for later)
• Add a bottom bar
• Clock and maybe calendar widget(s)
• Add more apps (I’ll decide which ones to add later)
• F1 themed fonts?

Frontend Skeleton In Progress

Devlog #1

I’ve got a rudimentary frontend skeleton set up for Anidex (our online nature almanac). I’m not completely sure I want to keep it like this though. The other option is to have a completely solid background based on light/dark mode.

What I’ve Done

• Made the shadcn sidebar collapse into icons
  • Add said icons
• Added an indicator of which page you’re on on the sidebar
• Used the useSidebar hook to dynamically change the width of the main content on the screen
• Added the main image in the root layout.tsx file
  • Added a slight blur to it
  • Tinted it slightly based on light/dark mode

Next Steps

• Revert back to the solid background we had before if we don’t like it or can’t make it work (it looks kind of ugly in light mode).
• Finish the rest of the skeleton on the other pages (as seen on the sidebar)

I’m Promise I’m Done Now

Devlog #12

I know I said I was done with this project in the last devlog, but I lied (I’m sorry).

Why I Wasn’t Actually Finished

The short answer is that I didn’t properly check my website (rookie mistake). The long answer is much more long-winded (obviously).

After I fixed the issue of my static assets not showing up, I forgot to check whether FRCdle and FRC Trivia were working. Spoiler alert, they weren’t. Every time I tried fetching data from my backend, the request would always bounce back with a 404 server not found error because my backend wasn’t actually running. I eventually found that Vercel Services was a thing and tried using that to have both my Next.js frontend and Express backend run on the same project. Another spoiler alert, it didn’t work. I tried basically everything to get Vercel Services to work, but to no avail. Like before, my backend was never started by Vercel which caused requests to bounce back with a 404 error. Sometimes, I’d even have my frontend code not show up at all because Vercel would occasionally show a 404 no code error. After all this trial and error, I eventually decided to ditch Vercel Services in favor of hosting my backend on Render, a dedicated backend hosting service (my frontend is still on Vercel). Getting Render to work was so much easier than getting Vercel Services to work. It took me around half an hour to get up and running compared to probably over five hours to try and get Vercel Services running. The only potential issue with Render is that after 15 minutes of inactivity, the server “spins down” (becomes inactive) and takes around one minute to reactivate.

Last Steps

Get this project finally shipped!
I still need to add more trivia questions (I haven’t added any since I found out that my backend fetches didn’t work).
Feel free to check it out at fluxrobotics.vercel.app!

Done and Dusted

Devlog #11

I’m finally done with this project (technically speaking). I hosted this project on Vercel which wasn’t as smooth as it should have been.

The Hosting Process

I ran into so many errors while hosting. WAY TOO MANY. Connecting my GitHub repository to Vercel was straightforward but everything else wasn’t at all. I first ran into build errors when pushing code to GitHub which would then get deployed to my Vercel project. If I remember correctly, the fix was to make sure Vercel tracked the correct root folder (my frontend folder in this case because that’s what it serves to the client side/frontend). After that, my website couldn’t access my Express backend. The fix to that was to have different URL fetch paths depending on whether I was running my code in my development environment or on Vercel. I believe I also had to change where my backend controller was mounted in Express (I had to add “/api” to the front of the path). My last issue was my static assets not loading while in production (they loaded just fine in development). The solution was found in my vercel.json file. I originally had a global catch all path that Vercel used to catch all frontend requests. This global path, however, caught requests that asked for my static assets, thereby not letting them appear on the frontend. Removing the global path and only having my backend redirect path solved this issue.

That’s it! I will ship this project as soon as I get more questions into FRC Trivia!

FRCdle Again

Devlog #10

THE STATBOTICS API IS BACK UP AGAIN (we’re so back). This means I can finally polish up FRCdle again.

Big Improvement

I finally got to implement Supabase into FRCdle just like I said I would do for a while now. I’d say this makes FRCdle more fault tolerant since Supabase acts as a backup for whenever either the Blue Alliance or Statbotics API is down (or both). Essentially what I’ve done is have the user fetch data from the two APIs whenever they want area and/or team data. If one or both of these requests fail, the request(s) will fall back to the Supabase backup where a version of the data is stored. This data updates every six hours only when a user actually requests for it. This has proven to be very beneficial as large area requests such as the request for all FRC team data or regional FRC team data tend to bounce back with API error codes.

What about FRC Clicker?

There’s not much to say about this for this devlog. I added a few more upgrades and items, but that’s really it.

Next Steps

• Finish up FRC Clicker
  • Get the last items done
    • Get their corresponding one-time upgrades done

I’ve Been Busy

Devlog #9

It’s been way too long since my last devlog, but I’ve gotten a pretty decent amount of progress on my FRC clicker game!

Progress

I’ve modeled my game off of popular idle clicker games, with Cookie Clicker being my main inspiration. My game, just like Cookie Clicker, allows you to buy items such as motors and cameras (just like cursors and grandmas in Cookie Clicker) in return for more game pieces (the default is currently fuel and I plan on letting the user change which game piece from previous years they want). The prices for these items, like all clicker games, increases exponentially (around 1.2 to 1.3 times so far) while only promising linear gains. Cookie Clicker also has one-time upgrades that give permanent boosts to either your items or overall production. I have this too (though not many of them right now)!

Annoying Little Thing

Tooltips. They provide little bits of additional information as a sort of clarifier for what is presented before you. Creating them seemed deceptively easy. Make the child tooltip absolutely positioned in relation to your relatively positioned parent container and you’re all set, right? Wrong. The way my side bar/container is set up has the tooltip nested so far within divs that even if I were to apply the relative and absolute structure, the tooltip would be cut off by one of the ancestor divs. Literally all I had to do to fix this was not make the tooltip’s parent container relative (the tooltip is still absolute). I don’t fully know why this works, but I’m not complaining.

Next Steps

Get the next upgrades into FRC clicker. Also revisit FRCdle to get Supabase implemented for it (really only will happen once the Statbotics API is back up again).

Finished FRC Trivia

Devlog #8

It has been a while since my last devlog and I haven’t gotten too much done hours wise on this project (I’ve been busy with life). I did just finish FRC Trivia though!

The Game

FRC Trivia is exactly what it sounds like: the user is prompted with an FRC themed trivia question that they must attempt to answer correctly. Before the questions start rolling in, the user is prompted to select items from four different categories that will affect the questions they receive: the core category (general FIRST knowledge, events, awards, team), era/time period (historical, current, upcoming), difficulty (easy, medium, hard), and answer type (MCQ, FRQ, true or false). After selecting their preferred question categories, the correct questions will be fetched from Supabase and shown on the user’s screen.

I haven’t added many questions yet (I have a grand total of 53) and most of them are Hall of Fame questions that I barely know anything about.

Next Steps

I really want to make sure FRCdle is working, but with the Statbotics API down, there’s not much I can really do with that. I could add modes to FRC Trivia (like lightning round) but that is a low priority. I will probably shift my attention to another FRC game.

Rough Implementation of Supabase

Devlog #7

I decided to implement Supabase due to how frequently the Statbotics API has been down recently. It also doubles as a place to store hundreds of trivia questions (I currently only have 40). Since Supabase is an SQL database, data within it is stored in tables, making it much more structured compared to No-SQL databases such as Firestore.

Issue (and Solution)

It took me much longer than it should have to get question filtering properly implemented for FRC trivia. Each question has a core category, era (time period), difficulty (easy, medium, or hard), and answer type (multiple choice, true or false, free response). Using the Supabase typescript .in() operator (used with the WHERE function in an SQL Editor), I can filter questions by their properties using .in() as a sort of shorthand for the logical OR operator.

The issue with this is that .in() only accepts a string parameter (which is easy enough) and a parameter with the type (string | readonly | null)[] (which is the issue here). Since I’m getting my second parameter from req.query, my Express backend will automatically group duplicate queries into a string array. However, any queries that are not duplicated will be saved as a string instead of a string array (even if I try forcing it to be a string array by using as string[]). This causes .in() to break since the second parameter has to be a string array. The fix here, which took me way too long to figure out, was to create a new variable for each query requirement and assign it a value depending on if the original requirement is an array or not. If the original requirement was an array, then the new variable will just be the exact same as the original requirement (since we need a string array anyways). On the other hand, if the original requirement wasn’t a string array already, we can just wrap the original requirement in brackets. To make sure the types of this new variable and the second parameter for .in() sufficiently overlap, we get the new variable as (string | null)[] . For example, const eras = (Array.isArray(era) ? era : [era]) as (string | null)[]. This ensures that eras will be a string array (or potentially null) and lets us use it within .in().

And now I can finally fetch questions from Supabase!

Next Steps

Get questions to show up on the frontend (that’s really it).

Done With FRCdle (technically)

Devlog #6

I’m finally finished with FRCdle (it took me way too long). Statbotics broke again so I’ve only been able to test with hardcoded data. I will go back and retest FRCdle once Statbotics is back up.

Issues

I really only faced one problem and that was my use effect refusing to fire again when I clicked on a button in the parent element. This use effect was supposed to reset FRCdle to its starting state and I fixed it by adding another use effect (fighting fire with fire here).

Accomplishments

The obvious one is that I finished FRCdle! The background colors for each cell in the table update based on how close the guess was to the randomly selected team. The text in each cell also indicates whether the guess was too high or too low where applicable.

Next Steps

I will be working on the robotics trivia portion of the app now. I’ll eventually come back and retest FRCdle when the Statbotics API is fixed (I hope it happens soon).

edit:
I just realized that if I wanted to circumvent the issue of Statbotics (or maybe even the Blue Alliance) API down, I could have new, changed data be pushed to a database, that way if either API goes down, the user will still be able to play albeit with potentially outdated data. My only issue with this is how annoying it was to host one of my past projects that used Firestore/Firebase (it took me around two weeks of constant debugging to get my backend properly hosted). This might be too big of an improvement to ignore though, so I might add a database. Should I stick with Firebase/Firestore or should I switch to another database like MongoDB or Supabase?

Mostly Done With FRCdle

Devlog #5

I am nearly done with FRCdle (finally). While Statbotics was down (it’s finally back up!), I essentially had to create “pseudodata” in order to properly test adding teams to the table.

Issues

I had a lot of trouble with async function timings. The async function I had fetching the data for a random team tried running at the same time as the async function that fetched the data for teams in an area. This caused an error in the former function since it was trying to fetch a team before it even knew what area to fetch it from. The fix was really simple: I added another useEffect that ran whenever the area data was fully pushed to its useState or whenever the difficulty changed.

Accomplishments

The difficulty calculation works. It takes the EPA rank and area (points) rank for each team in an area, scales them in reverse order (in an area with 75 teams, 1st place gets 75 points all the way down to 75th place which gets 1 point), and averages the two new point values with a higher score making a team easier to guess. For example, if the user selects California in easy difficulty, the randomly selected team might be 4414 or 254 since their scores are much higher than most of the teams in their district.

Next Steps

I can finally get the actual guessing portion of FRCdle done (I know I’ve been saying this for several devlogs, but I will actually do it now).

Major Roadblock

Devlog #4

Development was going pretty smoothly with my request for every single FRC team being implemented.

The Roadblock

As I was about to start getting the guessing part of FRCdle actually implemented, I got hit with a 500 from Statbotics. I tried again and again and again but I just couldn’t get the API data no matter how hard I tried. I tried clearing my cache and restarting my development environment to no avail. I eventually went to the REST API documentation on Statbotics and tried fetching data directly from there, but I was hit with an error where Statbotics asked me for an API key. I don’t have an API key. I asked a few other people about this issue and they were facing it as well. So now, I think that Statbotics itself is down which means I’ll have to stop backend development for who knows how long.

Next Steps

There isn’t much I can do. I can work more on the frontend but as long as Statbotics is down, I won’t be getting much progress.

FRC Wordle Clone Almost Complete

Devlog #3

I am (finally) almost done with the data fetching portion of “FRCdle.” I’ve been fetching data from both the Blue Alliance API and Statbotics API.

Annoying Issues (and Odd Solution)

I had to figure out how to fetch data for teams in the regional system from the Statbotics API. This API, unlike the Blue Alliance API, doesn’t have a designated method for fetching teams in this system (as compared to the district system which it does let you directly fetch data for). To circumvent this, I used the same endpoint the API uses to send district data. However, I kept the district parameter empty, thereby (mostly) forcing the API to return regional teams. Since this particular API request can only return 1000 teams at once, I had to fetch several times, increasing the offset by 1000 each time until the length of the returned data was less than 1000. This may not be the best development practice, but it is one of, if not the only way to get regional data from Statbotics (luckily it is much easier to get regional data from the Blue Alliance API).

Next Steps

I have to finish the API request for fetching all FRC teams. Next, I have to finish my difficulty calculations by taking in a team’s EPA rank within the user-chosen area and their area rank (points rank), scaling them from 1-10 (the higher the rank, the higher the number from 1-10), and then taking the average of the two new values. Lastly, I have to implement the wordle part of this game (guessing teams along with color indicators for how close a player is to the correct team).

Beginnings of a Wordle Clone

Devlog #2

I started making lots of progress on the wordle page (specifically FRC wordle). It took me way longer than I’d admit to (even though I can’t hide how much time I’ve logged on this one devlog).

Big Accomplishment

I finally got my backend up and running! It took me way too long mostly in part due to nodemon and express acting up. I spent way too long trying to figure out why my fetch statement on the frontend wasn’t actually fetching anything from the backend (it was basically a one line fix too).

Next Steps

I need to add a user input that lets the user dictate where their game of wordle goes. Right now, the only way to change the data on the table is to change the hardcoded team number (users can’t do that). Then I need to add the colors (green, yellow, and grey) for guesses and actually have new rows add onto the table (styling the table is also a priority).

Landing Page

Devlog #1

I’m still kind of new to all of this so please bear with me! (How does one format a devlog? Is it like a READme?)

This project (as the project title somewhat suggests) houses several robotics (specifically FIRST Robotics) themed games. I guess you can think of it as a neal.fun knockoff for robotics (but maybe not as fun).

I did start this project before Stardance, but I didn’t get too much done with it before. The majority of the time I have spent thus far (after the start of Stardance) was spent familiarizing myself with Next JS and Tailwind as I have really only used React JS and Native along with straight CSS files before.

I tried going for the effect that large companies (mainly Google from what I’ve seen) have done with their buttons and other parts of their UI with a gradient effect with their border. I think it’s coming along pretty nicely but Tailwind has a lot of constraints that make replicating it nicely very annoying (either that or I’m just not good at Tailwind).

I’ve also created four buttons so far with the same border gradient effect with each button leading the user to a different game page (none of them are set up yet and each one might take a bit). You do have to scroll down to see the buttons so they aren’t included in the screenshot of the landing page.

(Please name suggestions please. Flux is just an arbitrary name I chose.)