-
-
- Edit src/App.jsx and save to test HMR
-
+
+
+ {/* Header appears on all pages */}
+
+
+ {/* Main content area */}
+
+
+ {/* Define your routes here */}
+ } />
+ } />
+ } />
+ } />
+
+ {/* 404 Page - catches all unmatched routes */}
+ } />
+
+
+
+ {/* Footer appears on all pages */}
+
-
- Click on the Vite and React logos to learn more
-
-
- )
+
+ );
}
-export default App
+// Simple 404 component
+const NotFound = () => {
+ return (
+
+
404 - Page Not Found
+
The page you're looking for doesn't exist.
+
+ );
+};
+
+const appStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
+};
+
+const mainStyle = {
+ flex: 1,
+};
+
+export default App;
diff --git a/client/src/components/common/ConnectionTest.jsx b/client/src/components/common/ConnectionTest.jsx
new file mode 100644
index 0000000..0ed4fbc
--- /dev/null
+++ b/client/src/components/common/ConnectionTest.jsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+
+const ConnectionTest = () => {
+ const [message, setMessage] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const testConnection = async () => {
+ setLoading(true);
+ setError('');
+ setMessage('');
+
+ try {
+ // Using relative URL because of Vite proxy
+ const response = await fetch('/api/health');
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ setMessage(data.message);
+
+ } catch (err) {
+ setError('Failed to connect to server: ' + err.message);
+ console.error('Connection test error:', err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
Backend Connection Test
+
+
+
+ {message && (
+
+ ✅ Success: {message}
+
+ )}
+
+ {error && (
+
+ ❌ Error: {error}
+
+ )}
+
+
+
Backend URL: http://localhost:5000
+
Frontend URL: http://localhost:5173
+
Using: Vite Proxy
+
+
+ );
+};
+
+const containerStyle = {
+ padding: '2rem',
+ backgroundColor: '#f8f9fa',
+ borderRadius: '8px',
+ margin: '2rem 0',
+};
+
+const buttonStyle = {
+ backgroundColor: '#007bff',
+ color: 'white',
+ padding: '0.75rem 1.5rem',
+ border: 'none',
+ borderRadius: '5px',
+ fontSize: '1rem',
+ cursor: 'pointer',
+ marginTop: '1rem',
+};
+
+const successStyle = {
+ marginTop: '1rem',
+ padding: '1rem',
+ backgroundColor: '#d4edda',
+ color: '#155724',
+ borderRadius: '5px',
+ border: '1px solid #c3e6cb',
+};
+
+const errorStyle = {
+ marginTop: '1rem',
+ padding: '1rem',
+ backgroundColor: '#f8d7da',
+ color: '#721c24',
+ borderRadius: '5px',
+ border: '1px solid #f5c6cb',
+};
+
+const infoStyle = {
+ marginTop: '1.5rem',
+ padding: '1rem',
+ backgroundColor: 'white',
+ borderRadius: '5px',
+ fontSize: '0.9rem',
+};
+
+export default ConnectionTest;
\ No newline at end of file
diff --git a/client/src/components/layout/Footer.jsx b/client/src/components/layout/Footer.jsx
new file mode 100644
index 0000000..51ed6d8
--- /dev/null
+++ b/client/src/components/layout/Footer.jsx
@@ -0,0 +1,26 @@
+const Footer = () => {
+ return (
+
+ );
+};
+
+const footerStyle = {
+ backgroundColor: '#333',
+ color: 'white',
+ padding: '2rem 0',
+ marginTop: 'auto',
+ textAlign: 'center',
+};
+
+const containerStyle = {
+ maxWidth: '1200px',
+ margin: '0 auto',
+ padding: '0 2rem',
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/client/src/components/layout/Header.jsx b/client/src/components/layout/Header.jsx
new file mode 100644
index 0000000..bc411a7
--- /dev/null
+++ b/client/src/components/layout/Header.jsx
@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+ return (
+
+ );
+};
+
+// Basic inline styles (you can move these to CSS later)
+const headerStyle = {
+ backgroundColor: '#333',
+ color: 'white',
+ padding: '1rem 0',
+};
+
+const containerStyle = {
+ maxWidth: '1200px',
+ margin: '0 auto',
+ padding: '0 2rem',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+};
+
+const logoStyle = {
+ margin: 0,
+ fontSize: '1.5rem',
+};
+
+const linkStyle = {
+ color: 'white',
+ textDecoration: 'none',
+};
+
+const navLinkStyle = {
+ color: 'white',
+ textDecoration: 'none',
+ marginLeft: '2rem',
+};
+
+export default Header;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 08a3ac9..a7f816f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,68 +1,31 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
- font-synthesis: none;
- text-rendering: optimizeLegibility;
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: #f8f9fa;
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0.5rem;
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+p {
+ margin-bottom: 1rem;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+a {
+ color: #007bff;
+ text-decoration: none;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/client/src/main.jsx b/client/src/main.jsx
index b9a1a6d..c6d6857 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,10 +1,18 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import App from './App';
+import Home from './pages/Home';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+
+ } />
+ {/* add other routes here */}
+
+
+
+);
-createRoot(document.getElementById('root')).render(
-
-
- ,
-)
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..4da4992
--- /dev/null
+++ b/client/src/pages/Dashboard.jsx
@@ -0,0 +1,60 @@
+const Dashboard = () => {
+ return (
+
+
+
Dashboard
+
Welcome back!
+
+
+
+
+
Your Dashboard
+
This page will display:
+
+ - Your created content (posts/recipes/workouts)
+ - Statistics and analytics
+ - Quick actions (create new, edit, delete)
+ - Recent activity
+
+
+ This will be built after authentication is implemented
+
+
+
+
+ );
+};
+
+const containerStyle = {
+ minHeight: '80vh',
+ padding: '2rem',
+};
+
+const headerStyle = {
+ maxWidth: '1200px',
+ margin: '0 auto 2rem',
+};
+
+const contentStyle = {
+ maxWidth: '1200px',
+ margin: '0 auto',
+};
+
+const placeholderStyle = {
+ backgroundColor: '#f8f9fa',
+ padding: '2rem',
+ borderRadius: '8px',
+};
+
+const listStyle = {
+ paddingLeft: '1.5rem',
+ marginTop: '1rem',
+};
+
+const noteStyle = {
+ marginTop: '1rem',
+ fontStyle: 'italic',
+ color: '#666',
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
new file mode 100644
index 0000000..903708f
--- /dev/null
+++ b/client/src/pages/Home.jsx
@@ -0,0 +1,117 @@
+import { Link } from 'react-router-dom';
+import ConnectionTest from '../components/common/ConnectionTest';
+
+const Home = () => {
+ return (
+
+
+
{/* Platform Name/Tagline */}
+
+ {/* Brief description of what your platform does */}
+
+
+
+ Get Started
+
+
+ Login
+
+
+
+ {/* Backend Connection Test */}
+
+
+
+
+ {/* Features Section (Optional) */}
+
+
Why Choose {/* Platform Name */}?
+
+ {/* Add 3 feature cards based on your theme */}
+
+
Feature 1
+
Description
+
+
+
Feature 2
+
Description
+
+
+
Feature 3
+
Description
+
+
+
+
+ );
+};
+
+const containerStyle = {
+ minHeight: '100vh',
+};
+
+const heroStyle = {
+ textAlign: 'center',
+ padding: '4rem 2rem',
+ backgroundColor: '#f5f5f5',
+};
+
+const titleStyle = {
+ fontSize: '3rem',
+ marginBottom: '1rem',
+ color: '#333',
+};
+
+const subtitleStyle = {
+ fontSize: '1.25rem',
+ color: '#666',
+ marginBottom: '2rem',
+};
+
+const ctaStyle = {
+ display: 'flex',
+ gap: '1rem',
+ justifyContent: 'center',
+};
+
+const buttonStyle = {
+ backgroundColor: '#007bff',
+ color: 'white',
+ padding: '0.75rem 2rem',
+ borderRadius: '5px',
+ textDecoration: 'none',
+ fontWeight: 'bold',
+};
+
+const secondaryButtonStyle = {
+ backgroundColor: 'white',
+ color: '#007bff',
+ padding: '0.75rem 2rem',
+ borderRadius: '5px',
+ textDecoration: 'none',
+ fontWeight: 'bold',
+ border: '2px solid #007bff',
+};
+
+const featuresStyle = {
+ padding: '4rem 2rem',
+ textAlign: 'center',
+};
+
+const featureGridStyle = {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+ gap: '2rem',
+ marginTop: '2rem',
+ maxWidth: '1200px',
+ margin: '2rem auto',
+};
+
+const featureCardStyle = {
+ padding: '2rem',
+ backgroundColor: 'white',
+ borderRadius: '8px',
+ boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+};
+
+export default Home;
\ No newline at end of file
diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
new file mode 100644
index 0000000..154061f
--- /dev/null
+++ b/client/src/pages/Login.jsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+
+const Login = () => {
+ return (
+
+
+
Login
+
Sign in to your account
+
+ {/* Placeholder for login form */}
+
+
Login form will be implemented in a future lesson
+
This will include:
+
+ - Email input field
+ - Password input field
+ - Login button
+ - Form validation
+
+
+
+
+ Don't have an account?{' '}
+
+ Register here
+
+
+
+
+ );
+};
+
+const containerStyle = {
+ minHeight: '80vh',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '2rem',
+};
+
+const formContainerStyle = {
+ maxWidth: '400px',
+ width: '100%',
+ padding: '2rem',
+ backgroundColor: 'white',
+ borderRadius: '8px',
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+};
+
+const titleStyle = {
+ textAlign: 'center',
+ marginBottom: '0.5rem',
+ color: '#333',
+};
+
+const subtitleStyle = {
+ textAlign: 'center',
+ color: '#666',
+ marginBottom: '2rem',
+};
+
+const placeholderStyle = {
+ backgroundColor: '#f8f9fa',
+ padding: '1.5rem',
+ borderRadius: '5px',
+ marginBottom: '1rem',
+};
+
+const listStyle = {
+ paddingLeft: '1.5rem',
+ marginTop: '1rem',
+};
+
+const linkTextStyle = {
+ textAlign: 'center',
+ marginTop: '1rem',
+};
+
+const linkStyle = {
+ color: '#007bff',
+ textDecoration: 'none',
+ fontWeight: 'bold',
+};
+
+export default Login;
\ No newline at end of file
diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx
new file mode 100644
index 0000000..8d6494c
--- /dev/null
+++ b/client/src/pages/Register.jsx
@@ -0,0 +1,88 @@
+import { Link } from 'react-router-dom';
+
+const Register = () => {
+ return (
+
+
+
Create Account
+
Join {/* Your Platform Name */} today
+
+ {/* Placeholder for registration form */}
+
+
Registration form will be implemented in a future lesson
+
This will include:
+
+ - Name input field
+ - Email input field
+ - Password input field
+ - Confirm password field
+ - Registration button
+ - Form validation
+
+
+
+
+ Already have an account?{' '}
+
+ Login here
+
+
+
+
+ );
+};
+
+// Use the same styles as Login page
+const containerStyle = {
+ minHeight: '80vh',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '2rem',
+};
+
+const formContainerStyle = {
+ maxWidth: '400px',
+ width: '100%',
+ padding: '2rem',
+ backgroundColor: 'white',
+ borderRadius: '8px',
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+};
+
+const titleStyle = {
+ textAlign: 'center',
+ marginBottom: '0.5rem',
+ color: '#333',
+};
+
+const subtitleStyle = {
+ textAlign: 'center',
+ color: '#666',
+ marginBottom: '2rem',
+};
+
+const placeholderStyle = {
+ backgroundColor: '#f8f9fa',
+ padding: '1.5rem',
+ borderRadius: '5px',
+ marginBottom: '1rem',
+};
+
+const listStyle = {
+ paddingLeft: '1.5rem',
+ marginTop: '1rem',
+};
+
+const linkTextStyle = {
+ textAlign: 'center',
+ marginTop: '1rem',
+};
+
+const linkStyle = {
+ color: '#007bff',
+ textDecoration: 'none',
+ fontWeight: 'bold',
+};
+
+export default Register;
\ No newline at end of file
diff --git a/client/vite.config.js b/client/vite.config.js
index 8b0f57b..7cd1ac0 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
-// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
-})
+ server: {
+ proxy: {
+ '/api': {
+ target: 'http://localhost:5000',
+ changeOrigin: true,
+ secure: false,
+ },
+ },
+ },
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9bc2fe8..50f534e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
"": {
"name": "creators-platform",
"version": "1.0.0",
+ "dependencies": {
+ "cors": "^2.8.6"
+ },
"devDependencies": {
"concurrently": "^8.2.2"
}
@@ -140,6 +143,23 @@
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
}
},
+ "node_modules/cors": {
+ "version": "2.8.6",
+ "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+ "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+ "license": "MIT",
+ "dependencies": {
+ "object-assign": "^4",
+ "vary": "^1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -211,6 +231,15 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -311,6 +340,15 @@
"dev": true,
"license": "0BSD"
},
+ "node_modules/vary": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/package.json b/package.json
index 95496b4..d66c4e2 100644
--- a/package.json
+++ b/package.json
@@ -9,5 +9,8 @@
},
"devDependencies": {
"concurrently": "^8.2.2"
+ },
+ "dependencies": {
+ "cors": "^2.8.6"
}
-}
\ No newline at end of file
+}
diff --git a/server/server.js b/server/server.js
index 73a42c3..e7adbc4 100644
--- a/server/server.js
+++ b/server/server.js
@@ -14,7 +14,12 @@ const app = express();
const PORT = process.env.PORT || 5000;
// Middleware
-app.use(cors());
+app.use(cors({
+ origin: process.env.CLIENT_URL || 'http://localhost:5173', // Allow only your frontend
+ credentials: true, // Allow cookies/auth headers
+ optionsSuccessStatus: 200 // Handle preflight requests
+}));
+
app.use(express.json());
// Routes