Abdulrahman 6th PR: Whiteboard Drawing Canvas + LessonConnect Landing Page (MVP)

[AbdulAlharbi]

Implement LessonConnect Whiteboard MVP (Part 1) and a modern landing page with animated visuals and glassmorphic UI.

---

Branch: whiteboard_canvas_base_MVP

---

Overview

What does this PR do?

This PR delivers the core drawing functionality of the LessonConnect Whiteboard and a sleek, animated Landing Page that serves as a launch point into the whiteboard experience.

Together, they establish a polished, modern entry point and foundational drawing interface for the app. The whiteboard includes responsive interactivity with export tools, while the landing page offers a high-impact first impression through animation and styled navigation.

---

Key Features & Changes

✅ Landing Page (Pre-Whiteboard Entry Screen)

• Animated Background: Fluid multi-color gradient powered by keyframe animation.
• Glassmorphic Overlay: Uses backdrop-filter and blur to create a clean, modern UI.
• CTA Button: “Launch Whiteboard” button with hover scale animation.
• Navigation: Clicking the button navigates to /WhiteboardCanvas using useNavigate() (React Router).
• Scoped Styling: All styles scoped under .landing-page for modularity and isolation.

✅ Drawing Canvas (Core Logic)

• Canvas Initialization: Uses useRef and useEffect to set up an HTML canvas.
• Mouse Event Handlers: Implements drawing via onMouseDown, onMouseMove, and onMouseUp.
• Dynamic Brush Updates: Reactively adjusts drawing color and thickness.

✅ Toolbar Tools

• Color Selection: Choose from 16 preset colors.
• Brush Size Control: Adjust brush thickness with a slider.
• Clear Button: Wipe the canvas clean.
• Download Button: Export the canvas as a PNG image.

✅ Styling & UX

• Modern Look & Feel: Utilizes CSS variables, gradients, glassmorphism, and smooth hover/transition effects.
• Responsive Layout: Layouts are scoped under .whiteboard-container and .landing-page to prevent style leakage.

---

Why This Is Needed

What problem does this solve?

This PR bridges the user journey from first entry to canvas interaction. Before this, users were dropped straight into the whiteboard without context. The landing page introduces branding and CTA-focused flow. The whiteboard MVP then enables interactive drawing needed for visual instruction and idea sharing.

---

Implementation Details

• LandingPage.jsx: Stateless component with animated styles and router-based navigation.
• useNavigate Hook: Enables programmatic routing to the whiteboard.
• Scoped Styling: Both components use scoped class prefixes (.landing-page, .whiteboard-container) for modularity and theme isolation.
• Canvas Rendering: Utilizes canvas.getContext("2d") and responsive scaling via devicePixelRatio.

---

Design Alignment

✅ Matches DP’s Whiteboard Interaction Flow, addressing:

• UC0: Launch via CTA on landing screen
• UC1: Launch Canvas
• UC2: Select Tool
• UC3: Adjust Color/Brush
• UC4: Draw Freehand
• UC5: Clear/Export

---

Related GitHub Issue

• Whiteboard MVP :: Feature Request: Interactive Drawing Canvas & Toolbar for Whiteboard #136

---

Related GitHub Discussion

• 💬 📢 Planning the LessonConnect Whiteboard MVP – Thoughts? #134

---

Prototype

📄 DP Whiteboard Layout
Design Portfolio : Whiteboard Conceptual Flow & Interface Breakdown

---

Initial Wireframe

This low-fidelity sketch illustrates the early layout thinking for the Whiteboard interface. It maps key components like the canvas, toolbar, video feed, and messaging area:

Hand-drawn concept showing canvas, toolbar, and messaging layout.

---

MVP Prototype (Current PR)

Layout showing visual whiteboard focus, toolbar, and future-ready.
The visual layout evolved into this higher-fidelity wireframe, featuring:

• Whiteboard canvas centered on the screen
• Toolbar options above the board
• Placeholder panels for chat and video (for future PR) [incoming next PR]

This PR brings the MVP prototype to life by implementing the interactive drawing canvas and scoped UI. The components established here are the foundation for the more advanced tutor and chat experience coming in PR 7.

---

Use Case Diagram – Whiteboard MVP

This diagram highlights the primary interactions a user can perform within the whiteboard interface:

