JGS Ayil Squad - NMTSA Learning Platform

A fast, responsive and real-time learning experience.

Comment

🧠 Inspiration

My biggest gripe with websites nowadays is when they are not responsive and keep data stale, requiring the user to constantly refresh the page to make sure what they are using is up to date. With a learning platform this should never be the case because even a small edit could provide valuable information, and that info should be available immediately to everyone.

⚙️ What It Does

🛠️ Admin View

  • Real-time content management: Updates that admins make are available immediately without page refresh, including content deletion and content publish end dates where the user will immediately lose access.
  • Content creation: Users can create rich text articles, videos with rich text body, audio files with rich text body, or documents with rich text body.
  • Google integration: Users can choose to either upload from local files or from Google Drive.
    Demo
  • Content library: Easily filter and search through content.
  • Content creation workflow: Content creation goes through the workflow of:
    Contributor creates draft → Submits for review → Editor reviews (good / needs changes / reject with reason) → Approved content auto-publishes.
  • Content versioning: Every time content is changed, a copy of the previous version is saved and an admin can revert to any previous version with just a button click.
  • Content shop: Admins can set pricing on content and have it available for purchase for users.
  • Content shop analytics and history view: Admins can see all of the orders and their history.
  • Content visibility and permissions: Admins can set permissions on content with options to:
    • Give specific users or user groups permission to view content
    • Set a password on content
    • Set content as inactive and not viewable by anyone
    • Set start and end dates for content
  • Content sharing: Admins can create signed URLs to share with a 3rd party, non-authenticated user that will last for a period of time. Admins can see all their links and manage them.
  • Analytics: Admins can see how many users are currently viewing content, how long users have viewed content, and how many total views content has.
  • User management: Admins can manage users, user groups, permissions and roles in real-time where access can be given or restricted at anytime without page reloads.
  • Editor and contributor invitation system: You can invite editors and contributors using a signup link generated in the admin dashboard.

👤 Client (Non-Admin User) View

  • Profiles: Users can give themselves names and profile pictures.
  • Content Dashboard: Users can view all the content they have access to and can filter / search / sort through the content to find the ones they want.
  • Content View: Users can view the content in a view similar to an article or blog post and see all the information associated with the article.
  • Password Access: Users can access private content via passwords, once a correct password is entered they get access to the content in their dashboard.
  • Professional Recommendations: Professionals can recommend content to parents by entering in their email.
  • Parents Recommendations: Parents recommendations are show and if the content is private or paid they have the option to enter in a password or purchase depending on the content.
  • Share to a 3rd party: Users can click share to a 3rd party and get a signed URL (link that will give an authenticated user access for a certain period of time), users can manage the links in their client dashboard.

🧩 How We Built It

The whole app is built with the real-time back-end Convex.
The front-end is built in TypeScript and React using shadcn components.

The app utilizes Convex and their real-time data store system to keep all data up to date with the central source of truth, the database. Authenticated is also done through Convex and used Google API for google drive file upload and Sign in with Google.

🚧 Challenges We Ran Into

  • We weren't sure about all of the specifics for user stories and system interactions, so we had to work around them.
  • As we learned more information, we had to adjust and refine the system accordingly.
  • The app was very frontend heavy so we had a lot of merge conflicts because we were

🏆 Accomplishments That We're Proud Of

We were able to deliver on all of the needs, nice-to-haves, and majority of the wishlist items for the NPO and have a product that is production-ready and has robust security. The turnaround for getting this out to the non-profit would be a matter of weeks, not months.

📚 What We Learned

(You can add this section’s content later if desired.)

🔮 What's Next for NMTSA Learning Platform

  • Payment integration with Stripe
  • Adjusting the functionality to meet more specific user stories that the NPO provides
  • Deploying to the client's domain and setting up Google integration with client-specific secrets
  • Implementing aggressive caching using Cloudflare or CloudFront to lower streaming costs by up to 300%

🎥 Demo Video:
https://youtu.be/1BC4yUOD5lw

Built With

Share this project:

Updates