rajinderpal-singh - Rajinderpal Singh.md

Developer – Winter of Code (WoC) 2020

---

Rajinderpal Singh

DSC-X : OMG-Frames

OMG-Frames aims to Generate Badges for the events that happens for across the Student Clubs, or any other events.My work is to create a Frontend for the entire project mainly Dashboard.

Apart from my work, I added new features which I thought to be in for better user experience.

I am Rajinderpal Singh ,an undergraduate student from Guru Nanak Dev University,Amritsar, as part of Winter of Code.This project was mentored by Anubhav Singh.

Contributions

Contributions are outlined as follows:

• 20 commits (approx.) are made into the develop branch of OMG-Frames

• Total of 3 Pull Requests made and got merged in develop branch.

  • First Pull Request #PR-6

  • Second Pull Request #PR-8

  • Total

• Created 2 Issues in API Repository.

  • Fogot Password? API wanted {#14}
  • Delete Frame API {#11}

• Closed 2 Issues, by working on it.

  • Dashboard UI {#3}
  • Performance issue in gallery.html page {#9}

• Created 3 issues in omg-frames Repository

  • Implement update frame API {#11}
  • Design a Favicon {#12}
  • Make Share button Working {#13}

• 10 (approx.) New Features

New Features

• Created Frontend

  • Bootstrap Framework for responsive website

  • index.html, dashboard.html, gallery.html, forgotpassword.html, reset.html

  • CSS files for each page {css/}

  • {JS/} files(main.js,imageedit.js, loginsignup.js), the main.js contains all the required functions, the imageedit.js contains implementation of crop feature into dashboard, and loginsignup.js contains all functions which has link with Backend in someway, along with all functions for AJAX request.

• Functionality added {see working}

  • Crop feature Croppie.js. Now user can crop it's Picture after selecting.

  • Customized Croppie.js for showing instant result on canvas (oninput/onchange)

  • Generate Strong Password (12 characters long, includes alphabets, numbers, special characters), it generates a strong password and insert automatically into password field { function generatepassword() }

  • Fullscreen mode, now user can experience fullscreen feature.{ function enablefullscreen() }

  • User can see it’s Account information by clicking on My Account button in navbar (email, name, organization,role).

  • Colored custom popups for displaying response message after fetching from API request, just call alertpopup(message,'open',colorofpopup);.Red(#dc3545) on error, Green(#28a745) on success.{ function alertpopup() }

  • loader() function, to show/hide loading animation, just call loader(‘show’) or loader(‘hide’){ function loader() }

  • Light/Dark Mode (index.html, dashboard.html, gallery.html), set mode in any page, will be applied to all pages automatically.

  • Show/Hide Password.{ function showpassword() } in Login/SignUp form.

  • Form validation (jQuery form validation) with custom error messages and color

  • Download or Delete Saved frames by hovering on fetched frames in gallery.html.

  • Customized Bootstrap’s buttons, input field’s classes according to wireframe design.

  • Changed SVG logo to PNG (by making it’s background transparent) {logo.png}

  • Changed Black color to white of logo for dark mode.{logodark.png}

  • As per requirement, user cannot use dashboard or visit gallery without logging in.

  • Created other required functions for proper working of project { js/ }

    • createordestroybutton() for creating and destroying Login/Logout button.

    • dashboardandgallerybutton() for creating/destroying View Dashboard and Gallery button if Logged in and Get Started button if not Logged in.

    • Other functions for toggle closing/opening of Content.{ main.js }

    • Many More

  • Implemented All available API’s { loginsignup.js }

    • Login
    • Sign Up
    • Save Frame
    • Get Frame
    • Delete Frame
    • Send-reset-email
    • Update-password

Future Scope

Here is a list for future developers.

• Use frabric.js for live editing on canvas.

• Make frames fully customized so that user can change Event Text(Attendee, Speaker,etc.) , and can also change logo.

• Other editing features like Brightness, Contrast,etc. along with filters(for filters I suggest CSSgram).

• Drag,Transform, contents inside canvas.

• Enable user to download the frame in different Resolutions

Feel free to come up with new ideas yourself.

Acknowledgments

I would like to express my gratitude to Anubhav Singh for his patient guidance and thanks for going through all my PR's. I would also like to thank Awantika Nigam and Arnab Sen,they are the main source of configuring bugs regarding new Pull Request. It has been a great experience working at OMG-Frames!.

WoC with DSC-X was a warm and unforgettable experience for me. Everytime I talk of Open Source, OMG-Frames will be remembered fondly.