5th PR: Add Student Dashboard, Assignments, and File Upload Features

[FrankFurter123]

Added Student Dashboard, Assignments, and File Upload Features

---

Overview

What does this PR do?

This PR introduces significant updates including a comprehensive student dashboard, assignment viewing and submission functionality (integrated with preliminary backend support), improved file management, responsive student-specific navigation, and overall UI enhancements toward achieving our MVP goal.

---

Key Features & Changes

What has been added or changed?

✔ Core Feature Implementation

• Student Dashboard (notifications, inbox, gaming stats, badges)
• Assignments page with authenticated file uploads and submission tracking
• Files management page

✔ UI/UX Enhancements

• Vertical dashboard sections
• Notification, inbox, and profile icons integration
• Gaming stats progress indicators
• Responsive StudentNavbar component
• Global theme toggling (light/dark)

✔ Navigation & Routing Fixes

• Fixed dashboard paths and internal links
• Responsive navbar and layout improvements

✔ State Management Improvements

• Consistent theme state handling
• Clear assignment submission feedback

✔ Code Quality Enhancements

• Added PropTypes validation in StudentView.jsx for darkMode and toggleTheme

---

Why This Is Needed

What problem does this solve?

This PR consolidates critical student functionalities into a cohesive interface, significantly advancing our project toward MVP completion. It addresses previously scattered navigation and introduces essential backend-front-end integrated features (assignments and file uploads), enhancing user experience.

---

Related Issue

🔗 This PR addresses #132

---

Implementation Details

How was this feature developed?

• React JSX & React Bootstrap
• React Hooks (useState, conditional rendering)
• Authenticated file upload integration
• Close collaboration with backend lead Ashley for API integration
• PropTypes validation added for component maintainability

Note: Assignments are manually created currently. Complete dynamic integration pending backend API completion.

---

Design Documentation

Diagrams & Visuals

Student Layout

Assignment Page

---

How to Test This PR

Step-by-step testing guide

1. Verify Student Dashboard sections load correctly
2. Test global theme toggling (light/dark)
3. Navigate to Assignments, upload files, and confirm submission status
4. Verify Files page functionality
5. Test navbar responsiveness across devices

---

Files Added/Modified

New Frontend Components & CSS Files

File Name	Description
AssignmentPage.jsx	Assignment submission logic/UI
AssignmentPage.css	Assignment page styling
StudentNavbar.jsx	Responsive navbar for student views
StudentNavbar.css	Navbar styling
StudentLayout.jsx	Wrapper layout for student views
StudentLayout.css	Styles for student layout
StudentView.jsx	Main dashboard component (with PropTypes)
StudentView.css	Dashboard-specific styles

Backend Files Modified

File Name	Description
serializers.py	Updated serializers for uploads/search
views.py	Adjusted views for frontend support
models.py	Modified models for file uploads

---

🤖 AI Code Usage

Was AI-generated code used in this PR?

• Yes

  • Details:
    • Used ChatGPT to understand backend-to-frontend connection strategies.
    • Backend lead Ashley provided crucial practical support beyond AI assistance since AI could not visualize our database structure.

• No

---

Checklist for Reviewers

• Dashboard pages function correctly
• Theme toggling works
• Assignment submissions & file uploads tested
• PropTypes validation correctly implemented
• Navigation responsive on desktop/mobile

---

Next Steps & Future Enhancements

• Complete backend integration for dynamic assignment generation
• Connect profile login/logout with main authentication (auto-redirect students to dashboard)
• Address placeholder links (removal if unnecessary)
• Persistent user preferences with local storage (theme, settings)

---

Final Notes

This PR is substantial and essential for achieving our MVP. It integrates important frontend features with backend elements, thanks to collaborative work with backend lead Ashley. Further backend integration and link cleanup will follow in subsequent PRs.

Thank you for your review! Any additional feedback is greatly appreciated.

[AbdulAlharbi]

Peer Review for PR: “Added Student Dashboard, Assignments, and File Upload Features”

Reviewed by: Abdulrahman Alharbi

Status: Reviewed – Changes Required Before Merge

---

General Impressions

Wow, Frank — this is an amazing and thorough implementation. The Student Dashboard feels clean, modern, and engaging. You’ve really pushed us toward MVP readiness with this PR. I tested everything locally and can confirm that most of the components are functional and visually cohesive. Great job collaborating with backend lead Ashley too — it shows!

---

Design & UI Feedback

StudentView Dashboard

The dashboard design is very thoughtful! The icons and layout flow really well, and I noticed the fun image choices you used to make the UI more “cute” and friendly — that adds personality and keeps it engaging. 👏
One thing: you didn’t mention this in the PR, but I saw our team pictures have been uploaded. Make sure you include all of us before merging!

Navbar

