Skip to content

Commit 900b3df

Browse files
lazyprogrammerPlazyprogrammerP
committed
Completed v1 for Caddle
1 parent 4136097 commit 900b3df

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+7014
-241
lines changed

‎.env

Whitespace-only changes.

‎next.config.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
const nextConfig = {
33
reactStrictMode: true,
44
swcMinify: true,
5-
}
5+
images: {
6+
domains: ["lh3.googleusercontent.com"],
7+
},
8+
};
69

7-
module.exports = nextConfig
10+
module.exports = nextConfig;

‎package.json

+17-1
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,30 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@heroicons/react": "^2.0.13",
13+
"@reduxjs/toolkit": "^1.9.1",
14+
"@tailwindcss/typography": "^0.5.8",
1215
"@types/node": "18.11.10",
1316
"@types/react": "18.0.26",
1417
"@types/react-dom": "18.0.9",
18+
"axios": "^1.2.0",
1519
"eslint": "8.28.0",
1620
"eslint-config-next": "13.0.6",
21+
"firebase": "^9.14.0",
1722
"next": "13.0.6",
23+
"next-redux-wrapper": "^8.0.0",
1824
"react": "18.2.0",
1925
"react-dom": "18.2.0",
20-
"typescript": "4.9.3"
26+
"react-markdown": "^8.0.4",
27+
"react-redux": "^8.0.5",
28+
"react-spinners": "^0.13.6",
29+
"typescript": "4.9.3",
30+
"w3name": "^1.0.6",
31+
"web3.storage": "^4.4.0"
32+
},
33+
"devDependencies": {
34+
"autoprefixer": "^10.4.13",
35+
"postcss": "^8.4.19",
36+
"tailwindcss": "^3.2.4"
2137
}
2238
}

‎pages/_app.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import '../styles/globals.css'
2-
import type { AppProps } from 'next/app'
1+
import type { AppProps } from "next/app";
2+
import wrapper from "../store/index";
3+
import "../styles/globals.css";
34

4-
export default function App({ Component, pageProps }: AppProps) {
5-
return <Component {...pageProps} />
6-
}
5+
export default wrapper.withRedux(function App({ Component, pageProps }: AppProps) {
6+
return (
7+
<div className={"bg-white"}>
8+
<Component {...pageProps} />
9+
</div>
10+
);
11+
});

‎pages/api/hello.ts

-13
This file was deleted.

‎pages/dashboard/index.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { PlusIcon } from "@heroicons/react/24/outline";
2+
import Image from "next/image";
3+
import { useRouter } from "next/router";
4+
import { useEffect, useState } from "react";
5+
import { useSelector } from "react-redux";
6+
import { ClipLoader } from "react-spinners";
7+
import AddDatasetModal from "../../src/components/add-dataset-modal";
8+
import DatasetItem from "../../src/components/dataset-item/dataset-item";
9+
import getDatasets from "../../src/fire-app/getDatasets";
10+
import withAuth from "../../src/utils/withAuth";
11+
import { selectUserData } from "../../store/auth.slice";
12+
13+
export default withAuth(function Dashboard() {
14+
const router = useRouter();
15+
16+
const user = useSelector(selectUserData);
17+
18+
const [openAddDatasetModal, setOpenAddDatasetModal] = useState(false);
19+
20+
const [loadingDatasets, setLoadingDatasets] = useState(true);
21+
const [datasets, setDatasets] = useState([]);
22+
23+
useEffect(() => {
24+
getDatasets(user.userId, (querySnapshot) => {
25+
const result = querySnapshot.docs.map((doc) => ({
26+
id: doc.id,
27+
...doc.data(),
28+
}));
29+
30+
setDatasets(result);
31+
setLoadingDatasets(false);
32+
});
33+
}, []);
34+
35+
return (
36+
<>
37+
<div className={"space-y-4"}>
38+
<div className={"space-y-2"}>
39+
<h1 className={"text-3xl sm:text-4xl font-bold"}>Dashboard</h1>
40+
<p className={"md:text-lg text-gray-500 max-w-lg"}>
41+
Create a new dataset and collaborate with your team or build your portfolio by building public datasets.
42+
</p>
43+
<div className={"flex items-center gap-2"}>
44+
<button
45+
onClick={() => {
46+
setOpenAddDatasetModal(true);
47+
}}
48+
className={`flex items-center gap-1 py-2 px-4 bg-black text-white rounded-full`}
49+
>
50+
<PlusIcon className={"w-5 h-5"} />
51+
<span>New Dataset</span>
52+
</button>
53+
54+
<button
55+
onClick={() => {
56+
router.push("/explore");
57+
}}
58+
className={`py-2 px-4 text-black rounded-full`}
59+
>
60+
Explore Datasets
61+
</button>
62+
</div>
63+
</div>
64+
65+
<div className={"w-full h-px bg-gray-200"} />
66+
67+
{loadingDatasets ? (
68+
<ClipLoader size={50} color={"#010101"} />
69+
) : datasets.length ? (
70+
<div className={"space-y-4"}>
71+
{datasets.map((dataset) => (
72+
<DatasetItem key={dataset.id} dataset={dataset} />
73+
))}
74+
</div>
75+
) : (
76+
<div className={"w-11/12 max-w-sm mx-auto"}>
77+
<div className={"w-full h-auto aspect-square relative"}>
78+
<Image fill objectFit={"contain"} src={"/data-not-found.png"} />
79+
</div>
80+
<p className={"md:text-lg text-center text-gray-500"}>You have not created any dataset yet, create one to get started!</p>
81+
</div>
82+
)}
83+
</div>
84+
85+
<AddDatasetModal open={openAddDatasetModal} setOpen={setOpenAddDatasetModal} />
86+
</>
87+
);
88+
});

