Conversation
| @@ -0,0 +1 @@ | |||
| VITE_YT_API_KEY=AIzaSyDkIk_NusumqppZBW-JhaQM75EZRL5s-To | |||
There was a problem hiding this comment.
Include .env file in gitignore. Push a .env.sample file with blank secrets instead. Never add secrets to repo.
| import React from "react"; | ||
| import ReactDOM from "react-dom/client"; | ||
| import { BrowserRouter } from "react-router-dom"; | ||
| import App from "./App"; |
There was a problem hiding this comment.
better to use absolute paths for imports
| @@ -0,0 +1,18 @@ | |||
| import React from "react"; | |||
| import ReactDOM from "react-dom/client"; | |||
| import { BrowserRouter } from "react-router-dom"; | |||
There was a problem hiding this comment.
use code formatters like prettier and auto sort to create separation between different types of imports, 3rd party and local etc
There was a problem hiding this comment.
remain consistent in use of tab space (2 spaces for tab is preferred)
There was a problem hiding this comment.
we can merge it with index.css
| return ( | ||
| <Card> | ||
| <CardContent> | ||
| <div style={{ position: "relative", paddingTop: "56.25%" }}> |
There was a problem hiding this comment.
for consistency use <Box instead of <div
| useEffect(() => { | ||
| if (!activeChip || activeChip === "All") return; | ||
| runSearch(activeChip); | ||
| }, [activeChip, runSearch]); |
There was a problem hiding this comment.
shouldn't be an effect
| useEffect(() => { | ||
| if (!videos?.length) runSearch("React tutorials"); | ||
| }, [videos?.length, runSearch]); |
|
|
||
| const handleNavigate = (path) => { | ||
| navigate(path); | ||
| if (!isDesktop) setSidebarOpen(false); |
There was a problem hiding this comment.
this line isn't required due to first useEffect
| sx={{ | ||
| borderBottom: "1px solid", | ||
| borderColor: "divider", | ||
| zIndex: (theme) => theme.zIndex.drawer + 1, | ||
| backgroundColor: "background.paper", | ||
| }} |
There was a problem hiding this comment.
in future lets use emotion styled() for styling
2 participants
This PR introduces the complete initial setup of the project using React + Vite. It includes the base architecture, core components, global state management, error handling, and essential configurations. The foundation is structured for scalability, performance, and future feature development.
Demo:
Uploading Screen Recording 2026-01-15 at 1.52.38 PM.zip…