Full-stack web application for managing personal media collections (movies, TV, games, anime). Users can add items, tag and tier them, view stats, and share lists. Includes a landing site and a demo mode that runs without a backend.
Check it out live: me-db.app
- Landing vs app vs demo: Clear separation of public marketing, authenticated app, and backend-free demo.
- Reusable UI: Shared components under
app/components/ui, modals, filters, and stats charts. - Theming: Central
styling/theme.jsdriving CSS variables for layout and colors. - Demo mode: Full list/detail/create/stats flow using static JSON; useful for portfolios and testing without API.
| Area | Choices |
|---|---|
| Framework | React 18 (Create React App) |
| Routing | React Router v6 |
| UI | Bootstrap 5, custom theme (CSS variables) |
| Data viz | Chart.js + react-chartjs-2 |
| Drag & drop | @dnd-kit (sortable lists) |
| HTTP | Axios (with credentials) |
| Icons | Font Awesome |
src/
├── app/ # Authenticated app: list, details, create, stats, profile, friends, shared views
├── landing/ # Public pages: intro, about, privacy, terms
├── demo/ # Demo mode: same flows with local JSON data (no backend)
└── styling/ # Global CSS, theme (colors, card layout)
Prerequisites: Node 20.x
npm install
npm startRuns at http://localhost:3000. For full features (auth, persistence), the backend must be running and configured (see repo root or backend README).
Other commands: npm run build (production build), npm test (Jest + React Testing Library).
- Favicon: Emoji graphic from Twemoji by Twitter, Inc. and contributors. Used under CC BY 4.0.
- Icons: Font Awesome (Free).