‎pages/explore/index.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { FunnelIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
2+
import Image from "next/image";
3+
import { useEffect, useState } from "react";
4+
import { useSelector } from "react-redux";
5+
import { ClipLoader } from "react-spinners";
6+
import DatasetItem from "../../src/components/dataset-item/dataset-item";
7+
import getPublicDatasets from "../../src/fire-app/getPublicDatasets";
8+
import withAuth from "../../src/utils/withAuth";
9+
import { selectUserData } from "../../store/auth.slice";
10+
11+
export default withAuth(function ExploreDatasets() {
12+
const user = useSelector(selectUserData);
13+
14+
const [loadingDatasets, setLoadingDatasets] = useState(true);
15+
const [datasets, setDatasets] = useState([]);
16+
17+
useEffect(() => {
18+
getPublicDatasets(user.userId, (querySnapshot) => {
19+
const result = querySnapshot.docs.map((doc) => ({
20+
id: doc.id,
21+
...doc.data(),
22+
}));
23+
setDatasets(result);
24+
setLoadingDatasets(false);
25+
});
26+
}, [user]);
27+
28+
return (
29+
<div className={"space-y-4"}>
30+
<div className={"space-y-2"}>
31+
<h1 className={"text-3xl sm:text-4xl font-bold"}>Explore Datasets</h1>
32+
<p className={"md:text-lg text-gray-500 max-w-lg"}>
33+
Search across the enormous datasets provided by the community and find your next research idea.
34+
</p>
35+
36+
<div className={"w-full flex items-center gap-8"}>
37+
<div className={"flex-1 flex items-center gap-2 py-2 px-4 rounded-full border border-gray-200"}>
38+
<MagnifyingGlassIcon className={"w-5 h-5 mb-1"} />
39+
<input placeholder={"Search for datasets"} className={"flex-1 focus:outline-none"} />
40+
</div>
41+
42+
<button className={"flex items-center gap-2"}>
43+
<FunnelIcon className={"w-5 h-5"} />
44+
<span className={"hidden md:block"}>Apply Filters</span>
45+
</button>
46+
</div>
47+
</div>
48+
49+
<div className={"w-full h-px bg-gray-200"} />
50+
51+
{loadingDatasets ? (
52+
<ClipLoader size={50} color={"#010101"} />
53+
) : datasets.length ? (
54+
<div className={"space-y-4"}>
55+
{datasets.map((dataset) => (
56+
<DatasetItem key={dataset.id} dataset={dataset} />
57+
))}
58+
</div>
59+
) : (
60+
<div className={"w-11/12 max-w-sm mx-auto"}>
61+
<div className={"w-full h-auto aspect-square relative"}>
62+
<Image fill objectFit={"contain"} src={"/data-not-found.png"} />
63+
</div>
64+
<p className={"md:text-lg text-center text-gray-500"}>No public datasets found. Keep an eye out for updates by the community.</p>
65+
</div>
66+
)}
67+
</div>
68+
);
69+
});

‎pages/index.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Navbar from "../src/components/navbar";
2+
import { PlayCircleIcon } from "@heroicons/react/24/solid";
3+
import { useRouter } from "next/router";
4+
5+
export default function Home() {
6+
const router = useRouter();
7+
8+
return (
9+
<div>
10+
<Navbar />
11+
12+
<div
13+
className={"flex flex-col items-center justify-center gap-4 p-6"}
14+
style={{
15+
height: "calc(100vh - 88px)",
16+
}}
17+
>
18+
<h1 className={"text-3xl sm:text-4xl md:text-6xl font-bold max-w-lg md:max-w-2xl text-center"}>
19+
Start With More Than A{" "}
20+
<span className={"text-transparent bg-clip-text bg-gradient-to-br from-yellow-300 to-pink-500"}>Blinking Cursor.</span>
21+
</h1>
22+
<p className={"md:text-lg text-gray-500 max-w-lg md:max-w-2xl text-center"}>
23+
With Caddle, you can store datasets, create data pipeline and discover trending datasets to train your awesome ML model.
24+
</p>
25+
<div className={"flex items-center justify-center gap-4"}>
26+
<button
27+
onClick={() => {
28+
router.push("/explore");
29+
}}
30+
className={"bg-gradient-to-br from-yellow-300 to-pink-500 text-white py-2 px-4 rounded-full"}
31+
>
32+
Explore Datasets
33+
</button>
34+
<button className={"py-2 px-4 rounded-full flex items-center gap-2 border border-gray-500"}>
35+
<span>Watch Demo</span>
36+
<PlayCircleIcon className={"w-5 h-5"} />
37+
</button>
38+
</div>
39+
</div>
40+
</div>
41+
);
42+
}

‎pages/index.tsx

-71
This file was deleted.

0 commit comments

Comments
 (0)