GitHub: EricTurner3/simple-react-rss-reader
I have a few goals with this project that I’ve already spent several hours on over the past few nights.
1. Testing out AI based tools for code generation and guidance
Gemini released the new Canvas tool a few days ago which immediately blew my mind. You can give it a prompt and it can not only generate the code but it can also show an interactable preview using mock data. It was very fascinating to me in how this was possible from the one page of code it displays. As I quickly found out if you set up a local project and copy paste the code, the code is either riddled with errors and/or it’s missing a bunch of other things such as dependencies and other project files. I’m not quite sure how they are pulling off the front-end preview using just the code snippet provided, it took me several iterations and prompts to get a good template for just the App.tsx in my app. I spent several hours figuring out the best frontend framework and dependencies to get the app working. Some of the code it generates is calling libraries and components that aren’t always documented, and I had to do a bit of research to figure out if they were real or imagined. Other times, the code is out of order. It calls a variable that is only set later on. Simply reordering the code in a function fixed some of the errors. Overall, there were just a bunch of little things that required me to prompt for more help to figure out what it was trying to do so I could fix it. I also relied on OpenAI’s GPT-4o mini and VS Code’s CoPilot to help assist to see if either of those models could help fix some of the errors.
Once the main application was built, I found that you can’t ask Gemini to make small changes and keep going. The next iteration could completely change variable names or churn out a completely different application with similar parameters, as seen below. I wanted the number of unread items from an RSS feed to show as badges in the sidebar. I was under the impression it used prior context to continue the conversation, but it was not the case, and I instead got a chat message application.
I found when I wanted to explain and work on specific pieces of code, GPT-4o mini was much better at determining context and doing follow-up actions. But Gemini did a great job in getting most of the boilerplate, even though I had to go back through and fix a number of errors
2. Learning about the MERN / MEAN stack
During my time as a full-stack developer, I had built a custom PHP back-end framework that handled routing, database connections and so forth. I never had a true front-end framework such as React or Vue, and instead created my own templating engine using Bootstrap templates and injecting PHP into them. If I needed to reuse a card, I would have a card.php component that could be imported and called multiple times. It was very similar to React, but completely of my own design (and lacking in as nuanced of features and optimizations.
This stack is completely based in JavaScript for both front-end, React, and back-end, NodeJS / Express. When Gemini first created some of the code for the front end, I was immediately aware of my lack of knowledge in this framework. Items such as interfaces, presences and contexts that I was unaware how they functioned or related to each other. It’s been a journey fixing the errors from AI generated code and having a multitude of tabs open to reference some of the dependencies to determine how things should be built. At one point I was trying to do a drag and drop system over multiple contexts and quickly realized that was far out of my scope and to instead just use arrows to move an item up or down an index or to another list was fine for me.
So far, I have a working alpha prototype (seen at the top of this page) that allows the end user to add RSS feeds, assign them to folders and mark items as read. There are still some bugs, and all data is currently only stored in local storage. Occasionally the feed list seems to wipe itself, it might be something to do with states or contexts that I’m not fully knowledgeable about yet.
3. Containerization
As I mentioned above, all data is stored in the local storage in the browser, which is not something I want to do. I’d like data to be stored in a database, so it persists if the browser is closed down or wiped. I don’t currently have plans for any sort of multi-user authentication system or anything, as this project is purely meant to load from publicly available RSS Feeds. I also don’t think it’s helpful to have a full-stack project and then require an end user to have to run a bunch of commands to properly configure the backend and database. I have not built docker containers myself before, but I have used them from other open-source projects. My end goal is to have a full web app that can be ran from a simple docker compose command and immediately allow the user to add and save data into a MongoDB database as easy as possible. After that, we can look into any future enhancements.