• 🎨 Select Color
• ✏️ Adjust Brush Thickness
• 🖌️ Draw Freehand
• 💾 Download PNG

---

Sequence Diagram – Drawing & Download Flow

This sequence diagram outlines the step-by-step interaction from the moment the user presses the mouse to when they download their drawing:

• Initiating canvas drawing
• Updating canvas on mouse movement
• Completing drawing on mouse release
• Downloading canvas as image via toDataURL()

---

✅ These diagrams satisfy the minimum design modeling requirement for this feature, illustrating both user interaction flow and internal event handling logic clearly.

---

How to Test This PR

1. Run the LessonConnect Front End Server
2. Navigate to http://localhost:5173/Landingpage Updated links: http://localhost:5173/Student/LandingPage and http://localhost:5173/tutor/LandingPage
   ✅ You should see the animated Landing Page with branding and a CTA button.
3. Click "Launch Whiteboard"
   ✅ App navigates to /WhiteboardCanvas.
4. Test drawing functionality using the mouse on the canvas.
5. Adjust brush color and size using the toolbar.
6. Click the “Clear” button to erase the canvas.
7. Use the “Download” button to export the canvas as a PNG image.
8. Resize the browser window to ensure the layout is fluid and responsive.

---

Files Added/Modified

File	Description
LandingPage.jsx	Entry screen with animation, branding, and CTA
LandingPage.css	Fully scoped, responsive landing page styles
WhiteboardCanvas.jsx	Main canvas-only whiteboard component
WhiteboardCanvas.css	Scoped styling for the whiteboard canvas MVP
Services.jsx	Connected the LessonConnect Whiteboard link page
App.jsx	Routes set for Start Page and Whiteboard
Header.jsx	//Just added a placeholder for Whiteboard link

---

Current Build Overview (MVP)

This PR lays the groundwork for visual interaction. The next PR will evolve this foundation into a full communication shell, integrating video UI and chat behavior for a complete tutoring experience.

Start Page

Whiteboard page (MVP)

---

Future Enhancements (After MVP)

• Add shape tools (rectangle, circle)
• Enable multi-user collaboration and real-time sharing
• Animate the landing page button with hover-ripple or particles
• Add login/auth screen between landing and whiteboard

---

📍 What's Next 📍

The next pull request (PR 7) will complete the Whiteboard MVP by layering in user-tutor interaction, including:

• 🧑‍🏫 Tutor Contact Panel – A list of available tutors with avatars
• 🎥 Simulated Video Session – Placeholder UI with call controls
• 💬 Contextual Chat Panel – Appears during active sessions, simulates messaging flow

This next PR brings together layout, interactivity, and mock behavior to create a polished, end-to-end Whiteboard + Communication UX. It directly builds upon the components introduced in this PR, adding:

• State management for session transitions
• Mock interaction logic (delayed replies, typing indicators)
• UX responsiveness for full-width layouts

📦 Branch: whiteboard_canvas_Video_Chat_MVP
🔁 Ties into GitHub Issues: #135 and #137

✅ This will fulfill UC6–UC10 from Design Portfolio.

Stay tuned for PR 7 – Whiteboard Tutor Interaction: Video + Chat Shell UI.

---

AI Code Usage

Was AI-generated code used in this PR?

• Yes
• No direct AI-generated code was used in this PR

I used ChatGPT and GitHub Copilot for planning UI patterns and CSS animation strategies. All final code was hand-written and reviewed to fit the architecture of LessonConnect.

---

Checklist for Reviewers

• Does the landing page render with full-screen animated background and CTA?
• Does the whiteboard canvas load and respond to mouse input?
• Do all toolbar buttons (color, brush, clear, download) function as expected?
• Are all styles scoped under .landing-page and .whiteboard-container?

---

Final Notes

Thanks for reviewing this full-featured MVP + landing page PR!
I welcome any suggestions, especially around design and transition animations.
Feel free to leave comments or feedback in this PR or Discussion MVP Whiteboard.

— Abdulrahman

[AbdulAlharbi]

🙏 Reviewer Reply – Thanks Ashley!

Hey @ashley-arellano , thank you so much for the kind words and the thoughtful review!
I'm really glad you liked the animated landing page and found the whiteboard tools functional and intuitive.

---

✅ Follow-Up on Your Suggestion

I love your idea about adding a color picker tool — it would definitely take the whiteboard to the next level. I’ll be adding that to our Future Enhancements list and may spin it off as a follow-up feature PR soon.

