Dept-Connect

Department Connect — a small React + Firebase application for submitting and tracking department feedback/requests. The app uses Tailwind CSS for styling and Firebase Firestore + Authentication for persistence and admin access.

---

Key features

• Submit feedback forms and receive a tracking ID (e.g., TK-XXXXXXXX).
• Track a submission by entering the tracking ID on the Track page.
• Admin panel to view feedbacks, mark as read, and reply to users.
• Tailwind CSS for rapid UI development and Heroicons for icons.

---

Project structure (important files)

• src/ — React source code
  • pages/ — page components (Home, Admin, Feedback, Track, Login)
  • components/ — shared components (Navbar, PrivateRoute)
  • contexts/AuthContext.jsx — Firebase auth state provider
  • firebaseConfig.js — Firebase app initialization (exported db and auth)
• public/ — static assets
• package.json — project dependencies and scripts

---

Requirements

• Node.js (16+ recommended)
• npm
• A Firebase project with Firestore and Authentication enabled

---

Setup & run (development)

Open a PowerShell terminal in your localhost and run:

npm install
npm start

The app will run on http://localhost:3000 by default.

---

Firebase configuration

This project expects Firebase to be initialized in src/firebaseConfig.js (already committed here). For a production-ready setup you should move the config into environment variables and avoid committing secrets.

Steps to prepare Firebase:

1. Go to the Firebase Console and create a new project (or use an existing one).
2. In "Authentication" -> "Sign-in method", enable Email/Password.
3. In "Authentication" -> "Users" create two admin users (emails + passwords) that will be used to sign in.
4. In "Firestore" create a collection named feedback (security rules should be configured appropriately for production).
5. Replace the contents of src/firebaseConfig.js with your Firebase config (or set up env variables in a more secure setup).

Admin emails

Open src/components/PrivateRoute.jsx and update the ADMIN_EMAILS array to include the two admin emails you created in Firebase. Example:

const ADMIN_EMAILS = ["XXXXXXXX@gmail.com", "XXXXXXXX@gmail.com"];

This ensures only those authenticated users can access /admin.

---

How it works (high level)

• When a user submits feedback (on /feedback) the app generates a tracking ID (TK-XXXXXXXX), stores the feedback in Firestore with trackingId, status, and createdAt, and shows the ID to the user.
• The Track page (/track) looks up the feedback collection by trackingId and displays status, timeline and admin reply if present. If no matching Firestore document is found, a small set of mock data is used for demonstration.
• Admins sign in via Firebase Auth on the Login page. The Admin panel (/admin) listens to the feedback collection and allows admins to mark items as read and save replies. adminReply and status are stored on the document.

---

Dev notes & troubleshooting

• If Tailwind directives (@tailwind base;) show warnings in VS Code, install the "Tailwind CSS IntelliSense" extension and reload VS Code. A .vscode/settings.json with css.validate: false is included in the repo to reduce false positives.
• To see real Firestore data on the Track page, make sure Firestore documents contain a trackingId field in uppercase (the app uppercases input when searching).
• If Firebase Auth sign-in fails, ensure Email/Password sign-in is enabled in the Firebase Console and that the user exists.

---

Possible improvements

• Use crypto.randomUUID() or server-side generated IDs for stronger, collision-free tracking IDs.
• Add email notifications when an admin replies.
• Add pagination/filters and search in the Admin feedback list.
• Harden Firestore security rules for production.

---

Contributing

Feel free to open issues or submit PRs. Keep changes small and include brief testing instructions.

---

License

ISC

---

If you want, I can:

• Add a quick script to seed the two admin accounts via the Firebase Admin SDK (requires server credentials).
• Wire up an email notification when an admin replies.
• Add a small visual confirmation on the Track page when a reply exists.

Tell me which follow-up you'd like and I can implement it next.