CatImageShop

CatImageShop

10 devlogs
18h 25m
Created by shurgbee

A store website where you can buy images of cats.

Submission for YSWS Reactive

Timeline

FINALLY UPLOADED TO REACTIVE!! πŸŽ‰πŸŽ‰
I ran into a bunch of issues between finishing the product and uploading it:
Build Errors (aggressive eslint configs but whatever it was easy to fix)
Provider Errors: Cloudflare uses something called OpenNext to build the app for cloudflare workers, but opennext is broken on windows and recommends wsl so I just swapped to vercel
DB Errors: Had to swap from localhost to Neon (was going to use Tembo but they shut down RIP πŸ•Š)

I'm not done with working on it for SoM but I'm 100% taking a break (put in ~16+ hours in 3 days and I think I'm developing carpal tunnelπŸ’€)

Update attachment

Good News! We're in the home stretch for the MVP for Reactive!

Bad News! I spent 2 hours debugging some server error Server Functions Must be Async. Turns out, having all of your types in the server function makes everything a server component which is NOT fun. Fixed that and made some other changes (cart icon, added carousel loading). UI is screwed up but it won't be too crazy of a fix. See you in 2 hrs :)

Update attachment

Finished out the Checkout Page will 99% of it's functionality (i'll leave the styling issues to be resolved after the MVP is shipped)
Also implemented the localStorage Cart parsing and writing (had to learn about Maps the hard way)

Update attachment

A LOT of work has been finish since last devlog:
- MVP for Checkout (took FOREVER)
- Adjusted the formatting how the website deals with the cart
- Added Skeleton Render for items Page

Update attachment

Added items slug page w/ hydration from server components as well as shopping cart logic. Next will be shopping cart page, cart icon, and carousel hydration.

Update attachment

Fully Setup Drizzle ORM, and implemented the autocomplete function. Next will probably be the Items Page that uses nested routes

Update attachment

I started working towards the searchbar (figured out how to mcguyver a solution using the popover and command component) and got Drizzle ORM connected (but not setup)

AI DISCLAIMER: I used AI to create PSQL Queries and to generate fake data as well as some debugging some of the errors that came up when setting up Drizzle

Update attachment

I spent 2 AND A HALF HOURS TRYING TO MESS WITH TAILWIND COMPONENTS TO FIX THE CARD >:((((( (and added a searchbar that I'll delete later). I'm giving up and starting work on the drizzle orm and searchbar autocomplete as well as item population. I'll come back if I have time later

Update attachment

Started working on the actual website (setting up dev env, creating home page, adding components).

Next is setting up the DB and properly hydrating the components.

Update attachment

I started out on the basic layout of the website after making some mockups. Due date is in 2 days so this is basically a hackathon, meaning I have to lock in and move fast. I planned out the website layout on paper and got the dev env set up.

Update attachment