The navigation is super intuitive and responsive. I especially appreciated the toggle theme, and how smoothly the route links flow between pages.

Small thing I noticed: no profile picture yet — I assume that’s because login/authentication isn’t fully wired. Just calling it out so it doesn't get forgotten post-MVP!

---

Assignments & File Upload

AssignmentPage.jsx

The layout is clear and the manual data makes testing easy. One question:

Once the backend is connected, how will this be dynamically populated? Will there be a loading state or pagination? Would love to see that addressed in a follow-up PR.

File Uploads

I noticed the Files page is empty right now — makes sense if backend integration is still pending.

Can you clarify what the expected functionality will be here once connected? Will it show previously submitted files only, or all file resources (e.g., lessons, feedback)?

---

Technical Observations

Routing

Overall, routing is smooth. I love that everything is clearly connected — you can go from dashboard → assignments → files in a clear path.

🚫 The only broken link I found was /student/booking, which returned a 404. You may want to fix or remove it before merge.

App.jsx Route Setup

I really loved how the links were set up in App.jsx. This structure makes it super easy to wrap all views in StudentLayout and keeps routing logic centralized and clean:

{/* Student Routes with Layout */}
<Route path="/StudentView" element={<StudentLayout><StudentView /></StudentLayout>} />
<Route path="/student/calendar" element={<StudentLayout><Calendar /></StudentLayout>} />
<Route path="/student/chat" element={<StudentLayout><Chat /></StudentLayout>} />
<Route path="/student/videocall" element={<StudentLayout><VideoCall /></StudentLayout>} />
<Route path="/student/booking" element={<StudentLayout><Booking /></StudentLayout>} />
<Route path="/student/pomodoro" element={<StudentLayout><Pomodoro /></StudentLayout>} />
<Route path="/student/findTutor" element={<StudentLayout><FindTutor /></StudentLayout>} />
<Route path="/student/support" element={<StudentLayout><Support /></StudentLayout>} />
<Route path="/student/contact" element={<StudentLayout><Contact /></StudentLayout>} />
<Route path="/student/services" element={<StudentLayout><Services /></StudentLayout>} />
<Route path="/student/faqs" element={<StudentLayout><FAQS /></StudentLayout>} />
<Route path="/student/learn_more" element={<StudentLayout><Learn_more /></StudentLayout>} />
<Route path="/student/about" element={<StudentLayout><About /></StudentLayout>} />
<Route path="/student/assignment" element={<StudentLayout><AssignmentPage /></StudentLayout>} />

---

Backend Connection + CI/CD Failures

I noticed your PR failed the Django CI/CD build. Here’s a quick breakdown:

1. cloudinary_public_id error

Fix this by iterating over related objects:

if upload.exists():
    cloudinary_public_id = upload.first().cloudinary_public_id
else:
    cloudinary_public_id = None

2. test_get_uploads_empty

Returns 401 instead of 404. Ensure auth in the test:

self.client.force_login(user=self.test_user)

3. test_get_uploads_success

Investigate test setup — auth or fixtures may be missing.

---

Diagrams & Documentation

Loved the UML diagrams, especially AssignmentPage and StudentLayout. Very easy to follow.
Make sure they’re committed to a diagrams/student/ folder.

---

Suggestions

Type	Suggestion
Must Fix	Broken /student/booking route
Must Fix	CI/CD errors — blocking merge
Nice to Have	Add placeholder loading state on Assignments or Files page
Nice to Have	Add brief README section on backend expectations for these features
Question	How will Files page evolve once backend is live?
Question	Will Assignments page get pagination/filtering in the next sprint?

---

✅ Verdict

✅ Meaningful PR — Extremely well-done, real value delivered
🛑 Needs changes before merge — Resolve CI/CD and broken link
🔁 Looking forward to next PR — Excited to see full backend linkage!

— Abdulrahman

[FrankFurter123]

Hey Abdul,

Thanks so much for the detailed review. I really appreciate the time you took to test things locally and the thoughtful feedback — especially on the UI/UX touches and routing structure.

---

Team Pictures

Great catch — I forgot to mention that! I'll make sure everyone's profile picture is included before merging. I already reached out to the whole group to get their headshots.

Profile Picture Placeholder

Yes, the lack of profile image is due to pending login/auth integration. Once we get it to connect, the profile avatar will dynamically pull from the authenticated user session. I believe this shouldn't be to hard to do as the authentication works as expected and has been already tested. This integration may be done later before the presentation so thank you for pointing that out!

---

Assignments Page & File Uploads

Backend Integration for Assignments

Once the backend starts sending dynamic data, I’ll:

