“Sharing happiness, one thought at a time.”
A joyful mini social feed built with React, Vite, and styled-components.
Happy Thoughts lets users post short positive messages, like others’ posts, and spread a bit of joy — now backed by a custom REST API with authentication.
🌐 Live demo: https://thinkhappy.netlify.app
- Fullstack development from UI to database
- Authentication and authorization with JWT
- Ownership-based permissions
- Accessibility-conscious UI decisions
- Deployment of both frontend and backend
- 💬 Post short thoughts (5–140 characters)
- ❤️ Like thoughts (authentication required)
- 🕒 See how long ago each thought was posted
- 🔐 Sign up and log in with username + password
- 🧾 JWT-based authentication (stored in localStorage)
- ✏️ Edit and 🗑️ delete your own thoughts
- 👁️ Conditional UI (edit/delete only visible for owner)
- 🧭 Mock mode for offline development
- 💡 Clean, responsive, and accessible design
- 🚀 Deployed frontend on Netlify, backend on Render
| Technology | Purpose |
|---|---|
| ⚛️ React (Vite) | Frontend framework |
| 💅 styled-components | Component-scoped styling |
| 🧠 React Context | Authentication state |
| 🌐 Fetch API | Backend communication |
| 🧩 Express + MongoDB | Custom REST API |
| 🔐 JWT | Authentication |
| ☁️ Netlify | Frontend hosting |
| ☁️ Render | Backend hosting |
The app includes a full authentication flow:
- Sign up with username and password
- Log in to receive a JWT token
- Token is stored in
localStorage - Protected actions:
- Create thought
- Like thought
- Edit own thought
- Delete own thought
Logged-out users can still read thoughts.
This app uses a custom-built Happy Thoughts API.
Base URL:
https://js-project-api-j7vv.onrender.com
| Method | Endpoint | Description |
|---|---|---|
| POST | /auth/signup |
Create new user |
| POST | /auth/login |
Log in user |
| Method | Endpoint | Description |
|---|---|---|
| GET | /thoughts |
Fetch latest thoughts |
| POST | /thoughts |
Create new thought (auth required) |
| POST | /thoughts/:id/like |
Like a thought (auth required) |
| PATCH | /thoughts/:id |
Edit own thought |
| DELETE | /thoughts/:id |
Delete own thought |
-
Install dependencies
npm install
-
Start the app locally
npm run dev
Runs at http://localhost:5173
-
Build for production
npm run build
-
Preview production build
npm run preview
When the backend API is unavailable, you can enable mock data:
// src/services/apiBase.js
export const USE_MOCK = true;- Build command:
npm run build - Publish directory:
dist - No proxy or redirects required
- Node + Express API
- MongoDB database
- JWT authentication
- Environment variables handled via Render dashboard
| Device | Behavior |
|---|---|
| 📱 Mobile | Stacked layout, large tap targets |
| 💻 Tablet | Balanced spacing |
| 🖥️ Desktop | Centered container with max-width |
✔ Semantic HTML
✔ Keyboard-accessible buttons and forms
✔ Visible focus states
✔ High color contrast
✔ ARIA labels for icon buttons
- 🌟 Track unique likes per user
- 🌟 Animations for posting and liking
- 🌟 Empty-state UI
- 🌟 Dark mode toggle
Built with 💖, ☕, curiosity, and persistence by
Ulrika Einerbrant
Frontend developer passionate about accessible, joyful user experiences.
🔗 Live app: https://thinkhappy.netlify.app
💻 GitHub repo: https://github.com/UlrikaRakkaBrant/js-project-happy-thoughts
🧭 Portfolio: https://ulrikasportfolio.netlify.app
💼 LinkedIn: https://www.linkedin.com/in/ulrika-einerbrant/
MIT License