jamesqquick / dev-desks

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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

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.

dev-desks's Issues

change primary field in airtable to be `username` instead of `imgId`

Create Default Record for User in Airtable on first Login

A record in Airtable should be created when a user logs in for the first time. This would include their username, an empty uses link, and either a blank imgId or one that points to a placeholder image.

THis could be triggered if a user visits their profile page but the profile doesn't exist yet. Go ahead and create it.

Make Sure User is Created When Loggin in the First Time

The user record needs to be populated in Airtable after logging the first time

Add Redirects File or Update Netlify.toml for Accessing Route Directly

Netlify needs to redirect all traffic to the root page so that the Single Page App can handle client-side routing.

Example using _redirects file.

Example in Netlify.toml

initial automated test setup with Jest

Dark Mode!

Migrate to Next.js

Styling For React Alerts Doesn't Work in Production

AlertTemplate styling works locally but not when deployed. Maybe something to do with the tailwind build process?

Admin Approval Dashboard

finish dashboard for approving images. Can give admin roles to other users in Auth0 as well.

fix size limit on image upload

no idea how to do this... lol

Alternatively, we can limit the size of an upload

Fix Storage Bloat in Cloudinary

Every time a user uploads an image multiple images are being saved. We only want one at a time

One of two things

• Delete Previous Image on Image Upload
• update image but keep id

Property in Airtable for Whether or Not an Image is Approved

need a checkbox for approved image

Twitter @ should link to the user's twitter

I know there's a twitter icon below the user's description, but I feel like the default behaviour I expect when seeing a twitter handle e.g. @TekGadgt is that clicking on it will take me to the related twitter account.

Route to Display Random Image

Need the route to retrieve a random username and then request info for that user and display it.

Add Alerts

Notifications When New Images Are Uploaded

Automated admin notifications when approval is needed for a new image

lazy loading on profile image

lazy loading on desk images

Upgrade to Serverless JWT Package for JWT Verification in API

style user profile page

should show image upload and uses link input

Display profile picture inline horizontally with upload widget

Use the new React SDK by Auth0 instead of the old implementation

Create Modal Component for Popups

• profile update form
• image upload form

display public profile page (username, desk image, and uses page link)

Images are Full Width on Mobile

Add Skeleton UI to Home Page and Profile Page

Should display placeholder images while data is being loaded.

https://github.com/buildo/react-placeholder

Context API/React Query for Tracking Desk Images

Every time we navigate back home, we should show images from local cache before calling for most recent ones.

Adding Tags to Images

...?

Popup for full screen image from profile page

When a user clicks on the profile image of another user it should show a fullscreen popup of the desk setup image

Display placeholder image for profile picture before user has uploaded the desk image

Direct User to Fill Out Profile When Logging in For First Time

We should encourage users to fill out their profile while also automatically creating a record for them in Airtable after logging in through Auth0 for the first time

styling public profile page

big desk setup image as header with username and twitter/uses links

Store user `uses` page link in Airtable (update serverless function to accept that property and upload to Airtable)

Create and display loading indicator where appropriate

Add Context API for Tracking Saved User

Add Additional Profile Properties

twitter handle
github username
uses link
short bio

clicking on desk image will take you to user's profile page

Store Users by AUth0 Sub Property

We should be storing users in Airtable by the sub property that comes from Auth0. this is the true unique id for a given user

Move away from bootstrap to plain CSS? Tailwind?

Add form field in profile page to upload a link to their uses page

Create Authenticated Fetch Function

This fetch function will be reused in any place that needs to make an authenticated call to the backend. This function should grab the access token from the user and include it in the request

Add User Description to Airtable

Grab the user Twitter description from the logged in user (from Auth0) and save into Airtable

Only Display Images That Are Approved

update serverless function querying images to only get ones that are approved.

Add Navigation between setups without closing details view

Could be lightbox style with arrows and keyboard navigation.