How khayb1/fullstack-blog works
This is a blog application: readers browse posts and categories, open individual posts, and authenticated authors can register, sign in, upload images, and create or edit posts. The browser UI is routed through a shared layout and auth context; its API requests reach Express routes and controllers, which query MySQL. The graph also preserves account, user-route, and related-post components indicated by the source index. Some page and route implementations were not excerpted, so their internal behavior and unshown connections are omitted.
Main entry points: Pages.jsx Page router · index.js HTTP server · auth.js Auth routes · posts.js Post routes
Components 22
Web application
- App shell
client/src/App.jsx - Page router
client/src/pages/Pages.jsx - Post feed
client/src/pages/Home.jsx - Post detail
client/src/pages/Single.jsx - Related posts
client/src/components/Menu.jsx - Navigation
client/src/components/Navbar.jsx - Footer
client/src/components/Footer.jsx - Not found
client/src/pages/NotFound.jsx
Accounts
- Auth context
client/src/context/authContext.jsx - Sign in
client/src/pages/Login.jsx - Registration
client/src/pages/Register.jsx - Auth routes
api/routes/auth.js - Auth controller
api/controllers/auth.js
Publishing
- Post editor
client/src/pages/Write.jsx - Post routes
api/routes/posts.js - Post controller
api/controllers/post.js - Uploaded files
client/public/upload
API and storage
- HTTP server
api/index.js - User routes
api/routes/users.js - User controller
api/controllers/user.js - MySQL blog
api/db.js
Other components
- Reader or author
Connections 29
- Reader or author → App shell: uses
- App shell → Page router: renders
client/src/App.jsx - Page router → Post feed: routes to
client/src/pages/Pages.jsx - Page router → Post detail: routes to
client/src/pages/Pages.jsx - Page router → Post editor: routes to
client/src/pages/Pages.jsx - Page router → Sign in: routes to
client/src/pages/Pages.jsx - Page router → Registration: routes to
client/src/pages/Pages.jsx - Page router → Not found: routes to
client/src/pages/Pages.jsx - Page router → Navigation: renders
client/src/pages/Pages.jsx - Page router → Footer: renders
client/src/pages/Pages.jsx - Post detail → Related posts: renders
client/src/pages/Single.jsx - Sign in → Auth context: uses
client/src/pages/Login.jsx - Navigation → Auth context: uses
client/src/components/Navbar.jsx - App shell → Auth context: wrapped by
client/src/main.jsx - Sign in → Auth routes: requests login
- Registration → Auth routes: requests registration
- Auth context → Auth routes: requests logout
client/src/context/authContext.jsx - Post editor → Post routes: sends post changes
client/src/pages/Write.jsx - Post feed → Post routes: loads posts
- Related posts → Post routes: loads category posts
client/src/components/Menu.jsx - Post editor → HTTP server: uploads image
client/src/pages/Write.jsx - HTTP server → Uploaded files: writes upload
api/index.js - HTTP server → Post routes: mounts routes
api/index.js - HTTP server → Auth routes: mounts routes
api/index.js - HTTP server → User routes: mounts routes
api/index.js - Auth routes → Auth controller: dispatches to
api/routes/auth.js - Post routes → Post controller: dispatches to
api/routes/posts.js - Auth controller → MySQL blog: queries
api/controllers/auth.js - Post controller → MySQL blog: queries
api/controllers/post.js