Skip to content

feat: add React-based UI for Sunbird Framework Generator (#63) #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

karanyede
Copy link

As part of my contribution to the Dedicated Mentoring Program (DMP) 2025, I have developed a user-friendly React-based interface for the Sunbird Framework Generator project. This addresses the current challenge where creating frameworks requires manual API calls via tools like Postman — a process that is both technical and time-consuming.

✅ What I've Done:

  • Designed and implemented a modular, responsive UI using React
  • Created reusable components for framework creation, preview, and validation
  • Implemented form validation and dynamic input handling
  • Added dark/light mode toggle for improved accessibility
  • Integrated mock API calls to simulate backend interactions
  • Organized code with scalability in mind for future enhancements

Check out by work here:
"https://sunbird-framework-gen-by-karanyede.netlify.app/"

Screenshot 2025-05-07 171050
Screenshot 2025-05-07 171230
Screenshot 2025-05-07 171141
Screenshot 2025-05-07 171108

🎯 Purpose & Vision:

This UI layer aims to reduce technical barriers by allowing non-developers to:

  • Create educational frameworks directly from the browser
  • Preview framework structure before publishing
  • Validate data format visually

This aligns with Sunbird’s mission of democratizing access to education technology tools and enabling scalable solutions for government learning infrastructure.

🔧 Tech Stack Used:

  • Frontend: React.js
  • Styling: CSS Modules / SCSS (as applicable)
  • State Management: useState, useEffect (no external libraries used yet)
  • Mock API Integration: Axios/Fetch

📁 Folder Structure:

All files are placed under:
/projects/sunbird-framework-generator/

Includes:

  • README.md – project overview and setup instructions
  • /src/ – all React components, styles, and utility files
  • /public/ – assets and manifest

💡 Future Scope:

  • Connect to actual backend APIs
  • Add authentication and user roles
  • Implement export/import functionality
  • Add dashboard view for managing created frameworks

This PR sets the foundation for building an intuitive and powerful tool for educators and administrators working with Sunbird.


✅ Ready for review and feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant