├── C001-assets ├── banner-img-1.png ├── doctor-sample.png ├── logo.png ├── react.svg ├── success-doctor.png ├── success-patients.png ├── success-review.png └── success-staffs.png ├── C001-req.md ├── C002-assets ├── banner-img-1.png ├── doctor-sample.png ├── lawyer.png ├── logo-footer.png ├── logo.png ├── react.svg ├── success-doctor.png ├── success-patients.png ├── success-review.png └── success-staffs.png ├── C002-req.md └── readme.md /C001-assets/banner-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/banner-img-1.png -------------------------------------------------------------------------------- /C001-assets/doctor-sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/doctor-sample.png -------------------------------------------------------------------------------- /C001-assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/logo.png -------------------------------------------------------------------------------- /C001-assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /C001-assets/success-doctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/success-doctor.png -------------------------------------------------------------------------------- /C001-assets/success-patients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/success-patients.png -------------------------------------------------------------------------------- /C001-assets/success-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/success-review.png -------------------------------------------------------------------------------- /C001-assets/success-staffs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C001-assets/success-staffs.png -------------------------------------------------------------------------------- /C001-req.md: -------------------------------------------------------------------------------- 1 | # 🏥 Medical Appointment Booking Application 2 | 3 | Build A React-based web application for scheduling and managing doctor appointments. The application includes multiple pages, data persistence, interactive UI elements, routing, and visual representation using charts. 4 | 5 | --- 6 | 7 | ## 🔝 Navbar 8 | 9 | - Visible on all pages (including error routes) 10 | - Includes: 11 | - Site Logo & Name (as per Figma) 12 | - 4 Navigation Menus (as per Figma) 13 | - A Button on the right (as per Figma) 14 | 15 | --- 16 | 17 | ## 🔚 Footer 18 | 19 | - Visible on all pages **except** error routes 20 | - Includes: 21 | - Centered Logo 22 | - Navigation Menus (as per Figma) 23 | - 3 Social Icons (redirect to developer's personal profiles) 24 | 25 | --- 26 | 27 | ## 🏠 Homepage 28 | 29 | ### ➤ Banner Section 30 | 31 | - Gradient background with border (as per Figma) 32 | - Center-aligned heading & text (as per Figma) 33 | - Two positioned images (as per Figma) 34 | 35 | ### ➤ Doctors Section 36 | 37 | - Center-aligned heading & text (as per Figma) 38 | - Display 6 doctor cards in a 3x2 grid 39 | - Each card includes: 40 | - Doctor image 41 | - Name 42 | - Education 43 | - Speciality 44 | - Experience 45 | - Registration Number 46 | - “View Details” button (navigates to doctor details route) 47 | - There will be a Show All Button. on Clicking it , You have to load all the 12 Doctors Card in your UI. 48 | 49 | 50 | ### ➤ Success Section 51 | 52 | - Display 4 square cards (as per Figma) with: 53 | - Icon 54 | - Number 55 | - Card Title 56 | 57 | --- 58 | 59 | ## 👨‍⚕️ Doctor Details Page 60 | 61 | - Page Info Card titled “Doctor’s Profile Details” with a slogan (as per Figma) 62 | - Doctor Info Section: 63 | - Left-aligned image 64 | - Name, Education, Specialities, Designation, Workplace, Fee 65 | - Availability Section (array of days) 66 | - Appointment Card includes: 67 | - Availability Badge 68 | - “Book Now” Button 69 | 70 | ### ➤ Book Now Button Behavior 71 | 72 | - If user **has not** booked: 73 | - Create an appointment 74 | - Show a success toast with doctor name 75 | - Redirect to Booking Page 76 | - If user **already** booked: 77 | - Show error toast 78 | - Do not proceed 79 | 80 | --- 81 | 82 | ## 📅 Bookings Page 83 | 84 | - Show all booked appointments in 1-column format (as per Figma) 85 | - Each appointment card includes: 86 | - Doctor Name 87 | - Fee 88 | - Education 89 | - Speciality 90 | - “Cancel Appointment” Button 91 | - If **no appointments** found: 92 | - Show heading & a button to navigate to Homepage 93 | - Appointment state should persist on page reload ( **USE LOCALSTORAGE** ) 94 | - Cancel button removes the appointment 95 | 96 | --- 97 | 98 | ## 📝 Blogs Page 99 | 100 | Design a blogs page to answer the following: 101 | 102 | 1. What is `useState` and how does it work in React? 103 | 2. What is the purpose of `useEffect` in React? 104 | 3. What is a custom hook in React and when should you use one? 105 | 4. Difference between controlled and uncontrolled components? Which one is better? 106 | 5. Tell us something about `useFormStatus()` (explore and explain) 107 | 108 | --- 109 | 110 | ## ❌ Error Page 111 | 112 | - Displayed for all invalid routes (e.g., `/contacts`) 113 | - Navbar should be visible 114 | - Footer should **not** be visible 115 | - Button to redirect users to Homepage 116 | 117 | --- 118 | 119 | # Challenge Requirements 120 | 121 | ## 📊 Recharts 122 | 123 | - Visualize appointment fees using **Recharts** (as per Figma) 124 | - Canceling appointments should update the chart 125 | - If no appointments exist, do **not** show chart 126 | 127 | --- 128 | 129 | ## 🔢 Counting Animation 130 | 131 | - Use [`react-countup`](https://www.npmjs.com/package/react-countup) for counting animation on the Homepage 132 | 133 | --- 134 | 135 | ### ➤ Logo & Title 136 | 137 | - Add Site Logo & Website Title 138 | 139 | ### ➤ Invalid Dynamic Routes 140 | 141 | - If invalid route visited (e.g., `/doctors/invalid-id`), show error message 142 | 143 | ### ➤ Redirection & Loading States 144 | 145 | - Show a loading animation on every route change 146 | - App must not crash on page reload 147 | - Show fallback loader during data fetch on any page reload 148 | 149 | --- 150 | 151 | ## ✨ Optional Features 152 | 153 | ### ➤ Validate Booking Based on Availability 154 | 155 | - If today’s date doesn’t match doctor’s availability: 156 | - Show “Doctor is unavailable today” 157 | - Show “Unavailable” badge on doctor cards 158 | 159 | ### ➤ Dynamic Title using `useLocation()` 160 | 161 | - Change title dynamically: 162 | - Booking Page → `Booking` 163 | - Doctor Details → Doctor’s Name 164 | - **Do not** use third-party NPM packages for this feature 165 | 166 | --- 167 | 168 | ## ✅ Notes 169 | 170 | - Have to work with the assigned Category. 171 | - Minimum 10 Github Commits 172 | - No Lorem Ipsum 173 | - Image / video / resources will be relevant to the site 174 | - Make your project responsive 175 | 176 | --- 177 | 178 | Happy Coding! 🚀 179 | -------------------------------------------------------------------------------- /C002-assets/banner-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/banner-img-1.png -------------------------------------------------------------------------------- /C002-assets/doctor-sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/doctor-sample.png -------------------------------------------------------------------------------- /C002-assets/lawyer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/lawyer.png -------------------------------------------------------------------------------- /C002-assets/logo-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/logo-footer.png -------------------------------------------------------------------------------- /C002-assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/logo.png -------------------------------------------------------------------------------- /C002-assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /C002-assets/success-doctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/success-doctor.png -------------------------------------------------------------------------------- /C002-assets/success-patients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/success-patients.png -------------------------------------------------------------------------------- /C002-assets/success-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/success-review.png -------------------------------------------------------------------------------- /C002-assets/success-staffs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A08-router-warrior/fb0203fdccf8decef476186385a09771a0f4e6f7/C002-assets/success-staffs.png -------------------------------------------------------------------------------- /C002-req.md: -------------------------------------------------------------------------------- 1 | # 🧪 Lawyer Appointment Booking Application 2 | 3 | Welcome, Developer! 4 | 5 | Your task is to build a React-based **Lawyer Appointment Booking Web App** that allows users to browse lawyer profiles and schedule appointments. The application includes multiple pages, data persistence, interactive UI elements, routing, and visual representation using charts. 6 | 7 | --- 8 | 9 | ## ✅ Main Requirements 10 | 11 | ### 🧭 Navbar (Visible on All Pages) 12 | 13 | - [ ] Display site **Logo** and **Site Name** 14 | - [ ] Add **4 Navigation Menu Items** (as per Figma) 15 | - [ ] Add a **button** at the right side (as per Figma) 16 | - [ ] Should be consistent on all pages including the error page 17 | 18 | --- 19 | 20 | ### 🦶 Footer (Not Visible on Error Page) 21 | 22 | - [ ] Center-aligned **Logo** 23 | - [ ] Navigation menu items (as per Figma) 24 | - [ ] Include **3 Social Media Icons** that link to your personal profiles 25 | - [ ] Display footer on **all pages except error routes** 26 | 27 | --- 28 | 29 | ## 🏠 Homepage 30 | 31 | ### 🎯 Banner Section 32 | 33 | - [ ] Center-aligned heading and description (as per Figma) 34 | - [ ] Apply background image (as per Figma) 35 | 36 | ### ⚖️ Lawyers Section 37 | 38 | - [ ] Add a section heading and text (as per Figma) 39 | - [ ] Display **6 lawyers** in a `3 x 2`/ `2 x 3` grid format 40 | - [ ] Each Lawyer Card should include: 41 | - [ ] Image 42 | - [ ] Name 43 | - [ ] Speciality 44 | - [ ] Experience 45 | - [ ] License Number 46 | - [ ] “View Details” button → Navigates to Lawyer Details page 47 | - [ ] - There will be a Show All Button. on Clicking it , You have to load all the 12 Doctors Card in your UI. 48 | 49 | ### 🏆 Success Section 50 | 51 | - [ ] Show **4 Square Cards** with: 52 | - Icon 53 | - Number (with counting animation) 54 | - Title 55 | 56 | --- 57 | 58 | ## 👨‍⚖️ Lawyer Details Page 59 | 60 | - [ ] Show a top info card titled “Lawyer’s Profile Details” and slogan as Figma 61 | - [ ] Display: 62 | - [ ] Lawyer Image (left) 63 | - [ ] Name, Experience, Speciality, Fee 64 | - [ ] Availability (array of days) 65 | - [ ] Include Appointment Card with: 66 | - Availability badge 67 | - Book Now button 68 | 69 | ### 🧾 Booking Logic 70 | 71 | - [ ] If appointment NOT already booked: 72 | - Create new appointment 73 | - Show **success toast** with lawyer’s name 74 | - Navigate user to **Bookings page** 75 | - [ ] If already booked: 76 | - Show **error toast** 77 | - Do not create duplicate booking 78 | 79 | --- 80 | 81 | ## 📅 Bookings Page 82 | 83 | - [ ] Show all booked appointments in **1-column card** format 84 | - Each card must display: 85 | - Lawyer Name 86 | - Fee 87 | - Speciality 88 | - Cancel Appointment Button 89 | - [ ] If **no appointments**: 90 | - Display a heading message 91 | - Show a button to return to Homepage 92 | - [ ] Cancel button must remove the appointment 93 | - [ ] Bookings should persist even after page reload **(use localStorage)** 94 | 95 | --- 96 | 97 | ## 📚 Blogs Page 98 | 99 | - Design a Blog page using your own Design and creativity 100 | - Answer the following questions as blog articles: 101 | 102 | 1. What is `useState` and how does it work in React? 103 | 2. What is the purpose of `useEffect` in React? 104 | 3. What is a custom hook in React and when should you use one? 105 | 4. Difference between controlled and uncontrolled components. Which one is better? 106 | 5. Tell us something about `useFormStatus()` in React. 107 | 108 | --- 109 | 110 | ## ❌ Error Page (404) 111 | 112 | - [ ] Display a custom-designed error page on **invalid routes** 113 | - [ ] Must include Navbar 114 | - [ ] Footer **should not appear** 115 | - [ ] A button to redirect the user to Homepage 116 | 117 | --- 118 | 119 | # Challenge Requirements 120 | 121 | ## 📊 Recharts 122 | 123 | - Visualize appointment fees using **Recharts** (as per Figma) 124 | - Canceling appointments should update the chart 125 | - If no appointments exist, do **not** show chart 126 | 127 | --- 128 | 129 | ## 🔢 Counting Animation 130 | 131 | - Use [`react-countup`](https://www.npmjs.com/package/react-countup) for counting animation on the Homepage 132 | 133 | --- 134 | 135 | ### ➤ Logo & Title 136 | 137 | - Add Site Logo & Website Title 138 | 139 | ### ➤ Invalid Dynamic Routes 140 | 141 | - If invalid route visited (e.g., `/lawyer/invalid-id`), show error message 142 | 143 | ### ➤ Redirection & Loading States 144 | 145 | - Show a loading animation on every route change 146 | - App must not crash on page reload 147 | - Show fallback loader during data fetch on any page reload 148 | 149 | --- 150 | 151 | ## ✨ Optional Features 152 | 153 | ### ➤ Validate Booking Based on Availability 154 | 155 | - If today’s date doesn’t match Lawyer’s availability: 156 | - Show “Lawyer is unavailable today” 157 | - Show “Unavailable” badge on Lawyer cards 158 | 159 | ### ➤ Dynamic Title using `useLocation()` 160 | 161 | - Change title dynamically: 162 | - Booking Page → `Booking` 163 | - Lawyer Details → Lawyer’s Name 164 | - **Do not** use third-party NPM packages 165 | 166 | --- 167 | 168 | ## ✅ Notes 169 | 170 | - Have to work with the assigned Category. 171 | - Minimum 10 Github Commits 172 | - No Lorem Ipsum 173 | - Image / video / resources will be relevant to the site 174 | - Make your project responsive 175 | 176 | --- 177 | 178 | Happy Coding! 🚀 179 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### WELCOME TO ASSIGNMENT-008 2 | 3 | # 🛣️ router-warrior 4 | 5 | ⚠️ You must have to complete your own category 6 | 7 | ## Private Repo Link : [https://classroom.github.com/a/rdyQmXmv](https://classroom.github.com/a/rdyQmXmv) 8 | 9 | **📅 Deadline For 60 marks**: 23th April , 2025 ( 11:59 pm ⏱️) 10 | 11 | **📅 Deadline For 50 marks**: 24th April , 2025 ( 11:59 pm ⏱️) 12 | 13 | **📅 Deadline For 30 marks**: Any time after 24th April , 2025 14 | 15 | --- 16 | 17 | ## Categories 18 | ### [Category -001](/C001-req.md) 🏥 Medical Appointment Booking Application 19 | ### [Category -002](/C002-req.md) ⚖️ Lawyer Appointment Booking Application 20 | --------------------------------------------------------------------------------