Humans have so many social media platforms. Why pigeons do not? I thought that was sad. So, I went on a mission to create one.
Now, pigeons can have a voice too on the internet.
- Implemented user authantication with Clerk.
- At successful sign-up/sign-in, the user is redirected to their profile page. Very proud of the bouncing pigeon emoji animation! Tailwind is the best <3
- Had a nightmare implementing webhooks. But it works (I think). When a user is created, it triggers it and a new user is inserted in the Supabase table.
- On the profile page, you can see user info like location and bio, and a list of posts by that user. If you are the logged-in user, two forms are visible: one to edit your profile info, and another to create a new post.
- User can delete a post.
- The profile page is one long messy file, but it works :D
- Feed shows posts from everyone.
- I've now been reusing the same sort of design and colour palette for the last three assignments, but it works. And it helps to keep it quick XD
- A 404 custom page with a Radix UI tooltip component (honestly I had no more imagination left by then...)
I think I'm pretty happy with this. The main issue was the planning and designing. The whole of Thursday was spent on that.
Then, the first major issue came up: implementing that Clerk webhook. It took a long time and lots of tries, and was extremely frustrating. But I guess now I know how to do it, so nect time it should be easier.
Radix was also a bit of a pain for a bit, but it turned out it was my fault for doing the wrong import. I think I should just keep the docs side-by-side at all times whilst I'm coding so I don't forget things.
I ran out of time and didn't manage to finish all the styling such as the sign-up and sign-in pages, and the header is not finished. Talking about the header, it reminds me I didn't manage to make it so the user's username appears there lol Completely forgot to get back to it.
I didn't manage to do any other stretch goals except the delete button, but I can add those (and more) in future updates.
Webhooks
- https://clerk.com/docs/nextjs/guides/users/reading
- https://clerk.com/blog/webhooks-getting-started
- https://clerk.com/docs/guides/development/webhooks/syncing
Redirections
- https://nextjs.org/docs/pages/guides/redirecting
- https://dev.to/mehmetakar/nextjs-redirect-to-another-page-gmo
Using server
- https://nextjs.org/docs/app/getting-started/server-and-client-components
- https://nextjs.org/docs/app/api-reference/directives/use-server
Radix library
- https://www.radix-ui.com/themes/docs/overview/getting-started
- https://alignui.com/docs/v1.2/ui/tooltip
- https://www.radix-ui.com/primitives/docs/components/tooltip
Tailwind animation