leerob / fastfeedback Goto Github PK

On my localhost project, I am able to get the skeleton state briefly while the data loads so it gives that nice transition. For some reason on my deployed project on Vercel, it never gets past the skeleton stage. On further inspection of the deployed site, I get a 502 console error that I can't figure out why. Looking to just be pointed in the right direction please and thank you!

Dashboard.js

export default function Dashboard() {
  const { user } = useAuth();
  const { data } = useSWR(user ? ['/api/trails', user.token] : null, fetcher);

  if (!data) {
    return (
      <DashboardShell>
        <TrailTableSkeleton />
      </DashboardShell>
    );
  }

  return (
    <DashboardShell>
      {data?.trails?.length ? (
        <TrailsTable trails={data.trails} />
      ) : (
        <EmptyState />
      )}
    </DashboardShell>
  );
}

Trails.js (Sites.js in tutorial)

import { auth } from '../../lib/firebase-admin';
import { getUserTrails } from '../../lib/db-admin';

export default async (req, res) => {
  try {
    const { uid } = await auth.verifyIdToken(req.headers.token);
    const { trails } = await getUserTrails(uid);

    res.status(200).json({ trails });
  } catch (error) {
    res.status(500).json({ error });
  }
};

So i stumbled upon a bug in the main site.

I tried to login with github(keep in mind that my github and google accounts use the same email), i logged in successfully with my github account. Then i logged out and signed in with my google account that uses the same email as my github. I logged successfully again. The final step was to try and login with github again but i couldn`t do it.

this is the error that was logged in the console.

Hey, @leerob! Great course, absolutely loving it.

I was facing an issue in Vercel deployment. I've coded along till stream:5 where we setup the feedback page with getStaticPaths() and getStaticProps() methods, The app is running absolutely fine in the local environment. However, it is giving errors on vVercel deployment.

`

I have triple checked everything and since it is working correctly in the local environment, is getStaticPaths() an issue here?

Hi @leerob! I love your React 2025 course 👍

Just a tiny issue that I ran into and failed to find solutions online. I tried deploying my code to Vercel and during build time, this is the error:

type: 'FirebaseAppError',
errorInfo: {
  code: 'app/invalid-credential',
  message: 'Service account object must contain a string "project_id" property.'
},

In my firebase.js and firebase-admin.js, I have set the projectId and project_id respectively.
I have also included the environment variables in .env, .env.local and Vercel environment variable settings.

Here we are verifying and decoding the id token on the client side

I'm thinking it's perhaps better to do it on the server side to be safe (i.e. add an api route for this)

Issue Description

I was updating the dependencies in my app which follows a similar design as Fast Feedback. And when I bumped up the Firebase Lib to a new version (7.17.1 -> 7.24.0), all auth.verifyIdToken(req.headers.token) calls on the server-side started failing with the following error:

Decoding Firebase ID token failed. Make sure you passed the entire string JWT which represents an ID token

After troubleshooting it I found out that the token is fetched via user.xa client-side which doesn't work any longer.

Fast Feedback does the same on this line. I didn't verify it but chances are it's exposed to the same problem.

Fix

The solution that worked for me was fetching the token in the following way instead:

const idTokenResult = await user.getIdTokenResult();
const idToken = idTokenResult.token;

Was watching the stream 7: React 2025 – Authentication on API Routes (Firebase JWT)

I can't seem to figure out this error
Error message when I open feedback page for a particular site: Value for argument "value" is not a valid query constraint. Cannot use "undefined" as a Firestore value. If you want to ignore undefined values, enable ignoreUndefinedProperties.

But when I hard code the uid value which is causing the error it works.

Now I can access the page

Public repo: https://github.com/jaymehta20/fastfeedback

Auth Works, Firestore does not respond to createUser and gives no error on screen or in console

I've forked and set up fastfeedback on my GitHub Codespaces.

But the development experience is not good. I don't know if it's an issue with the project itself or Codespaces.

When I run fastfeedback on my local machine, it runs like a charm.

But on Codespaces, when I do port forwarding to see site preview, the backend compiles almost every time a new page is requested.

But sometimes, it doesn't.

Very strange behavior.

Any one had the same experience?

I subscribed to and am following your course React2025. Excellent course! Much appreciated.

I have successfully coded along with you up to Unit 10 ... and decided to fork your project and run the completed app.

I updated the env,local with my keys. When I start the app, the error noted above is encountered in

db-admin.js Line 34
const doc = await db.collection('sites').doc(siteId).get();

The value of site-id is undefined.

It is not clear to me why the app is even retrieving any sites during startup.

Any guidance would on best way to stand up this app ... I am interested in testing it locally and studying the completed code on the Stripe integration in particular

Thanks You!

I am trying to modify my code so that instead of sites being listed with random IDs and the authorId inside, I want to set the document ID to the user and have it be an array so every time a user adds a site it gets pushed into there. This is what I have tried:

Adding a site via modal component:

    const { id } = createSite({
      id: newTrail
    });

In my database this is what I have tried to save it:

export const createSite = async (data) => {
  const site = firestore.collection('sites').doc(user.uid);
  const newSite = await site.update({
    userSites: firebase.firestore.FieldValue.arrayUnion(data),
  });
  return site;
};

I am getting a permissions issue and I thought it was the firebase settings but they all seem right as they verify with the user that is currently logged in.

I am trying to do this so that all the sites for any given user are in one document and easier to request from the frontend.

Hi everyone. Currently, if you are not logged in and you visit /sites or /account you will see a shell of what the page is supposed to look like.

For now, what I have done is just wrap the component in { !user && } to make sure the user is authenticated before it loads. I also put up a "You are currently not logged in" with a button that forwards to the homepage.

What would be the best practice way to check if the user is not validated and route them back to the homepage?

Another attempt I made was a useEffect that would check if the user is valid and if not route them back to the home page. This worked for the most part except refreshing the page would bring you back to the homepage right away and that's not a good experience.

Hoping to get pointed in the right direction, thanks!

I am making app with Firebase (FastFeedBack de React 2025 course) and I got this error

./lib/firebase.js
Attempted import error: 'apps' is not exported from 'firebase/app' (imported as 'firebase').

We can replace the \\n to actual new line (so ppl don't have to remember manually adding new line in vercel)

privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),

While following along the React 2025 course, my app blew up with the error

Attempted import error: 'apps' is not exported from 'firebase/app' (imported as 'firebase').

I looked it up and found out that since Octobre 2020 the a new Firebase SDK version introduced a breaking changes that affects the way it's imported. Explained in link below.
https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020

I guess it should be updated in this repo.

BTW Thanks for the course Lee, it's great!
Cheers!