Skip to content

Commit d0b2725

Browse files
Anu-004Anu-004
committedNov 22, 2024·
first commit
0 parents  commit d0b2725

34 files changed

+12331
-0
lines changed
 

‎.env

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
MONGODB_URI=mongodb+srv://anushiyasv6:yTuCx8i1kYIt79tP@cluster0.8uurr.mongodb.net/cartoon?retryWrites=true&w=majority
2+
3+
PORT=3000

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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?

‎README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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

‎data.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
[
2+
{
3+
"characterName": "Four Arms",
4+
"characterDescription": "Four Arms is a Tetramand with super strength and enhanced agility. He has four muscular arms and is one of Ben's favorite transformations for powerful combat.",
5+
"imageUrl": "./assets/4arm.png"
6+
},
7+
{
8+
"characterName": "Heatblast",
9+
"characterDescription": "Heatblast is a Pyronite with the ability to generate and manipulate intense flames. He is made of magma and can release fire blasts and fiery attacks.",
10+
"imageUrl": "https://example.com/images/heatblast.jpg"
11+
},
12+
13+
{
14+
"characterName": "XLR8",
15+
"characterDescription": "XLR8 is a Kineceleran with superspeed abilities. With his wheel-like feet and retractable claws, he can reach extreme speeds, making him useful for quick escapes and high-speed chases.",
16+
"imageUrl": "https://example.com/images/xlr8.jpg"
17+
}
18+
]

‎eslint.config.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import react from 'eslint-plugin-react'
4+
import reactHooks from 'eslint-plugin-react-hooks'
5+
import reactRefresh from 'eslint-plugin-react-refresh'
6+
7+
export default [
8+
{ ignores: ['dist'] },
9+
{
10+
files: ['**/*.{js,jsx}'],
11+
languageOptions: {
12+
ecmaVersion: 2020,
13+
globals: globals.browser,
14+
parserOptions: {
15+
ecmaVersion: 'latest',
16+
ecmaFeatures: { jsx: true },
17+
sourceType: 'module',
18+
},
19+
},
20+
settings: { react: { version: '18.3' } },
21+
plugins: {
22+
react,
23+
'react-hooks': reactHooks,
24+
'react-refresh': reactRefresh,
25+
},
26+
rules: {
27+
...js.configs.recommended.rules,
28+
...react.configs.recommended.rules,
29+
...react.configs['jsx-runtime'].rules,
30+
...reactHooks.configs.recommended.rules,
31+
'react/jsx-no-target-blank': 'off',
32+
'react-refresh/only-export-components': [
33+
'warn',
34+
{ allowConstantExport: true },
35+
],
36+
},
37+
},
38+
]

‎index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Ben 10</title>
8+
<link
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
10+
rel="stylesheet"
11+
/>
12+
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Metal+Mania&family=Reggae+One&family=Unna:ital,wght@0,400;0,700;1,400;1,700&family=Yatra+One&display=swap"
17+
rel="stylesheet"
18+
/>
19+
</head>
20+
<body>
21+
<div id="root"></div>
22+
<script type="module" src="/src/main.jsx"></script>
23+
</body>
24+
</html>

