✨ User Profile Enhancements & API Integration

[MohammedFaraan]

User Profile Enhancements & API Integration

🛠️ Changes Implemented

1. User Profile Menu Fix

• Resolved issue where the User Profile Menu was fully visible on the homepage.
• Fixed broken menu links caused by styling issues.
• Improved dropdown styling & interactivity for better UX.

2. User Model Update

• Extended User Schema with the following fields:
  • name
  • gender
  • profile_picture

3. Backend Enhancements

• Created userController with APIs for:
  • Fetching all users
  • Fetching a user by username
  • Updating user details
• Registered the above APIs in userRoutes.

4. Frontend Integration

• Integrated new user APIs into the User Profile page.
• Implemented Profile Picture Update functionality (frontend ↔ backend).
• Made the Profile Page fully responsive across devices.

---

✅ Outcome

• Fixed UI/UX issues in profile dropdown.
• Enabled full user profile management (view, update, profile picture).
• Improved responsive design for mobile and desktop.
• Strengthened backend integration for user management.

---

This pull request closes issue no. https://github.com/codervivek5/VigyBag/issues/2622

---

🔖 Tags

• enhancement
• bugfix
• frontend
• backend
• api
• responsive-design
• OSCI-25
• High Priority

---

📸 Screenshots

🔹 Before

🔹 After – Fixed Profile Menu

🔹 Updated Profile Page

🔹 Responsive Profile Page

Summary by CodeRabbit

• New Features

  • Profile page now loads and updates extended user details (name, gender, profile picture via URL); improved coupons display and copy action; FAQs and prompts added.

• Refactor

  • User endpoints reorganized into list, fetch-by-username, and update routes; public user API base path changed to /api/users.

• Chore

  • Environment variable loading enabled for server startup.

• Style

  • Navbar: "Meet the Makers" restored; searchable items expanded and avatar dropdown layout refined.

[vercel[bot]]

@MohammedFaraan is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

Adds dotenv loading and remaps user routes, introduces a User controller (list, fetch-by-username, update), extends the User schema with optional fields, refactors user routes to use the controller, and wires frontend Profile and Navbar to the new backend endpoints.

Changes

Cohort / File(s)	Summary
Backend bootstrap backend/app.js	Import and invoke dotenv.config() and change user route mount from /vpi to /api/users.
User model updates backend/models/User.js	Add optional schema fields: name, gender, profile_picture (default null).
User controller backend/controllers/userController.js	New module exporting getUsers, getUserByUsername, updateUser with validation, DB queries/updates, and error logging.
User routes refactor backend/routes/userRoutes.js	Replace inline handlers with controller delegation: GET /, GET /:user_name, PUT /:id; previous POST /update-details commented out.
Profile page integration src/User/pages/Dashboard/ProfilePage.jsx	Centralize user state, fetch user by username on mount, PUT /api/users/:id for updates, profile-picture-by-URL flow, UI/layout and coupon display changes.
Navbar UI adjustments src/User/components/Navbar/UserNavbar.jsx	Restructure avatar/dropdown trigger and positioning (top-14), re-enable “Meet the Makers”, update searchable/latest items and dropdown composition; minor formatting tweaks.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant FE as ProfilePage (FE)
  participant API as /api/users (BE)
  participant DB as MongoDB (User)

  rect rgb(245,255,240)
  note right of FE #f5fff0: Load profile
  U->>FE: Open Profile Page
  FE->>API: GET /api/users/:user_name
  API->>DB: findOne({ username }) (exclude password,__v)
  DB-->>API: user doc / null
  API-->>FE: 200 { user } / 404
  FE-->>U: populate form / show not found
  end

  rect rgb(240,248,255)
  note right of FE #f0f8ff: Update profile
  U->>FE: Submit updated fields
  FE->>API: PUT /api/users/:id {name,email,phone,gender,profile_picture}
  API->>DB: findByIdAndUpdate(id, payload, { new: true })
  DB-->>API: updated user / error
  API-->>FE: 200 { message,user } / 400/404/500
  FE-->>U: show toast / Swal
  end

sequenceDiagram
  autonumber
  actor U as User
  participant NAV as Navbar (FE)

  U->>NAV: Click avatar/username
  NAV->>NAV: Toggle dropdown (position: top-14)
  U->>NAV: Select menu item (incl. Meet the Makers)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• codervivek5/VigyBag#2610 — touches src/User/components/Navbar/UserNavbar.jsx to add/enable the "Meet the Makers" entry (UI overlap).

Suggested labels

OSCI, 3⭐⭐⭐

Suggested reviewers

• codervivek5

Poem

A rabbit sips on morning dew,
Routes and fields arranged anew,
Dropdowns hop and profiles shine,
Tiny changes, neatly line by line. 🥕

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[MohammedFaraan]

This pull request closes issue no. #2622

[MohammedFaraan]

Sir, I have updated the code and fixed all the issue which were mentioned above. Some of them are not necessary, so I haven't done that.

Note: I have included the API URL of the localhost, change it when you deploy it! const API_URL = "http://localhost:3000/api/users";

[codervivek5]

@MohammedFaraan can we connect via meeting ??

[MohammedFaraan]

@codervivek5 Yay sure. When you will conduct? You Can also message me through LinkedIn, as I have already connected with you.

[codervivek5]

Kindly mention the issue number in first commet as Close #issue_number

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vigybag	Ready	Preview	Comment	Aug 27, 2025 6:46pm