So I wanted to finish this project at the end of the last week to get some stickers but as you can tell I failed horribly to meet that deadline. So I wanted to make a simple web scraper that would gather info about anime conventions and a simple frontend for it (why did I choose this well my friend REALLY likes attending those events and he was constantly talking about it nad it got kinda stuck in my head and since the website that he uses to find those events is quite old I decided to build something new) but as it turned out the front end wasnt easy at all bc I’ve never used nextJs before.

WHY DID I DECIDE TO USE NEXT EVEN THO I HAVE NO IDEA WHY TO USE IT

So why did I decide to use it then wellllll I was talking to my friend on discord and I asked him how do I make a simple front end quickly bc the deadline was approaching and he told me “oh yeah just use shadcn and nextJs”… .

THE BACKEND: Python, Selenium, and Flask

So I starded building the web scraper which im actually quite okay at since I’ve done that before. I’ve used Selenium for navigating the website and BeautifulSoup for scraping the data which I was saving to json and using Flask for making the api and that was it the only a bit tricky thing was that the buttons on the website were acting as filters for some reason ??? but once I figured it out it was all good.

FRONTEND…(it was bad)

And for the front end uhmmmm yeah it is VERY bad and it took me wayyy longer then it should I never could have imagined that something as simple as building a table with some data and changing it based on a year could be this hard… At first I decided to play around with nextjs and use states which went quite good I kind of understood them (at a very basic level) then the struggle came rendering the buttons (they dont even look like buttons lmao) dynamicly from the api. Since I’ve never used TypeScript, Next.js, React and Tailwind I had to learn everything from scratch like props and everything else but once I figured props out it the buttons were easy to make. Then came time for the table which went really smooth since it was just a shadcn table. But I wasnt prepared at all for the next part which was changing the contents of the table after clicking the year button (more like text bc it doesnt look like a button at all) So after many different approaches I came up with this:

1. The user clicks a year.
   2)The app creates a URLSearchParams object from the current query string after that it adds or updates the year parameter and builds a new URL amd it replaces the current URL using window.history.pushState.
   3)The getData function fetches the new data from the API.
   4)My renderTable.tsx component catches the new data and updates the table.

WHAT WILL I DO NEXT

And yeah thats it… it was way harder then I thought it would be but I learned something about nextJs I guess and yeah I will be probably continue to work on it and use it as a project to learn nextJs on