CourseSync

• 

  Landing Page

• 

  Dashboard

• 

  View Space

• 

  View Page

• 

  My Account

• 

  Update username And Password

Inspiration

The Inspiration for courseSync emerged from the challenges faced by educational institutions in maintaining the consistency across multiple sections of the same course. Often, instructors and students struggle with ensuring that all the materials receive the same amount of importance and content.

Observing the success of similar tools in existing LMS platforms , such as canvas blueprint courses , highlighted the need for a streamlined, user-friendly solution that could offer synchronization and grouping capabilities for courses and their materials

What it does

CourseSync is a platform designed to simplify the management and synchronization of course content across multiple sections or related courses. It allows students to create a master template (or blueprint) course that can be used to organize and manage all the assignments , topics and materials that are present in a particular course.

The course is referred as a Space The Assignments ,Materials etc are Referred as Resource The Solution,Research for the given Resource can be stored in a Page

Key functionalities include:

Resource Management: Create and manage resources within a course.

Page Management: Create and manage pages within each resource, containing titles, content, and notes.

Synchronization: Automatically or manually synchronize changes from the master template to all associated courses.

How i built it

CourseSync was built using a modern web development stack to ensure scalability, performance, and ease of use:

Frontend: Developed with NextJS 14(A React Framework) for a dynamic and responsive user interface, utilizing hooks like useState and useEffect for state management and side effects.

Backend: Implemented using NextJS API router providing robust APIs for resource and page management.

Database: Utilized a relational database (PostgreSQL) to store and manage course data, resources, and pages efficiently with Prisma as the ORM

API Integration: Leveraged Axios for making HTTP requests to interact with the backend APIs.

UI Components: Employed reusable components and ShadcnUI for consistent design and functionality, such as buttons, forms, and modals.

Challenges i ran into

During the development of CourseSync, i encountered several challenges:

State Management: Managing the state across different components, especially ensuring that data synchronization between the frontend and backend was accurate and efficient.

Continuous Fetching Issue: Initially faced issues with continuous API requests due to improper use of the useEffect hook, which we resolved by refining the dependency arrays.

User Interface: Designing an intuitive and user-friendly interface that caters to both administrators and instructors, making complex functionalities accessible.

Data Consistency: Ensuring that updates to the master template were accurately reflected across all associated courses without data loss or inconsistencies.

Accomplishments that iam proud of

Iam particularly proud of:

Seamless Synchronization: Successfully implementing a reliable synchronization mechanism that ensures consistency across multiple course sections.

User-Friendly Design: Creating an intuitive and responsive user interface that simplifies the management of course content.

Robust Backend: Developing a backend system that efficiently handles data management and API requests, ensuring smooth performance.

What I learned

Importance of Proper State Management: Effective state management is crucial in building dynamic web applications, and understanding hooks like useState and useEffect in React is essential.

User-Centric Design: The value of designing with the user in mind, ensuring that even complex functionalities are accessible and intuitive.

Backend Optimization: The significance of optimizing backend operations to handle large volumes of data and ensuring data integrity during synchronization processes.

What's next for CourseSync

Looking ahead, i plan to enhance courseSync with several new features and improvements

-Adding Functionalities for searching a particular resource, page or space accross the platform

• Allowing the users to share their resources to their peers either in the form of a link or adding them a peer on the webapp

• Expanding compatibility to integrate with other popular learning management systems beyond Canvas.

-Allowing the users to upload images and pdf files to make their organizing of materials more smoother.

-Offering more customization options for resources and pages, allowing instructors to tailor the content more precisely.

-Incorporating AI to provide personalized recommendations for course improvements and content updates.

• Allowing a way for administrators(professor, teachers) to create a master space where all students can be added and the admin can create a space that will be reflected to all the students . This will allow a more reliable way for two way study.

By continuously evolving and adding new features, CourseSync aims to become an indispensable tool for educational institutions, streamlining course management and enhancing the learning experience for students.

Built With

• axios
• git
• nextjs
• prisma
• shadcnui
• tailwindcss
• zod