@seanred360
Posted
I would also use a different design for your page routing. You should have a login page and a homepage only. You need to make a "protected route". Basically when the user tries to go to the homepage, the router checks if they are logged in, if not it will not allow them to go to the homepage. Instead it will redirect them to the login page every time they try to go to the homepage. You can see this behavior in my project here. https://www.frontendmentor.io/solutions/full-stack-mern-react-firebase-rest-api-mongodb-L08z7tmdo
This design structure also allows you to forbid a user from viewing an account page that they do not own or an edit page for a comment they do not own.
edit: I see you do have a protected route, I would make the hompage the default "/" and login page as "/login"
You should change your routes to something like this:
<Routes> <Route exact path="/" element={ <Protected> <HomePageNameHere /> </Protected> } /> <Route path="/signup" element={<Signup />} /> </Routes>and change Protected.jsx to
const Protected = ({ children }) => { const { user } = useAuth(); if (!user) { return <Navigate to="/signup" />; }
return children; };
Marked as helpful
@hatwell-jonel
Posted
@seanred360 I want also to address my problem in vercel this is the link [ https://frontendmentor-todo-react.vercel.app/ ] I don't why it throws an error says "firebase invalid key" but I double check my keys it is totally fined.
btw, thank you so much sir for your time and effort. I am so happy that there are people like you to willing to teach/help aspiring developer like me.
@seanred360
Posted
@hatwell-jonel The vercel errors mean you did not set the environment variables within the vercel website. You must manually put these variables in the vercel website and set them to the real values from Firebase. Do not spell them wrong.
REACT_APP_FIREBASE_API_KEY, REACT_APP_FIREBASE_AUTH_DOMAIN, REACT_APP_FIREBASE_DATABASE_URL, REACT_APP_FIREBASE_PROJECT_ID, REACT_APP_FIREBASE_STORAGE_BUCKET, REACT_APP_FIREBASE_MESSAGING_SENDER_ID, REACT_APP_FIREBASE_APP_ID, REACT_APP_FIREBASE_MEASUREMENT_ID,
Marked as helpful
@hatwell-jonel
Posted
Hello @seanred360,
I saw your portfolio and i am really amazed how you developed it. now I am developing my own portfolio and I just want to ask how did you do the GIFs on your projects in My Works section of your portfolio?
Thank you.
@seanred360
Posted
@hatwell-jonel It is the React awesome slider. I do not use gif, I use MP4 because the file size for gifs is too large. You can record a mp4 of your site with the Google Chrome extension, Loom.
Marked as helpful