Happy Thoughts - Assignment by qabalany · Pull Request #57 · Technigo/js-project-happy-thoughts

qabalany · 2025-12-13T11:41:59Z

Live Demo

The original Technigo API was down (503 Service Unavailable) during development, so I built my own backend using Supabase.

…ling

Demijuls · 2025-12-15T09:41:04Z

src/App.jsx

+    event.preventDefault()
+
+    if (!newMessage.trim()) return
+    if (newMessage.length < 5 || newMessage.length > 140) return


I'm not sure, but it looks to me that user won't get any feedback from the app here if he is trying to send an empty, too short or too long message? That might be a bit confusing to the user, so maybe would be good to return some kind of feedback or error here?

Good observation! The user does get feedback, the character counter turns red and shows error text, plus the submit button is disabled when invalid. But you're right, making it more obvious could improve UX! 👍

Demijuls · 2025-12-15T09:58:42Z

src/App.jsx

+  // Function to like a thought (UPDATE in Supabase)
+  const handleLikeThought = async (thoughtId) => {
+    // Find current hearts count
+    const thought = thoughts.find(t => t.id === thoughtId)


I don't really understand this part, but it's probably because you use your own backend? Anyway, I would love to learn the reasoning behind it!

Good question! The original Technigo API had a dedicated /thoughts/:id/like endpoint that automatically incremented the hearts count on the server.

Since I built my own backend with Supabase, I'm using a simple database table with just UPDATE operations. So I need to first Find the current hearts count from local state then add 1 to it then send the new value to Supabase

An alternative would be to use Supabase's RPC (Remote Procedure Call) to increment on the server it wasn't easy so i used this easier simpler approach which works just fine for this project! 😊

Demijuls · 2025-12-15T10:11:55Z

src/components/ThoughtCard.jsx

+  return `${days} days ago`
+}
+
+export const ThoughtCard = ({ id, message, hearts, createdAt, onLike }) => {


Good usage of named attributes instead of just props here! Keep it up:)

Demijuls · 2025-12-15T10:14:33Z

src/components/ThoughtCard.jsx

+          <HeartButton 
+            onClick={() => onLike(id)} 
+            $isLiked={isLiked}
+            aria-label={`Like this thought, currently ${hearts} likes`}


Really great that you added aria-label here, way to go!

Demijuls · 2025-12-15T10:21:17Z

src/components/ThoughtForm.jsx

+      />
+      <CharacterCount $count={charCount} aria-live="polite">
+        {charCount}/140 
+        {charCount < 5 && charCount > 0 && ' (min 5 characters)'}


Great user experience here with the feedback to users and not letting them press the button!

Thank you! You always have a good eye for details 😊👍

Demijuls · 2025-12-15T10:38:48Z

src/supabase.js

+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = 'https://qoxtdfojwnokjnmuwazc.supabase.co'
+const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFveHRkZm9qd25va2pubXV3YXpjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjU2MDM3ODUsImV4cCI6MjA4MTE3OTc4NX0.BrH7Sj5ALhX8ka2ZwUKEA--ey3gKtYImZjpI3i2a4wc'


I'm not sure it is a good idea to leave the key open here? But it's beyond the code point anyway:)

Good point! But this anon key is safe to expose. It's designed for frontend use. Supabase protects the database with Row Level Security (RLS) policies, so this key can only read/write what I explicitly allow.

There are updates to the keys that one get from Supabase, check out the transition over to publishable and secret keys from anon and service_role keys here: https://github.com/orgs/supabase/discussions/29260 :)

Npahlfer · 2026-01-15T09:32:59Z

src/components/ThoughtForm.jsx

+  margin: 8px 0 0 0;
+  color: ${props => {
+    if (props.$count < 5) return '#e74c3c'
+    if (props.$count > 140) return '#e74c3c'


Try keeping reused numbers like this in one place as constants. That way it's a lot easier to change!

Thanks ! I updated the code and put the repeated numbers (5, 140, 120) as constants at the top of the file. Now it's much easier if I want to change the limits - I just update one place instead of searching everywhere.

Npahlfer · 2026-01-15T11:36:25Z

Good work! Nice solution with the disabled state an that you set up your own supabase to handle the api. But it's not working and I receive errors.
The cause of why the other api is not working is that one has to visit the url first to get it started first, before using it as an API.
It would have been nice to see the use of localStorage as well so that one can see which likes one has done before.
But check why your supabase requests are not working :)

qabalany · 2026-01-15T19:01:32Z

Hi! Thanks for taking the time to review my code and for the helpful feedback! 😊

You're absolutely right. I checked my Supabase project and it was indeed "sleeping" due to inactivity. I visited the dashboard and the REST endpoint to wake it up, and now everything is working smoothly!

I also read through the GitHub discussion you shared about the upcoming API key changes. Just to clarify - that discussion is about a future migration from legacy JWT keys to the new sb_publishable_ / sb_secret_ format, which won't be required until late 2026. My current issue was simply that free-tier Supabase projects pause after a week of inactivity, not related to the API key migration.

Regarding localStorage I've added localStorage to track liked thoughts. Now when you like a thought, it saves to localStorage, persists after refresh, and prevents duplicate likes.

Also refactored the hardcoded numbers (5, 140, 120) into constants as suggested!

Everything's working now! Should I push these updates in a new commit?

Npahlfer · 2026-01-19T13:16:35Z

Thank you for waking it up, it works fine now!
Thanks for the clarification of the Github discussion. I'm aware. I just wanted to point out that they do recommend the usage of the new keys. No biggie, I just wanted you to check it out :)

https://supabase.com/docs/guides/api/api-keys

anon and service_role keys are based on the project's JWT secret. They are generated when your project is created and can only be changed when you rotate the JWT secret. This can cause significant issues in production applications. Use the publishable and secret keys instead.

Yes, please push the new changes :)

…e sleeping issue

qabalany · 2026-01-23T08:55:20Z

Thanks! I’m starting to understand it better now. that’s a really good point about the new keys. 😊
I’ve pushed the changes. Appreciate the feedback!

…lete, remove supabase

qabalany added 11 commits December 8, 2025 02:13

Setup project and add initial context file

180d63a

Create basic components and static layout for Happy Thoughts

dbcee79

Add basic styling with Styled Components and responsive layout

1d65a71

Implement local state and controlled form for new thoughts

8168531

Fetch latest thoughts from API using useEffect

12c7f54

POST new thought to API

8455260

Add like button with POST to API

bf113a4

Add stretch goals: character counter, loading state, liked hearts sty…

0e8e0d4

…ling

Switch to Supabase backend

4a66c8e

Add character limit message and heart favicon

e41032d

Improve accessibility: focus states and aria attributes

cd7611e

Demijuls reviewed Dec 15, 2025

View reviewed changes

Npahlfer reviewed Jan 15, 2026

View reviewed changes

Implement localStorage for likes, refactor constants, and fix Supabas…

af43d80

…e sleeping issue

qabalany added 5 commits February 4, 2026 11:36

Replace Supabase with backend API

e480d90

Add Edit and Delete functionality

7b2bbb8

Add auth: signup/login UI, token in localStorage, conditional edit/de…

67903f5

…lete, remove supabase

Add stretch goals: sort/filter, pagination, liked thoughts

65343b3

Update README

aa8320b

Conversation

qabalany commented Dec 13, 2025

The original Technigo API was down (503 Service Unavailable) during development, so I built my own backend using Supabase.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Npahlfer commented Jan 15, 2026

Uh oh!

qabalany commented Jan 15, 2026

Uh oh!

Npahlfer commented Jan 19, 2026

Uh oh!

qabalany commented Jan 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants