Leila Adam

Leila Adam

20 Oct

Quest 2 of my frontend build is complete. I am building the website for the Dr. Kwame Nkrumah Political Youth Fun Club as part of my work with EGA Mentorship International. This quest was the Home feed: a card for each post showing a cover image, title and short preview, loaded live from my Supabase database, with a Load more button that fetches three posts at a time. Problem 1: React refused to show my page. I had a heading and a group of cards sitting side by side in the same return, and React threw an error about needing an enclosing tag. I first read that as “closing tag” and looked in the wrong place. Fix: a component can only hand back one thing, so I wrapped both parts in a single fragment. Lesson: read an error message word by word, because one word can change its whole meaning. Problem 2: my cover image would not load, and the console showed no error. A broken image never throws a JavaScript error, so the console stayed quiet. I compared the file name stored in my database with the real file and found one word was different: coverimage instead of coverpage. Fix: I matched the name exactly. Lesson: computers match names letter for letter. A broken icon means the path is wrong, while no image at all means the value is empty. What I took from it: a component is a function that returns a piece of the page, props are the information you pass into it, and state is how a page remembers things and redraws when they change. Twelve quests to go. Next is the article page for a single post. #React #Supabase #LearningInPublic #WebDevelopment

Leila Adam

15 Oct

Quest 1 of my frontend build is complete. I am building the website for the Dr. Kwame Nkrumah Political Youth Fun Club as part of my work with EGA Mentorship International. This is my first time learning to code and building a real project at the same time, so I started with foundations only: a React app with Vite, a routing skeleton with placeholder pages, and a connection to Supabase. Problem 1: the Supabase package would not install. The terminal stalled halfway through the download because my internet connection kept dropping. Fix: I waited until the connection was stable, reran the install, and checked that it appeared in my project’s dependencies before moving on. Problem 2: my test query seemed to do nothing. I had written code to fetch rows from a posts table, but my page only showed the heading “Home”, so I assumed it had failed. The result was never meant to appear on the page. It prints to the browser console. When I opened the console, it showed a 404 error on the posts request. That error was useful: a wrong key or URL would never have received a reply, so a 404 meant my app had reached Supabase and the table simply did not exist yet. Fix: I created the table in the Supabase SQL Editor, switched on Row Level Security, added a policy allowing public reads, and inserted a test row. After a refresh, the console returned my row with no error. What I took from it: set up the empty frame first, so that later bugs belong to the feature and not to the setup. Also, read the error closely before assuming something is broken. Thirteen quests to go. Next is the Home feed. #React #Supabase #LearningInPublic #WebDevelopment