🚀 Add a New Profile Page to King Hub #40
Description
-
Description:
The King Hub food delivery website currently lacks a dedicated Profile Page where users can view and manage their account details, order history, payment methods, and preferences. To enhance user experience, we need to create a fully functional profile page with an intuitive UI and essential features. -
Task Breakdown:
✅ 1. UI Design & Layout (Frontend - React & Tailwind)
Create a two-column layout (Profile info on left, Order history & settings on right).
Design a modern, user-friendly interface with Tailwind CSS.
Add a profile picture upload feature with preview.
Ensure a fully responsive UI for mobile & desktop.
✅ 2. User Information Section
Display user details: Name, Email, Phone, Address.
Allow users to edit & update their information.
✅ 3. Order History Section
Fetch and display latest orders with status (Delivered, Pending, Canceled).
Show order details: Items, Total Price, Date, Payment Status.
Implement a "View More" button for older orders.
✅ 4. Payment Methods Section
Display saved payment methods (Cards, UPI, etc.).
Provide an option to add/edit/remove payment methods.
✅ 5. Saved Addresses Section
List user’s saved delivery addresses.
Allow users to add, edit, or delete addresses.
✅ 6. Logout Functionality
Add a logout button to securely log users out.
-
Technical Details:
Frontend: React.js + Tailwind CSS
Backend: Node.js + Express.js (for API requests)
Database: MongoDB (to store user profile data) -
Acceptance Criteria:
Users can view & edit their profile details.
Order history is displayed with real-time updates.
Users can manage payment methods & saved addresses.
The page is fully responsive & mobile-friendly.
A logout button is available. -
Additional Notes:
This profile page will provide a seamless user experience, making it easy for users to manage their account, track their orders, and update personal details efficiently.