• Replace manual assignment lists with real data from the backend
• Add a loading state while fetching assignments ( I've have already done this but it is not functional with back end yet)

Files Page Expectations

Currently, the page is in placeholder mode. Once the backend is finalized, it will:

• Display submitted files by the user
• Show relevant resources such as feedback, lesson files, or supportive docs
• Support filtering by type (e.g., "Submissions", "Feedback", "Resources") ( only if times allows)

---

Critical Fixes

Broken /student/booking Route

I forgot to mention this in my PR but the booking works. You may not be able to run it locally as you have to create a user locally and send some data manually to the admin to be able to test this page. You can refer back to my "Find a Tutor" PR #115 to see how it works and it is functional.

CI/CD Failures

Thanks for breaking these down! It helps a lot. I will still need our back end lead to help me with this as they are more familiar with these types of errors so I will make sure it gets fixed before merging this PR

---

Diagrams & Docs

Glad the UMLs were helpful!

---

Follow-Up Answers

How will Files page evolve once backend is live?
So, if you tested my page, you will notice that when you click on Files, it is empty but has some header labels. The moment a student submits an assignment that requires you to upload a file or let's say the tutor has posted an assignment that requires you to download, at that time you will be able to find them all in your files folder for quickest way to download any past assignment files or submissions.

Will Assignments get pagination/filtering in the next sprint?
If time allows, I can definetly add filtering as this is something that has been used at the moment a user search for a tutor.

Here are some screenshots to give you an idea of how the file handling works, along with how submission status tracking and loading are implemented.

** Assignment submitted message:

** Assignment status tracker

** Files page

---

Thanks again! Your review really elevated this PR and gave me a clear understanding of what to work on before merging. If anything is still unclear, please let me know—I’d be happy to provide more details on my work.

— Franklin

[AbdulAlharbi]

Hey Frank 👋 — seriously, thank you for the super thoughtful follow-up. It’s awesome to see how clearly you’ve broken down your implementation strategy, and your detailed responses definitely clarify a lot.

---

Team Pictures & Avatar Placeholder

Thanks for confirming! Glad to hear that profile pictures will be included, and that avatar integration is planned for after authentication. Looking forward to seeing the dynamic avatars once login is fully hooked up — it’ll give the dashboard that extra polish!

---

📁 Assignments & Files Logic

✅ Assignments

Great to hear that the loading state is already wired and just waiting on backend data — I saw that UI element and assumed it was part of your prep for integration. That forward thinking is 🔥

📂 Files Page

Thanks for breaking down how this page will function post-backend! The use-case you described — a student viewing submitted files or downloading resources from tutors — is exactly the kind of practical feature that makes this dashboard powerful.
Filtering by file type sounds awesome if time allows!

Also, the screenshots were really helpful — the “Assignment Submitted” message and progress tracking bar are clean, minimal, and user-friendly. Really nice touch on the UI side.

---

🛠️ Booking & Testing Flow

Ahh, got it — thanks for pointing me to PR #115. That explains why I couldn’t access /student/booking. Makes total sense now that it relies on seeded data or admin interaction. I’ll make a note to test that flow using the right setup if needed.

---

CI/CD Help

Appreciate you taking the time to dive into those test failures! And yes — collaborating with our backend lead is a great move here. Feel free to tag me if you want another pair of eyes while fixing those tests.

---

Future Enhancements

I’m glad to hear filtering on assignments might be added. If you end up implementing that in the next sprint, it could really enhance UX — especially for students juggling multiple assignments.

---

Let me know if you need a second reviewer for the CI/CD patch or final backend linkage. Overall, you’ve knocked this out of the park — can’t wait to see it merged. 🚀

— Abdul

[FrankFurter123]

Hey Abdul — really appreciate the feedback! Glad everything’s making sense so far. I’ll definitely tag you once I push the CI/CD fixes or the file type filter. In fact, @ashley-arellano has already fixed some of those errors. She told me this error are back end errors so she is currently working on these errors so they can be fixed before the merge.

[ashley-arellano]

🔍 Peer Review: Great Job on This PR!

Hey Frank 👋 — just finished reviewing your PR titled "Added Student Dashboard, Assignments, and File Upload Features". Here’s my feedback:

---

✅ What Looks Great

• The assignment page design is easy on the eyes and really user-friendly!
• Your component structure and modularity make the code intuitive and well-organized.
• The PR description is super thorough— really helpful for both understanding and testing.

---

💡 Suggestions for Improvement (if any)

These are ideas for future improvements or things to address before merging.

• The theme toggle feature is great, but you might want to ensure it persists across page reloads

---

🧪 Tested This Feature

I ran the following test steps:

• ✅ Navigated to all new student pages (dashboard, assignments, files).
• ✅ Verified that dashboard content (badges, stats, notifications) renders correctly.
• ✅ Uploaded a file via the assignment page and confirmed that:
  • ✅ A metadata object was created in the database.
  • ✅ The file was sent to the cloud service.
• ✅ Ran upload-related tests — added JWT token auth to ensure proper permissions.
• ✅ Verified sign up, login, and tutor search pages still works in spite of changes made to backend.

---

🔄 Next Steps

• Let’s revisit test coverage in another PR just to make sure we didn’t miss anything edge-case-wise.
• Note: I refactored the profile-picture relationship and removed the profile field from the UploadRecord, which impacted a few tests that I believe I’ve now fixed.

---

🚀 Final Thoughts

Fantastic job with this implementation! It's exciting to see the frontend come together with the backend : D

Therefore, I will approve your PR!

[EthanZ23]

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

---

Why I am writing today:

I read through Frank’s “Feedback Request: Student View & Assignments Page” discussion (#126 (comment)). After going through it, I felt compelled to review and read through this PR since I’ll be taking on the backend integration for the assignments page.

---

Initial Impression:

After thoroughly reading through the PR comments, testing the branch/webpages, and reviewing the code (especially the file upload functionality), I can add on and say everything is looking great here. The implementation and UI is clean, simplistic, and well-organized. Everything functions as expected, I like how your assignments page came out, and I don’t have any suggestions for improvements at this time.

---

Next Steps:

• When reviewing, I realized that this doesn't mention anything for the actual assignment creation page and quiz creation page. I believe this is the next step for the assignment page through the TutorView.
• What I plan on adding via backend integration is the way to get and update real assignment data, thus replacing the manual assignment lists with real data from the backend.

---

I'll definitely reach out if I need any advice or guidance during the backend integration process. In the meantime, keep up the awesome work!

— Ethan

[FrankFurter123]

Hey @ashley-arellano,

Thank you so much for taking the time to go through my PR in such detail and for making sure everything was working properly. I truly appreciate you stepping in to fix the errors I got on this PR—it saved me a ton of time and frustration. I probably wouldn’t have been able to resolve those error, so I’m really glad you caught it and handled it.

I also loved your suggestion about persisting the theme toggle across page reloads. That’s something I hadn’t considered, and I agree it would add a nice polish to the user experience. I’ll definitely look into implementing that later before the presentation day.

You’re absolutely right about test coverage—we’ve made great progress so far, and now that more pieces are starting to come together, expanding our tests is going to be key. I’m especially grateful that you ran through everything so thoroughly and confirmed not just the core functionality, but also that other parts of the site weren’t impacted. That peace of mind is huge.

Really appreciate the thoughtful feedback, and it means a lot that you took the time to make improvements directly too. Thanks again for being such a supportive teammate!

[FrankFurter123]

Hey @EthanZ23,

THANK YOU SO MUCH FOR TAKING THIS INITIATIVE, Ethan! Seriously, I really appreciate you jumping in like that. The fact that you went through the PR, tested everything, and gave thoughtful feedback already means a lot—but then also deciding to take on the backend integration for the assignments page? That’s huge.

I’m really glad you're leading the next steps, especially with the real assignment and quiz creation features. Replacing the static list with actual backend data is exactly what we need to take it to the next level. It’s going to make a big difference for the TutorView and for the overall flow of the platform.

Let me know if you need anything from me as you work through it—happy to help however I can. I’m really proud of how smooth the coordination between all of us has been so far, and with your part coming in, we’re getting even closer to MVP. Keep it up bro, seriously great work! 🙌🔥

I’m ready to request Abdul and Ashley to approve my PR so you can start working or implementing this for your next PRs. Thank you again, Ethan!

[AbdulAlharbi]

✅ Final Approval – Ready to Merge!

Nice work everyone — this is a very meaningful PR, and I’m happy to give my full approval.

---

🙌 Coordination & Collaboration

Frank, you’ve done such an incredible job bringing the Student Dashboard and Assignments page to life with thoughtful design, clean implementation, and responsive UI. I loved seeing how you incorporated feedback across the review process, from the theme toggle and page routing to your backend-ready architecture.

Ashley, thank you again for being so proactive in identifying and resolving the backend test issues. Your effort saved a lot of time and ensured this PR stayed unblocked. That kind of collaboration really defines great teamwork.

Ethan, big shoutout to you for jumping in and committing to the backend integration for the Assignments page. It’s huge knowing we’ll soon be able to replace the mock data with real, dynamic content. Your awareness around what’s next (assignment + quiz creation) shows you’re thinking about the full student-tutor ecosystem.

---

🔄 Approval

✅ I am approving this PR so we can get this work merged and unlock the next steps. Ethan — once this is in, feel free to move ahead with your backend assignment integration.

If anyone needs support in the handoff or next phase, I’m around. Let’s keep this momentum going — we’re pushing strong toward MVP!

— Abdulrahman