├── postcss.config.js
├── vite.config.js
├── src
    ├── index.css
    ├── components
    │   └── Home.jsx
    ├── main.jsx
    ├── App.jsx
    └── partials
    │   └── Sidenav.jsx
├── tailwind.config.js
├── .gitignore
├── public
    └── logo.svg
├── README.md
├── index.html
├── .eslintrc.cjs
└── package.json


/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* primary - #1F1E24 */
 6 | /* secondary - #6556CD */
 7 | 
 8 | .link {
 9 |   @apply hover:bg-[#6556CD] hover:text-white duration-300 rounded-lg p-5;
10 | }
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import Sidenav from "../partials/Sidenav";
 2 | 
 3 | const Home = () => {
 4 |   document.title = "SCSDB | Homepage";
 5 |   return (
 6 |     <>
 7 |     <Sidenav/>
 8 |       <div className="w-[80%] h-full bg-[#1F1E24]"></div>
 9 |     </>
10 |   );
11 | };
12 | 
13 | export default Home;
14 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom/client";
 2 | import App from "./App.jsx";
 3 | import "./index.css";
 4 | import { BrowserRouter } from "react-router-dom";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   <BrowserRouter>
 8 |     <App />
 9 |   </BrowserRouter>
10 | );
11 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import Home from "./components/Home";
 2 | import { Routes, Route } from "react-router-dom";
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <div className="w-screen h-screen flex bg-[#1F1E24]">
 7 |       <Routes>
 8 |         <Route path='/' element= {<Home />}/>
 9 |       </Routes>
10 |     </div>
11 |   );
12 | }
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(101,86,205,1)"><path d="M15.4142 4.99998H21.0082C21.556 4.99998 22 5.44461 22 6.00085V19.9991C22 20.5519 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5553 2 19.9991V6.00085C2 5.44808 2.45531 4.99998 2.9918 4.99998H8.58579L6.05025 2.46445L7.46447 1.05023L11.4142 4.99998H12.5858L16.5355 1.05023L17.9497 2.46445L15.4142 4.99998Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>SCSDB | MovieApp</title>
 8 |     <link
 9 |       href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
10 |       rel="stylesheet"
11 |     />
12 |   </head>
13 |   <body>
14 |     <div id="root"></div>
15 |     <script type="module" src="/src/main.jsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scsdb",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^2.2.5",
14 |     "axios": "^1.7.2",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "react-infinite-scroll-component": "^6.1.0",
18 |     "react-player": "^2.16.0",
19 |     "react-redux": "^9.1.2",
20 |     "react-router-dom": "^6.24.0"
21 |   },
22 |   "devDependencies": {
23 |     "@types/react": "^18.3.3",
24 |     "@types/react-dom": "^18.3.0",
25 |     "@vitejs/plugin-react": "^4.3.1",
26 |     "autoprefixer": "^10.4.19",
27 |     "eslint": "^8.57.0",
28 |     "eslint-plugin-react": "^7.34.2",
29 |     "eslint-plugin-react-hooks": "^4.6.2",
30 |     "eslint-plugin-react-refresh": "^0.4.7",
31 |     "postcss": "^8.4.38",
32 |     "tailwindcss": "^3.4.4",
33 |     "vite": "^5.3.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/partials/Sidenav.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | const Sidenav = () => {
 4 |   return (
 5 |     <div className="w-[20%] h-full border-r-2 border-zinc-400 p-10">
 6 |       <h1 className="text-2xl text-white font-bold flex flex-row">
 7 |         <img src="/logo.svg" alt="SCSDB" className="w-5 mr-2" />
 8 |         <span className="text-2xl">SCSDB</span>
 9 |       </h1>
10 | 
11 |       <nav className="flex flex-col text-zinc-400 text-xl gap-3">
12 |         <h1 className="text-white font-semibold text-xl mt-10 mb-5">
13 |           New Feeds
14 |         </h1>
15 |         <Link className="link">
16 |           <i className="ri-fire-fill mr-2"></i>
17 |           Trending
18 |         </Link>
19 |         <Link className="link">
20 |           <i className="ri-bard-fill mr-2"></i>Popular
21 |         </Link>
22 |         <Link className="link">
23 |           <i className="ri-movie-2-fill mr-2"></i>Movies
24 |         </Link>
25 |         <Link className="link">
26 |           <i className="ri-tv-2-fill mr-2"></i>TV Shows
27 |         </Link>
28 |         <Link className="link">
29 |         <i className="ri-team-fill mr-2"></i>People</Link>
30 |       </nav>
31 | 
32 |       <hr className="border-none h-[1px] bg-zinc-400" />
33 |       <nav className="flex flex-col text-zinc-400 text-xl gap-3">
34 |         <h1 className="text-white font-semibold text-xl mt-10 mb-5">
35 |           Website Information
36 |         </h1>
37 |         <Link className="link">
38 |           <i className="ri-information-fill mr-2"></i>
39 |           About
40 |         </Link>
41 |         <Link className="link">
42 |           <i className="ri-phone-fill mr-2"></i>Contact
43 |         </Link>
44 |       </nav>
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default Sidenav;
50 | 


--------------------------------------------------------------------------------