MOBILE APP, PROJECTS, React, RUBY ON RAILS, WEB DESIGN, WEB DEV

Mud School Certificate Portal

CMS Live View
Github Repo

Project Description:

This project aims to provide an effective solution to enable the Mud School students and potential employers to digitally verify certificates of job applicants from Mud School 📚

With this solution, certificates can be easily and digitally created, signed, edited, issued, and verified at no extra cost in less than a minute.

Project Outcome:

This solution has been successfully deployed by a reputable institution having seen the relevance of this project to every certificate awarding institution. This institution now benefits from a 100% cut down on the cost of designing printing and shipping certificates.
This project comprises a unique feature that automatically designs every certificate and displays it for downloading and printing.

GITHUB REPOS

– Rails Backend API only App 
– React CMS
– React Certificate Verification Portal

DEMO LINKS

– React CMS
– React Certificate Verification Portal

CMS LOGIN:

Email: admin@example.com

Password: example

VERIFICATION PORTAL

Sample certification ID: omsfdcdf6

 

Built With:

RUBY ON RAILS
RUBY
CSS
CSS FLEX
MOBILE FRIENDLY
POSTGRESQL
USER AUTHENTICATION
USER PROFILE MANAGEMENT
RAILS API ONLY BACKEND
REACT
REDUX

KEY FEATURES

  1. Certificate Generation:

    • The ability to generate certificates dynamically based on data.
    • Incorporating images, logos, and signatures into the certificates.

  2. Data Display:

    • Displaying information about the certificate, including the certificate name, title, recipient’s name, purpose, course, and duration.

  3. Personnel Information:

    • Displaying information about training directors, training instructors, and external facilitators.
    • Showing their names, signatures, and respective titles.

  4. QR Code Integration:

    • Including a QR code on the certificate for additional verification.

  5. Date Formatting:

    • Formatting and displaying date information on the certificate.

  6. Responsive Design:

    • Using media queries for responsive design, ensuring proper display on various devices.

  7. Image Loading Handling:

    • Ensuring that images (such as logos and signatures) are loaded before attempting to generate the certificate.

  8. Certificate Download:

    • Providing a button or functionality to download the generated certificate as a PDF.

  9. External Library Integration:

    • Using external libraries like html2canvas and jsPDF for generating PDFs from HTML content.

  10. Partner Logos:

    • Displaying partner logos at the bottom of the certificate.

  11. Verification Information:

    • Providing information on how to verify the certificate, such as a verification website URL.

  12. Styling:

    • Applying styles to ensure a visually appealing and professional-looking certificate.

  13. Error Handling:

    • Implementing error handling, such as checking if images are loaded before initiating the certificate download.

  14. Dynamic Data Fetching:

    • Fetching dynamic data, such as personnel information and certificate details, from a Redux store.

  15. Orientation Handling:

    • Supporting landscape orientation for the generated PDF certificates.

  16. Mobile Device Simulation:

    • Testing and ensuring proper functionality on mobile devices by simulating them in development tools.

Leave a Reply