Having custom color support + saved presets sounds perfect for longer tutoring sessions where flexibility really matters.

---

Thanks again for testing everything so thoroughly — I really appreciate your support!
Excited to push the next layer of interaction in PR 7 😄

— Abdulrahman

[FrankFurter123]

Hey @AbdulAlharbi ,

I saw you pulled from main and are already planning your next steps with such clarity.

I took a peek at the whiteboard and now it looks way better now with more drawing room on the canvas.
I saw you updated the app.jsx, great work. Now you need to update one line of code in my StudentView.jsx. Please find it in this picture on line 16 change the "whiteboard" for "LadingPage:

Current:

After:

Please feel free to reach out if you run into any questions while implementing the suggestions I gave you — especially around routing logic, theme integration, or dashboard connection. I’m happy to walk through anything or even pair up if needed. You’re doing a fantastic job with the whiteboard and landing flow.

— Frank

[AbdulAlharbi]

✅ Reviewer Reply To Frank's – All Updates Complete!

Hey @FrankFurter123 ! — just wanted to circle back and let you know that I’ve now completed all the changes you suggested in your awesome peer review! 🙌

---

🔧 Summary of Updates Implemented:

• ✅ Connected the whiteboard to both StudentView and TutorView using your safeRole logic
• ✅ Moved /LandingPage and /WhiteboardCanvas under the correct Student/Tutor protected routes
• ✅ Restricted public access to whiteboard routes
• ✅ Removed the Header.jsx placeholder link
• ✅ Increased canvas vertical height for better drawing space
• ✅ Cleaned up routing around the Services page (login logic handled will come in later smaller PRs)

I’ve also pushed all these changes — you can see the full commit trail. Thanks again for the guidance — it really helped polish the integration across the app!

---

🌘 About Dark Mode Support

The only item still pending is full Dark Theme support. I’ll be tackling that after the MVP is finalized and the communication UI (PR 7) is complete. Since I’m color blind, I’ll likely loop in a teammate to help validate contrast and accessibility when the time comes 😅

---

Let me know if you see anything else, or if you'd like to pair on dark mode or the next phase of UI integration. Appreciate you always! 🔥

— Abdulrahman

[FrankFurter123]

Hey @AbdulAlharbi , I am approving this PR! Great Job!!

[omgdory]

Hey Abdul, awesome work on this PR! The whiteboard feature is a fantastic addition and I'm glad to see this kind of interactive functionality coming together. The drawing canvas feels smooth and well-integrated, and it opens up a lot of potential for real-time collaboration during tutoring sessions, if time permits us to integrate it into the project. I also appreciate how clean the component structure is; it should be pretty easy to extend this later if we want to add features like erasing, color options, or saving drawings.

The landing page redesign looks clean, as well. The layout is clean, and the text content does a good job explaining what the app is about. Nice job balancing visual design with clear messaging!

[omgdory]

Also wanted to add that the hand-drawn concept looks absolutely magnificent 🤌

[EthanZ23]

PR Comment: Abdul, Ashley, and Frank: amazing coordination and thoughtful review discussions here

---

Why I am writing today:

