outputfield/outputfield-app

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

outputfield-app's Issues

Main artist list format incorrectly when sort by genre

Names are on new lines. Add ul.flex wrapper to list items under each genre

Dynamic content/ social media links

• Info dialog content
• Discord Link
• IG Link

Shortlist drag behavior

"Sometimes when I drag a name [within] the shortlist, the window starts going down with my mouse,..."

DraggableName cursor grab/grabbing

E2E Test: Sorting/Filtering

• Date (default)
• A- Z
• Location
• Genre

Change "Suggest" text to read "Nominate"

(across site)

Run crawler.mjs periodically

crawler for capturing website screenshots

Navbar

• Shadcn Navigation Menu
• OPF logo, Info ("/info"), Suggest ("/suggest"), Discord, IG

Behavior

• vanishes on scroll down
• re-appear onscroll up

[Admin] Loading feedback on update nominee status

Short list copy error

When copying the shortlist names, the result outputs things with two spaces before the name or two spaces before the info

Sort By: alphabetical

Drag name out of shortlist puts it "back into place"

• set top and left to 0?

Restrict Google API key

• add prod and dev sites

See docs

Sort By: date added

DraggableName's should link to artist's webpage

processNewArtist not working

When a nominee is approved, processNewArtist fails because Chromium hasn't been setup for playwright to use. Explore alternative that automatically installs browser, such as Puppeteer (https://pptr.dev/#installation)

Export selected Artists

1. Click on a wand icon to enter "list" mode
2. Click on artists to add to a drawer
3. export button in drawer copies Artists to Clipboard in this format:
   

Main drop container too small

Should be full page

Update icons to default (lucide-react)

Integrate Firebase

Using Firebase Admin SDK with Next.js

1. Initialize DB (Cloud Firestore) in console
2. add keys to .env
3. Seed db
4. Refactor get-artists and add-nominee-row to use Firebase

Next steps:

• either:
  • Create a 2 way sync to gsheet ?
  • Create authenticated admin view with table
• Set up Firebase emulators for tests

[E2E Test] Admin View

To test:

• page has title

• logged out page has "Sign In with Google" button

• change to approved

• afterAll: delete test artist and nominee
  

• step: enter new nominee from '/nominate'
  

• expect new row in Admin View
  

• step: approve nominee
  

• expect new artist on landing
  

• expect new artist on landing to have preview image
  

• change to rejected

• afterAll: delete test artist and nominee
  

• step: enter new nominee from '/nominate'
  

• step: approve nominee 
  

• expect _ status in admin view
  

• expect new artist not on landing
  

• change to pending

• afterAll: delete test artist and nominee
  

• step: enter new nominee from '/nominate'
  

• step: approve nominee 
  

• expect _ status in admin view
  

• expect new artist not on landing
  

Suggest Dialog

• Clicking "SUGGEST" from navbar navigates to "/suggest"
• opens NominateForm in a dialog
• Close dialog goes back
• submit NominateForm pushes to "/"
• navigating directly to "/suggest" also opens modal

Zip code prompt instead of native browser geolocation prompt

Update nomenclature

• in filter select, "date" to "Date added"
• "Share" to "Shortlist"

Filter By: Genre

• Group artists by genre (which are sorted A-Z)
• Artists appear once under each genre they work in

Add Genre Options

Update Gsheet with options, and frontend code
From Viv:

New Media
Moving Image
Photography
Fashion & Costume
Sculpture
Generative
Movement & Dance
Sound
Painting & Drawing
Prose & Poetry
Performance
Installation
Graphic Design
Research
Archival
Organizing & Education

Remove period in artist name list

Smaller name text

slightly smaller to fit three (long) names in a row

Enable drag/drop on mobile

https://github.com/LouisBrunner/dnd-multi-backend

Extract artist list sort fns

1. extract sort fns to @lib/utils.ts
2. write unit tests

Replace social media buttons with icons

https://www.radix-ui.com/icons

Page widths on mobile view

Main: drop container max width page.
Nominate: max width page
Info: max width page

[Admin] Auth not working

FirebaseError: Firebase: Error (auth/api-key-expired.-please-renew-the-api-key.).

Draggable Artist Name

• onHover: show preview hovercard
• onClick: links to artists website
• onDrag: freely draggable, with some kind of clever animation

On web:

1. press and hold on a name and move your mouse around; name follows your mouse
2. drag over bottom sticky section opens drawer
3. name drops in. no snap. onDrop dispatch "ADD" artist

** we give some sort of animation/feedback/sound when name is initially dropped in. (see below)

---

https://awarua.github.io/creative-coding/tutorials/tut06/
https://editor.p5js.org/creativecoding/sketches/ncNWaEkTw
https://p5js.org/reference/#/p5.Font/textToPoints

API Route for adding a nominee to Firestore DB

Info Dialog

• Clicking "Info" from navbar navigates to "/info"
• opens Info dialog
• dialog close pushes to "/"
• Navigating directly to "/info" alsoopens Info dialog (parallel routes)

E2E Test: AXE Accessibility test

E2E Test: NominateForm

Develop Playwright tests for:

• overall accessibility at "/suggest"
• accessible feedback on invalid entries
• accessible feedback on valid entries/submission
• successful submission creates new row in Approval GSheet

Refactor crawler to read from Firestore

(artist's website screenshot crawler)

Sort By: distance from user

1. Request user geolocation
2. Calculate distance, sort artist list by distance from user - SO post on calculation using lat/lng

Add "Email" to nomination form

Verify admin with Google Cloud Function

Verifying user with allow list for /admin should not be done on client side. This is a good application for Google Cloud Function (https://firebase.google.com/docs/auth/extend-with-blocking-functions?gen=2nd)

Hide "share"drawer on mouse off

It takes up a lot of room when full of names

Make social media icons text

No icons

Places Autocomplete

Using Google Maps API (Places Autocomplete Service), implement an autocomplete component for the Suggest (Nomination) form.

Admin Nominee View

• Google authentication
• Shadcn Data Table
  • Default sort by status field
  • Firestore action to change status from "Pending" nominee to "Rejected" or "Approved"
    • on "Rejected" ...
    • on "Approved" copy document to "artists" table, with date_added as Date.now(), AND trigger crawler