Created Projects directory page

elevynto commented 1 month ago

Work

This PR includes the creation of a Projects directory page with the below features:

Feat: http://localhost:3000/projects route
Feat: Search bar with button and press Enter submission
Feat: Dynamic filter checkbox generation based on a string[] prop
Feat: Fetch calls to the db based on a full or partial match of the query string provided
Feat: Auto fetches some verified projects on first mount
Feat: The filter tags currently don't get included in the fetch call query to the db but do get processed and console.logged for now
Feat: Created a reusable checkbox component
Fix: Added condition to set the IMAGE_BASE_URL to the devs db URL when set to development env because it couldn't access the images I had uploaded otherwise
Fix: renamed SUPABASE_SERVICE_KEY to be NEXT_PUBLIC_SUPABASE_SERVICE_KEY throughout entire codebase because otherwise it was coming up as undefined and supabase would not fetch see next documentation on this
Refactor: Created a ProjectsGrid component using jsx from ShowcaseGrid so it could be reused in the new projects directory

Caveats

I have a lot of experience with React but not so much with Nextjs. I would double check whether I have implemented best practice (e.g. client/server side rendering guidelines etc.)
I left out the lazy loading aspect of this issue because I would assume the Project Lead would want to choose a library for this (see recommendation below).

Recommendations

For lazy loading I assume you meant the list items not loading until you scroll down to them (virtualization rendering)? If so I'd recommend looking into a library like react-virtuoso.
You might want to look into creating and adding a .prettier file to the codebase this way it will help with aligning everyone's syntax styles.

Video

https://github.com/user-attachments/assets/16ff1af7-ad74-4948-90be-5008b252024b

vercel[bot] commented 1 month ago

@elevynto is attempting to deploy a commit to the Elliot Team on Vercel.

A member of the Team first needs to authorize it.

elliotdotsol commented 1 month ago

Found a major issue 😅

Making the SUPABASE_SERVICE_KEY public would result in anyone being able to access everything from the database (as it overrides RLSO), so hence it must be always called from the server or an api route. Hence it must not be exposed to the public.

Could you repush your PR?

Monad-Pad / gmon.link