Contrib.social

Google Summer of Code 2023 Final Work Submission

Open on Drupal.org →
Created on 28 August 2023, over 1 year ago
Updated 12 February 2024, 10 months ago

Drupal LMS Portal Final Work


Project Overview

Building a learning management system in Drupal for GSOC students, where students can submit their works and collaborate with a mentor for feedback, schedule their tasks, post their experience in the app, and it is helpful for future students to explore previous ideas and works.

Proposed Objectives

  • Build a de-coupled web application (LMS Portal) using Next.js, PHP, and Symfony.
  • Implement the following functionalities in the LMS Portal:
    1. Authentication (with Drupal user).
    2. Write, Edit, and Delete Blogs and Experiences.
    3. Create a project directory of all previous and current years of Drupal's Google Summer of Code Projects.
    4. A Feed to explore blogs, and connect with mentors and candidates.
    5. Project Management.
    6. Tasks and Deadline tracking.
    7. Work submission and managing project resources.
    8. Collaborating with mentors and other candidates.
    9. Notifications for messages, feedback, and task reminders.
    10. Communication between mentors and candidates via chat.


Objectives Completed

I built the LMS Portal using Next.js in the front end and Drupal as a decoupled backend. I started by building the front end in Next.js using dummy data. In the meantime, I learned to build custom API modules in Drupal. I had already designed the UI during the community bonding period. For the front end, I completed the following tasks:

  • Designed and implemented the following pages in Next.js and TypeScript, using Tailwind CSS with the shadecn/ui component library for styling, and Zustand with React Query for client-side and server-side state management:
    • Authentication Pages (Login/Register)
    • Explore Page: It has the blogs feed with filter & search functionality.
    • Projects Page: It contains the list of all Drupal's GSOC Projects with filter & search functionality and the mentor can manage or assign contributors for a project
    • Project Details Page: It shows all the details about the project and all the experiences and blogs written related to a project.
    • General Chat Page
    • User Details: Shows all the details about the user and allows the authenticated user to edit their profile.
    • Create Blog Page: Allows mentors and candidates to write blogs using a WYSIWYG editor.
    • Workspaces List: List of all the workspaces that the user is part of.
    • Workspace: It's the core functionality of the project. When a contributor starts contributing, a workspace is created which has the following features:
      • Task management: Create, update or delete tasks
      • Manage Project's resources: Create, edit, or delete resources
      • Work submission: Submit work with commit reference and other details
  • Once the front end was done to a sufficient level, I configured the content types and taxonomy terms in Drupal and then started working on the back end. I created the following content types:
    • Blog
    • Project
    • Workspace
    • WorkSubmission
    • Task
    • Task Category
    • Workspace
  • I created custom module APIs for Blog, Project, Workspace, Tasks, and Authentication. I also created a service module called Utilities which has the common functions required for multiple modules. API Documentation
  • After creating all the required APIs, I integrated them with the front end. I started by configuring authentication. I created a Next.js API route for login, which took the user's credentials and generated a token. This token was stored in an HTTP-only cookie, which means that it could only be accessed by the browser and not by other scripts.
    I also created another Next.js API route, /drupal, which was used to interact with the Drupal backend. This route took the Drupal API route and request type in the body of the request. It then created an authenticated request using the token stored in the cookie. This allowed me to securely authenticate users and interact with the Drupal backend from the Next.js front end.
  • I used React Query with custom hooks to integrate the APIs and the UI.


Future Work

This project can be extended further to implement other collaboration features like Video/Voice chats, writing notes, and adding feedback directly to the tasks.

Important Links

Code

Other


My Expereince

The past three months have been an incredibly rewarding learning experience for me. Google Summer of Code was my first major open-source experience, and I absolutely loved it. I had the opportunity to connect with so many talented people from all over the world, learn from their expertise, and collaborate on a meaningful project. I also became part of a lot of tech communities online, which has helped me to stay up-to-date on the latest trends and learn from other developers. I am now more confident in my coding skills and my ability to contribute to open-source projects. I am really looking forward to continuing to contribute to Drupal and other open-source projects in the future.

🌱 Plan
Status

Closed: outdated

Component

Miscellaneous

Created by

🇮🇳India kunals131

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024