After participating in your discussion “Planning the LessonConnect Whiteboard MVP - Thoughts?” (#134), I wanted to drop by and give this PR a thorough read and quick review. I strongly believe additional feedback always helps!

---

Initial Impression:

After thoroughly reading through the PR comments, checking on the webpage, and seeing the code, I can add on and say everything is looking exceptional and great. The UI is clean, elegant, and exactly aligned with the discussed plans. Here are a few highlights I particularly enjoyed:

• Landing Page: The animated gradient background strikes a perfect balance as it’s visually engaging without being too distracting.
• Whiteboard Download Feature: The inclusion of a download button is an excellent touch, allowing students easy access to content from tutoring sessions. Furthermore this is a standout feature compared to other platforms.


Everything looked like it functioned as expected for the MVP whiteboard and landing page.

Currently, I don’t have any suggestions for improvements; you've clearly thought through the design, functionality, and user onboarding very effectively. This PR is amazing and a great addition to LessonConnect.

---

Good job and keep up the outstanding work!

— Ethan

[aviendha-andrus]

This looks fantastic! The PR is super clear and well-structured, and I really appreciate how closely it follows the DP2 design flow. The landing page feels intentional and polished, and the transition into the whiteboard is smooth and purposeful. Getting the full drawing flow, toolbar tools, and clean UI all in place is very impressive. A whiteboard feature adds so much value to LessonConnect, especially for accessibility and future expansion. It opens the door for real-time online tutoring, which is essential for our platform. It’s clear you were thinking ahead to what’s next, and it all comes together in a really strong MVP. Keep up the good work!

[AbdulAlharbi]

🙌 Comment Reply – Thanks Dorian!

Hey @omgdory — really appreciate the kind words and thoughtful feedback!

I’m super glad you liked the canvas integration and the direction we’re taking with interactive features. Definitely agree — if we get the time, building in real-time collaboration would take this to the next level, and I’ve been keeping that in mind while structuring the component logic to stay modular and extendable.

Also appreciate your note on the landing page design + messaging — tried to keep it sleek without overwhelming first-time users.

And lol, big thanks for the shoutout on the hand-drawn concept — had fun putting that together 🎨🧠 I like to see LessonCOnnect come to life!

Let’s keep the momentum going! Looking forward to building on this foundation in the upcoming chat/video PRs.

— Abdulrahman

[AbdulAlharbi]

Comment Reply – Thanks Ethan!

Hey @EthanZ23 — really appreciate you taking the time to read through the PR and leave such detailed feedback! It means a lot coming from someone who’s been actively engaged in the planning discussions from the start 👏

---

💬 On Your Highlights

• I’m glad the animated gradient hit the mark — striking the balance between energy and clarity was definitely the goal there.
• And huge thanks for calling out the download button — I figured it would be a simple but impactful feature for tutors and students alike to save session content quickly.

---

Really appreciate you reinforcing that the implementation is aligned with our MVP plans. I’ve been keeping extensibility in mind, so hopefully future additions (like chat/video integration) will build just as cleanly on this foundation.

Thanks again for the kind words and encouragement — let’s keep LessonConnect pushing forward!

— Abdulrahman

[AbdulAlharbi]

Comment Reply – Thanks Aviendha!

Hey @aviendha-andrus — thank you so much for the kind words and thoughtful feedback! 🙌
It really means a lot to hear that the structure and flow felt aligned with DP2’s design — that was a big focus going into this PR.

---

I’m especially glad you called out the transition from landing page to whiteboard — I wanted that experience to feel intentional and natural. It’s awesome to see that come across!

And yes — the whiteboard is definitely just the beginning! I’ve been thinking a lot about where we can go next with real-time collaboration and accessibility-focused tools, and your comment reinforces that we're heading in the right direction.

Thanks again for the support — can’t wait to build on this with the chat/video integration next 🚀

— Abdulrahman

[Jose-Alarcon1]

Great work on this meaningful PR Abdul. It shows great design implementation. It also shows great team collaboration. Great work once again!

[AbdulAlharbi]

Comment Reply – Thanks Jose!

Hey @Jose-Alarcon1 — thank you so much for the kind words and thoughtful feedback!

I really appreciate you recognizing both the design side and the team collaboration behind this. It’s been awesome building this out alongside everyone, and I’m excited to keep pushing things forward with the next features.

Thanks again for the support!

— Abdulrahman

[SameerIssa]

Fantastic work on this PR abdul! It delivers a sleek and interactive entry point into the LessonConnect whiteboard experience. The canvas functionality is cleanly implemented using React hooks, with responsive drawing, dynamic brush controls, and a working PNG export feature. Styling is well-scoped and modern, and the overall layout scales beautifully across devices. I also appreciated the inclusion of design diagrams and wireframes, which clearly show thoughtful planning behind the UI. Looking ahead, touch support and an undo option would further enhance the usability, and I’m excited to see how chat and video features integrate next.

[AbdulAlharbi]

Comment Reply – Thanks Sameer!

Hey @SameerIssa — thank you so much for the awesome feedback and for taking the time to dive into the details of the PR!

Really glad the React hooks and responsive canvas functionality came through clearly — I put a lot of thought into keeping it modular and scalable. Appreciate you calling out the scoped styling and layout too!

Totally agree — touch support and undo functionality are high on my future enhancements list, and I’m excited to bring those in after the chat/video layer gets integrated in the next PR.

Thanks again for the thoughtful review and support — more to come soon!

— Abdulrahman