‎index.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// server.js
2+
import express from "express";
3+
import mongoose from "mongoose";
4+
import cors from "cors";
5+
import dotenv from "dotenv";
6+
dotenv.config(); // Load environment variables from .env file
7+
8+
const app = express();
9+
app.use(express.json());
10+
app.use(cors()); // Enable CORS for all routes
11+
app.use(express.urlencoded({ extended: true }));
12+
13+
// MongoDB connection
14+
const uri = process.env.MONGODB_URI;
15+
16+
mongoose
17+
.connect(uri)
18+
.then(() => {
19+
console.log("MongoDB connected");
20+
})
21+
.catch((err) => {
22+
console.error("MongoDB connection error:", err);
23+
});
24+
25+
// Create schema with an image URL
26+
const PostSchema = new mongoose.Schema({
27+
characterName: { type: String, required: true },
28+
characterDescription: { type: String, required: true },
29+
imageUrl: { type: String }, // New field for character image
30+
});
31+
32+
// Create model/collection
33+
const Post = mongoose.model("ben10", PostSchema);
34+
35+
// Create a new post
36+
app.post("/api/ben", async (req, res) => {
37+
const newPost = new Post({
38+
characterName: req.body.characterName,
39+
characterDescription: req.body.characterDescription,
40+
imageUrl: req.body.imageUrl, // Store image URL from request
41+
});
42+
43+
try {
44+
const ben = req.body
45+
let result
46+
if(Array.isArray(ben)){
47+
result = await Post.insertMany(ben)
48+
} else {
49+
const newBen=new Post(ben)
50+
result = await newBen.save()
51+
}
52+
// const savedPost = await newPost.save();
53+
res.status(200).json(result);
54+
} catch (err) {
55+
res.status(400).json({ message: "Something went wrong", err });
56+
}
57+
});
58+
59+
// Get post by ID
60+
app.get("/api/ben/:id", async (req, res) => {
61+
try {
62+
const getPost = await Post.findById(req.params.id);
63+
if (getPost) {
64+
res.status(200).json(getPost);
65+
} else {
66+
res.status(404).json({ message: `Post with id ${req.params.id} not found` });
67+
}
68+
} catch (err) {
69+
res.status(400).json({ message: "Something went wrong", err });
70+
}
71+
});
72+
73+
// Get all posts with optional limit
74+
app.get("/api/ben", async (req, res) => {
75+
try {
76+
const limit = Number(req.query.limit);
77+
const posts = limit ? await Post.find().limit(limit) : await Post.find();
78+
res.status(200).json(posts);
79+
} catch (err) {
80+
res.status(400).json({ message: "Something went wrong", err });
81+
}
82+
});
83+
84+
// Update post by ID
85+
app.put("/api/ben/:id", async (req, res) => {
86+
try {
87+
const updatePost = await Post.findByIdAndUpdate(req.params.id, req.body, { new: true });
88+
if (updatePost) {
89+
res.status(200).json(updatePost);
90+
} else {
91+
res.status(404).json({ message: `Post with id ${req.params.id} not found` });
92+
}
93+
} catch (err) {
94+
res.status(500).json({ message: "Something went wrong", err });
95+
}
96+
});
97+
98+
// Delete post by ID
99+
app.delete("/api/ben/:id", async (req, res) => {
100+
try {
101+
const deletePost = await Post.findByIdAndDelete(req.params.id);
102+
if (deletePost) {
103+
res.status(200).json(deletePost);
104+
} else {
105+
res.status(404).json({ message: `Post with id ${req.params.id} not found` });
106+
}
107+
} catch (err) {
108+
res.status(500).json({ message: "Something went wrong", err });
109+
}
110+
});
111+
112+
// Start the server
113+
const PORT = process.env.PORT || 3001;
114+
app.listen(PORT, () => {
115+
console.log(`Server running on http://localhost:${PORT}`);
116+
});

‎package-lock.json

+10,338
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "react-mongo",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"dev": "vite",
9+
"build": "vite build",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@fortawesome/fontawesome-svg-core": "^6.6.0",
15+
"@fortawesome/free-brands-svg-icons": "^6.6.0",
16+
"@fortawesome/free-regular-svg-icons": "^6.6.0",
17+
"@fortawesome/free-solid-svg-icons": "^6.6.0",
18+
"@fortawesome/react-fontawesome": "^0.2.2",
19+
"@nextui-org/react": "^2.4.8",
20+
"axios": "^1.7.7",
21+
"clsx": "^2.1.1",
22+
"cors": "^2.8.5",
23+
"daisyui": "^4.12.14",
24+
"dotenv": "^16.4.5",
25+
"express": "^4.21.1",
26+
"framer-motion": "^11.11.17",
27+
"mongoose": "^8.8.1",
28+
"nodemon": "^3.1.7",
29+
"react": "^18.3.1",
30+
"react-dom": "^18.3.1",
31+
"react-slick": "^0.30.2",
32+
"slick-carousel": "^1.8.1",
33+
"tailwind-variants": "^0.3.0"
34+
},
35+
"devDependencies": {
36+
"@eslint/js": "^9.15.0",
37+
"@types/react": "^18.3.12",
38+
"@types/react-dom": "^18.3.1",
39+
"@vitejs/plugin-react": "^4.3.3",
40+
"autoprefixer": "^10.4.20",
41+
"eslint": "^9.15.0",
42+
"eslint-plugin-react": "^7.37.2",
43+
"eslint-plugin-react-hooks": "^5.0.0",
44+
"eslint-plugin-react-refresh": "^0.4.14",
45+
"globals": "^15.12.0",
46+
"postcss": "^8.4.49",
47+
"tailwindcss": "^3.4.15",
48+
"vite": "^5.4.11"
49+
}
50+
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/assets/4arm.png

