How nlxx14/react-vite-user-directory works
This is a student-directory web application with account registration/login, authenticated student records, and image upload/delete. Users enter through the browser, register or log in, then reach the protected student page; the backend exposes separate authentication, student CRUD, and upload APIs. The source excerpts establish backend route wiring and login-token handling, but do not show the student page’s API calls or the upload UI, so those links are omitted. The README is empty; unsampled frontend behavior is not inferred.
Main entry points: server.js Express API · App.jsx Route application · upload.js Image endpoints · students.js Student endpoints
Components 20
Web client
- Route application
user-directory/src/App.jsx - Authentication state
user-directory/src/context/AuthContext.jsx - Auth hook
user-directory/src/hooks/useAuth.jsx - Protected route
user-directory/src/components/ProtectedRoute.jsx - Login page
user-directory/src/pages/Login.jsx - Registration page
user-directory/src/pages/Register.jsx - Students page
user-directory/src/pages/Students.jsx - Student card
user-directory/src/UserCard.jsx
API and security
- Express API
user-directory/server.js - Account endpoints
user-directory/routes/auth.js - Student endpoints
user-directory/routes/students.js - Image endpoints
user-directory/routes/upload.js - JWT middleware
user-directory/middleware/auth.js - Image validation
user-directory/middleware/upload.js
Persistence
- User records
user-directory/models/User.js - Student records
user-directory/models/Student.js
Image storage
- Cloudinary config
user-directory/config/cloudinary.js
Other components
- Directory user
- MongoDB
- Cloudinary
Connections 23
- Directory user → Route application: uses
- Route application → Login page: routes to
user-directory/src/App.jsx - Route application → Registration page: routes to
user-directory/src/App.jsx - Route application → Protected route: guards students
user-directory/src/App.jsx - Protected route → Students page: renders
user-directory/src/App.jsx - Route application → Auth hook: reads auth
user-directory/src/App.jsx - Login page → Auth hook: uses
user-directory/src/pages/Login.jsx - Registration page → Directory user: accepts registration
- Auth hook → Authentication state: reads context
user-directory/src/hooks/useAuth.jsx - Authentication state → Express API: posts login
user-directory/src/context/AuthContext.jsx - Directory user → Express API: sends API requests
- Express API → Account endpoints: mounts
user-directory/server.js - Express API → Student endpoints: mounts
user-directory/server.js - Express API → Image endpoints: mounts
user-directory/server.js - Account endpoints → User records: queries users
user-directory/routes/auth.js - Student endpoints → JWT middleware: checks JWT
user-directory/routes/students.js - Student endpoints → Student records: reads and writes
user-directory/routes/students.js - Image endpoints → JWT middleware: checks JWT
user-directory/routes/upload.js - Image endpoints → Image validation: validates file
user-directory/routes/upload.js - Image endpoints → Cloudinary config: uses client
user-directory/routes/upload.js - Express API → MongoDB: connects
user-directory/server.js - Cloudinary config → Cloudinary: configures
user-directory/config/cloudinary.js - Image endpoints → Cloudinary: uploads and deletes
user-directory/routes/upload.js