diff --git a/.gitignore b/.gitignore index b02a1ff7..97cff809 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ package-lock.json *.njsproj *.sln *.sw? +.env +.env diff --git a/README.md b/README.md index 41ebece2..5441815f 100644 --- a/README.md +++ b/README.md @@ -1 +1,49 @@ -# Happy Thoughts +# Happy Thoughts Frontend + +React app for sharing happy thoughts. Users can post thoughts, like others' posts, and manage their own content with authentication. + +## Live Demo + +👉 [View the live site here](https://happythoughtsbyc.netlify.app/) + +## Features + +- Post thoughts (anonymous or logged in) +- Like and unlike thoughts +- User authentication (register/login) +- Edit and delete your own thoughts +- Character counter (5-140 chars) +- Responsive design with styled components + +## Tech Stack + +- React with hooks +- Styled Components +- Vite +- localStorage for auth tokens +- Custom Happy Thoughts API + +## Installation + +1. Clone and install: +```bash +npm install +``` + +2. Create `.env` file: +``` +VITE_API_URL=http://localhost:8080 +``` + +3. Start development server: +```bash +npm run dev +``` + +## Deployment + +Deployed on Netlify, connected to custom backend API. + +--- + +Created with ❀ by **Cathi** diff --git a/index.html b/index.html index d4492e94..78756125 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,28 @@ - - + + + + Happy Thoughts + + + + +
- + diff --git a/package.json b/package.json index 2f66d295..fd5424ff 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-icons": "^5.5.0", + "styled-components": "^6.1.17" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/public/happy-thoughts.png b/public/happy-thoughts.png new file mode 100644 index 00000000..81bcfc8c Binary files /dev/null and b/public/happy-thoughts.png differ diff --git a/public/thumbnail-ht.png b/public/thumbnail-ht.png new file mode 100644 index 00000000..5f3f4769 Binary files /dev/null and b/public/thumbnail-ht.png differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/pull_request_template.md b/pull_request_template.md index 154c92e8..c6db882d 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1 +1,2 @@ -Please include your Netlify link here. \ No newline at end of file +Please include your Netlify link here. +https://happythoughtsbyc.netlify.app/ \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 07f2cbdf..b0f8ea0d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,150 @@ +// src/App.jsx +import React, { useContext, useState } from "react"; +import { AuthContext } from "./context/AuthContext"; +import { useThoughts } from "./hooks/useThoughts"; +import { RegisterForm } from "./components/RegisterForm"; +import { LoginForm } from "./components/LoginForm"; +import { EditThought } from "./components/EditThought"; +import { Form } from "./components/Form"; +import { MessageList } from "./components/MessageList"; +import { GlobalStyles } from "./GlobalStyles"; +import { Logo } from "./components/Logo"; +import { Footer } from "./components/Footer"; +import { Loader } from "./components/Loader"; +import { + AppContainer, + PageTitle, + WelcomeSection, + WelcomeTitle, + WelcomeText, + LoginButton, + UserSection, + UserInfo, + UserEmail, + LogoutButton, + AuthFormSection, + AuthFormBox, + AuthFormTitle, + ToggleText, + ToggleLink +} from "./App.styles"; + export const App = () => { + const { user, logout } = useContext(AuthContext); + const { + messages, + loading, + posting, + likeCount, + addMessage, + toggleLike, + removeMessage, + saveMessage, + } = useThoughts(); + const [editingId, setEditingId] = useState(null); + const [showAuthForms, setShowAuthForms] = useState(false); + const [authMode, setAuthMode] = useState("login"); // "login" or "register" + return ( -

Happy Thoughts

- ) -} + <> + + + Happy Thoughts + + + {/* Welcome text - always visible */} + + + Welcome to Happy Thoughts! + + {!user && ( + <> + + Share your happy thoughts for the day and enjoy reading what makes others happy. + If you want to edit or delete your thoughts, you can login below. + + setShowAuthForms(!showAuthForms)}> + {showAuthForms ? "Close" : "Login"} + + + )} + + + {/* Logout button for logged in users */} + {user && ( + + + {user.email} + + Logout + + + + )} + + {/* Auth forms - only show when toggled */} + {!user && showAuthForms && ( + + + {authMode === "login" ? ( + <> + Login + { + setShowAuthForms(false); + setAuthMode("login"); + }} /> + + Don't have an account?{" "} + setAuthMode("register")}> + Sign up here + + + + ) : ( + <> + Register + { + setShowAuthForms(false); + setAuthMode("login"); + }} /> + + Already have an account?{" "} + setAuthMode("login")}> + Login here + + + + )} + + + )} + + {/* Form is always visible for everyone */} +
+ {!loading && posting && } + + {editingId && user ? ( + m._id === editingId)} + onSave={(id, fields) => { + saveMessage(id, fields); + setEditingId(null); + }} + onCancel={() => setEditingId(null)} + /> + ) : ( + setEditingId(id) : null} // Only logged in can edit + currentUserId={user?.id} + /> + )} + + +