A playful, responsive digital board app where users can create themed boards, post inspiration cards, and visually organize ideas. Designed to simulate real-world pinboards with a fresh, human-centered interface.
- Create and preview new boards with custom titles and owner names
- Select a board to view and manage associated cards
- Add new cards with text input
- Dynamic interface layout with consistent responsive styling
- Toggle visibility of board forms
- Friendly, whimsical design elements with fixed layout proportions
- Frontend: React, JSX, CSS Flexbox
- Styling: Custom CSS with fixed layout, shadow, and color themes
- Icons & Illustrations: SVG graphics (e.g., lightbulb and character art)
- (Optional): Flask or Express backend with REST API for board/card management
src/ │ ├── components/ │ ├── BoardList.jsx │ ├── BoardForm.jsx │ ├── CardList.jsx │ ├── CardForm.jsx │ └── SelectedBoard.jsx │ ├── App.jsx ├── App.css └── index.js
bash Copy Edit
- Clone this repo:
git clone https://github.com/your-username/inspiration-board.git cd inspiration-board
Install dependencies:
bash Copy Edit npm install Run the app:
bash Copy Edit npm start Open in your browser:
arduino Copy Edit http://localhost:3000 💡 Backend API (Optional) If integrated with a backend (Flask or Node.js), make sure to:
Update the fetch() URLs accordingly
Run backend server separately on a different port (e.g., 5000)
Enable CORS if needed
🎨 CSS Highlights Fixed max width layout with .app-container { max-width: 1280px; margin: 0 auto; }
Responsive .column design using flex: 1, with min-width and max-width for stability
Clean, gentle color palette using #fff7ea, #6c63ff, and #ffe5d0
Custom form controls styled for accessibility and consistency
📦 Future Improvements Persistent backend storage for boards and cards
Drag-and-drop reordering
Card tagging and filtering
Dark mode
🧑💻 Author Built with ☕️, 🧠, and CSS by Flora Zhao TOP Innovation Zone Research Institute USC | Ada Developers Academy
Create with joy. Share your sparks. Inspire the world.
yaml Copy Edit
如需加入 LICENSE 或部署说明，我也可以帮你生成。是否还需要为这个项目补一个部署到 Vercel 或 Render 的简易指南？
You said: 几点修改意见： 1：给到md格式的 2：Backend API 这一部分，我们是连接了另外一个组的作业，具体的地址是https://github.com/celestialmage/back-end-inspiration-board
ChatGPT said: 谢谢你，Flora！以下是根据你的反馈改进后的 README.md，已经采用 Markdown 格式并更新了 Backend API 的具体链接信息。结构清晰、风格友好，适合发布到 GitHub 或用于项目展示。
markdown Copy Edit
A playful, responsive digital board app where users can create themed boards, post inspiration cards, and visually organize ideas. Designed to simulate real-world pinboards with a fresh, human-centered interface.
- Create and preview new boards with custom titles and owner names
- Select a board to view and manage associated cards
- Add new cards with text input
- Toggle visibility of board form and card creation form
- Responsive layout with consistent column width and clean design
- SVG illustrations and icons for added personality
A snapshot of the main board layout with a selected board and card interface.
- Frontend: React, JSX
- Styling: Custom CSS, Flexbox layout
- Assets: SVG icons and illustrations
- Backend API: External project (see below)
git clone https://github.com/your-username/inspiration-board.git cd inspiration-board Install dependencies
🔗 Backend API This frontend connects to an external backend developed by another project group. GitHub Repository: celestialmage/back-end-inspiration-board The backend provides RESTful endpoints for: Retrieving all boards Creating a new board Retrieving cards by board Posting a new card
🎨 CSS Notes .app-container is fixed to a centered layout with consistent spacing .column components use flex: 1 and a max-width constraint to ensure stability Inputs and buttons have consistent padding, radius, and theme coloring Uses a soft palette with playful accent colors (#6c63ff, #ffe5d0, #fff7ea)
🚧 Future Improvements tbd Add persistent login and user-specific boards Enable drag-and-drop card reordering Implement board editing and deletion Support for markdown or rich text in cards Dark mode support
👩💻 Author Built with ☕️, 🎨, and code by team SPARKBOARD from Ada Developers Academy