483 KB
Loading

‎public/assets/del.png

124 KB
Loading

‎public/assets/diamond.png

272 KB
Loading

‎public/assets/edit.png

118 KB
Loading

‎public/assets/fam.png

415 KB
Loading

‎public/assets/heat.png

294 KB
Loading

‎public/assets/logo.png

127 KB
Loading

‎public/assets/one.png

154 KB
Loading

‎public/assets/scroll.png

412 KB
Loading

‎public/assets/two.png

209 KB
Loading

‎public/assets/upgrade.png

216 KB
Loading

‎public/assets/vilgax.png

599 KB
Loading

‎public/assets/watch.png

23.8 KB
Loading

‎public/assets/xlr.png

730 KB
Loading

‎public/vite.svg

+1
Loading

‎src/App.jsx

+598
Large diffs are not rendered by default.

‎src/Ben.jsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from "react";
2+
import { motion } from "framer-motion";
3+
4+
const Ben = () => {
5+
const totalDuration = 8; // Total duration for both animations (scroll + xlr)
6+
7+
return (
8+
<div style={{ position: "relative", overflow: "hidden", width: "100%", height: "300px" }}>
9+
{/* Logo */}
10+
<img
11+
src="..\assets\logo.png"
12+
alt="ben 10 logo"
13+
style={{
14+
position: "absolute",
15+
top: "10px",
16+
left: "538px",
17+
zIndex: 2,
18+
height: "260px",
19+
width: "250px",
20+
}}
21+
/>
22+
23+
{/* Scroll Image */}
24+
<motion.img
25+
src="..\assets\scroll.png"
26+
alt="scroll"
27+
style={{
28+
position: "absolute",
29+
top: "50px",
30+
height: "180px",
31+
zIndex: 1,
32+
}}
33+
initial={{ x: -200 }}
34+
animate={{ x: 555 }} // Stops near the logo
35+
transition={{
36+
duration: 4,
37+
ease: "linear",
38+
repeat: Infinity,
39+
repeatDelay: totalDuration - 4, // Wait for xlr animation to finish
40+
}}
41+
/>
42+
43+
{/* XLR Image */}
44+
<motion.img
45+
src="..\assets\xlr.png"
46+
alt="xlr"
47+
style={{
48+
position: "absolute",
49+
top: "50px",
50+
left: "780px",
51+
height: "190px",
52+
zIndex: 1,
53+
}}
54+
initial={{ x: -200 }}
55+
animate={{ x: 650 }}
56+
transition={{
57+
duration: 4,
58+
delay:4,
59+
ease: "linear",
60+
repeat: Infinity,
61+
repeatDelay: 4, // Matches scroll delay for seamless looping
62+
}}
63+
/>
64+
</div>
65+
);
66+
};
67+
68+
export default Ben;

‎src/Img.jsx

+522
Large diffs are not rendered by default.

‎src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/main.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
// import './index.css'
4+
import App from './App.jsx'
5+
import Ben from './Ben.jsx'
6+
7+
import './index.css'
8+
9+
createRoot(document.getElementById('root')).render(
10+
<StrictMode>
11+
12+
<Ben />
13+
14+
<App />
15+
16+
</StrictMode>,
17+
)

‎src/style.css

+452
Large diffs are not rendered by default.

‎tailwind.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const { nextui } = require("@nextui-org/react");
2+
3+
/** @type {import('tailwindcss').Config} */
4+
export default {
5+
content: [
6+
"./index.html", "./src/**/*.{js,ts,jsx,tsx}",
7+
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
8+
9+
],
10+
theme: {
11+
extend: {},
12+
},
13+
darkMode: "class",
14+
plugins: [require("daisyui"),nextui()],
15+
daisyui: {
16+
themes: ["light","dark"],
17+
}
18+
};

‎vercel.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"version": 2,
3+
"builds": [
4+
{
5+
"src": "index.js",
6+
"use": "@vercel/node"
7+
}
8+
],
9+
"routes": [
10+
{
11+
"src": "/(.*)",
12+
"dest": "/index.js"
13+
}
14+
]
15+
}

‎vite.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vite.dev/config/
5+
export default defineConfig({
6+
optimizeDeps: {
7+
include: ['@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons'],
8+
},
9+
plugins: [react()],
10+
})
11+
12+

0 commit comments

Comments
 (0)
Please sign in to comment.