Kelvin branch #1
Conversation
| import LoginSignUp from "./Components/LoginSignup"; | ||
| import PostDisplay from "./Components/PostDisplay"; | ||
| import { createBrowserRouter, RouterProvider } from "react-router-dom"; | ||
| import Navbar from "./Components/Navbar"; | ||
|
|
||
| function App() { |
There was a problem hiding this comment.
Nice work lifting up the required states
| }); | ||
| }, []); | ||
| const [isLoggedIn, setIsLoggedIn] = useState(false); | ||
| const [user, setUser] = useState({}); | ||
|
|
There was a problem hiding this comment.
Nice setup of the createBrowserRouter, Consider using nested routes so you dont need to use navbar multiple times
| </> | ||
| <div className="bg-gradient-to-b from-cyan-300 to-white-100 shadow-2xl dark:bg-grey-400 px-3 py-2 rounded-lg"> | ||
| <h1 className="text-2xl font-bold text-rose-500 mb-4">Rocketgram</h1> | ||
|
|
There was a problem hiding this comment.
Generally and conventionally the RouterProvider is a self closing element:
| @@ -0,0 +1,52 @@ | |||
| import { useState } from "react"; | |||
There was a problem hiding this comment.
Great work making this into a single component!
Nice use of tailwind styling
| @@ -0,0 +1,10 @@ | |||
| import { Link } from "react-router-dom"; | |||
There was a problem hiding this comment.
You could use conditionals and props to hide the signup and login button if they are logged in
| console.log("File Input:", fileInputFile); | ||
| await uploadBytes(storageRefInstance, fileInputFile); | ||
| const url = await getDownloadURL(storageRefInstance); | ||
| set(newMessageRef, { |
There was a problem hiding this comment.
Comment and Timestamp should by convention be lower cased.
| <div className="card"> | ||
| {Object.keys(user).length !== 0 ? <p> welcome, {user.email} </p> : null} | ||
| <br /> | ||
| {IsLoggedIn ? ( |
There was a problem hiding this comment.
Technically would work better on the navigation bar, either show logout button or signup/ signin button.
Nice utilisation of tailwind CSS properties
| {/* SUB-SECTION: IMG RENDER */} | ||
| <div> | ||
| <h2 className="p-2 text-lg">Time & Date</h2> | ||
| <ul> |
There was a problem hiding this comment.
Smart UI thinking to show the newest post first.
| @@ -0,0 +1,24 @@ | |||
| // Import the functions you need from the SDKs you need | |||
There was a problem hiding this comment.
Great and conventional setup of firebase
| @@ -0,0 +1,13 @@ | |||
| /** @type {import('tailwindcss').Config} */ | |||
There was a problem hiding this comment.
Nice start to use tailwind css for styling well done
No description provided.