How imganpat/note-fusion works
Note Fusion is a full-stack notes application: users register or log in, browse and organize notes, open notes in a full-screen view, and create or edit notes; owners can also share notes in view-only form. The client uses routed React views and Redux state, while the server exposes authentication and notes APIs backed by MySQL. The README documents sharing and responsive UI, but their full implementations are not shown in the sampled source; those capabilities are represented without speculative implementation links.
Main entry points: App.jsx App routes · notes_thunk.js Notes API client · auth-routes.js Auth routes · server.js HTTP server
Components 25
Client experience
- App routes
client/src/App.jsx - Login and registration
client/src/pages - Notes list
client/src/components/NotesContainer.jsx - Note cards
client/src/components/MiniNote.jsx - Full-screen note
client/src/components/Note.jsx - Note editor popup
client/src/components/InputPopup.jsx - Navigation and profile
client/src/components/Nav.jsx - Note navigation
client/src/components/Sidebar.jsx - Confirm dialog
client/src/components/ConfirmDialog.jsx
Client state and API
- Redux store
client/src/store/index.js - Notes state
client/src/store/slices/notes_slice.js - Popup state
client/src/store/slices/popup_slice.js - Notes API client
client/src/store/thunks/notes_thunk.js - Backend URL
client/src/constants/backend_url.js
Server API and security
- HTTP server
server/server.js - Auth routes
server/routes/auth-routes.js - Registration validation
server/validators/auth-validator.js - Validation middleware
server/middlewares/validate-middelware.js - Authentication
server/controllers/auth-controller.js - Notes routes
server/routes/notes-routes.js - JWT authentication
server/middlewares/auth-middleware.js - Notes operations
server/controllers/notes-controller.js
Persistence
- MySQL connection
server/config/db-config.js
Other components
- User
- MySQL
Connections 29
- User → App routes: uses
client/src/App.jsx - App routes → Notes list: routes to
client/src/App.jsx - App routes → Full-screen note: routes to
client/src/App.jsx - App routes → Login and registration: routes to
client/src/App.jsx - App routes → Navigation and profile: renders layout
client/src/App.jsx - Notes list → Note cards: renders
client/src/components/NotesContainer.jsx - Notes list → Note editor popup: renders
client/src/components/NotesContainer.jsx - Full-screen note → Notes API client: dispatches edits
client/src/components/Note.jsx - Full-screen note → Confirm dialog: uses
client/src/components/Note.jsx - Note cards → Notes API client: dispatches note actions
client/src/components/MiniNote.jsx - Navigation and profile → Confirm dialog: uses
client/src/components/Nav.jsx - Note navigation → Popup state: updates
client/src/components/Sidebar.jsx - Redux store → Notes state: registers reducer
client/src/store/index.js - Redux store → Popup state: registers reducer
client/src/store/index.js - Notes state → Notes API client: handles thunk results
client/src/store/slices/notes_slice.js - Notes API client → Backend URL: uses base URL
client/src/store/thunks/notes_thunk.js - Login and registration → Backend URL: uses API URL
client/src/pages/Login.jsx - Notes API client → HTTP server: calls notes API
- Login and registration → HTTP server: calls auth API
- HTTP server → Auth routes: mounts
server/server.js - HTTP server → Notes routes: mounts
server/server.js - Auth routes → Authentication: routes requests
server/routes/auth-routes.js - Auth routes → Validation middleware: validates registration
server/routes/auth-routes.js - Auth routes → Registration validation: uses schema
server/routes/auth-routes.js - Authentication → MySQL connection: queries users
server/controllers/auth-controller.js - Notes routes → Notes operations: routes requests
server/routes/notes-routes.js - Notes routes → JWT authentication: protects routes
server/routes/notes-routes.js - Notes operations → MySQL connection: queries notes
server/controllers/notes-controller.js - MySQL connection → MySQL: connects to
server/config/db-config.js