How sagun-basnet/contactapp works
This repository combines a ContactHub-branded React frontend with an Express API for account authentication and contact CRUD. The evidenced account workflow is browser-side login/logout through the API helper, routed to authentication handlers that query MySQL; registration and password recovery also send OTP email. The frontend excerpt is primarily a marketing landing page, not the contact-management interface. Route mounting is visible, but the post-route/controller wiring and protected-route usage are not sampled, so those connections are left out.
Main entry points: index.js Express server · auth.js Auth handlers · db.js MySQL connection · main.jsx React entry
Components 15
Frontend
- React entry
frontend/src/main.jsx - ContactHub landing
frontend/src/App.jsx - Auth context
frontend/src/context/authContext.jsx - HTTP client
frontend/src/utils/api.jsx
API runtime
- Express server
api/index.js - MySQL connection
api/db/db.js
Identity
- Auth routes
api/routes/authRoute.js - Auth handlers
api/controller/auth.js - JWT role checks
api/middleware/isAuth.js - OTP mailer
api/utils/mail.js
Contacts
- Contact routes
api/routes/postRoute.js - Contact handlers
api/controller/post.js
Other components
- Browser user
- Email service
- Contactapp database
Connections 12
- Browser user → React entry: opens
- React entry → ContactHub landing: renders
- Auth context → HTTP client: calls
- HTTP client → Express server: HTTP requests
- Express server → Auth routes: mounts
- Express server → Contact routes: mounts
- Auth routes → Auth handlers: dispatches
- Auth handlers → MySQL connection: queries
- Auth handlers → OTP mailer: sends OTP
- OTP mailer → Email service: sends email
- MySQL connection → Contactapp database: connects
- Contact handlers → MySQL connection: queries