-
-
- 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/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/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..d7198f8
--- /dev/null
+++ b/client/src/pages/Home.jsx
@@ -0,0 +1,112 @@
+import { Link } from 'react-router-dom';
+
+const Home = () => {
+ return (
+
+
+
{/* Platform Name/Tagline */}
+
+ {/* Brief description of what your platform does */}
+
+
+
+ Get Started
+
+
+ Login
+
+
+
+
+ {/* 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