Doc2Pen

Are you a student who is tired of having to write out assignments on paper, draw sketches by hand, scan each page, convert it all to a PDF, and finally submit? 😩

Does it seem too much of a hassle in this age of online education? 😫

If your answer is yes, then you've come to the right place! 😃

Doc2Pen is the 1 stop shop for getting all your "handmade" assignments ready for submission digitally. 🥳

• Use the highly customisable Editor page to type in text and get a handwritten document! 📝
• Use the Sketch page to digitally draw in a handmade style! 🎨
• And in the end, use the Media Manip page to convert your assignment into the appropriate format for submission! 📚

It really is that easy! 🎊

And the best part of all? Doc2Pen is open source! 🤩

 

DEMO

Home Page

Editor Page

Sketch Page

Media Manip Page

Features:

• Type/Paste your assignments and get handwritten ones to download directly! Bye-Bye Pen&Paper
• Make Sketches/Diagrams/Figures for your assignments/presentations
• Media Manager
  • PDF Spliter
  • PDF Merger
  • PNG to JPG
  • JPG to PNG
  • PNG to WEBP
  • WEBP to PNG
  • JPG to WEBP
  • WEBP to PNG
  • JIFF to PNG
  • JIFF to JPG
  • PNG(multiple) to PDF

Basic structure of the project repository 🗃️📂

|
|- readme_assets   # Contains all the images used for the README.MD
|- public          # Contains the stylesheets, images and fonts. Any files within this directory will not be processed by Webpack but copied directly to the build folder.
|- src:            # Contains all source code for the React application.
    |
    |- App.js
    |- index.css
    |- index.js
    |-assets         # Contains all the community brand assets
    |-components     # Contains all the components used within the app.
    |-fonts          # Contains all the fonts
    |-pages          # Contains all the sections of the page.
          |- 404
          |- Home
          |- Editor
          |- Sketch
    |-seo # Contains code for meta tags using react-helmet

Tech Stack: 💻

Under the hood:

• React - Bootstrap
• React - Helmet: Document Head Management
• React - Leaflet.js: Interactive Maps
• React - Dropzone.js: Drag and drop file uploads
• Rough.js: Make sketchy, hand drawn figures
• Mousetrap: Handling Keyboard shortcuts
• ReactJS - Snackbar: Making snackbars to provide brief messages
• React Reveal: Animations
• JSPDF: Generate PDFs
• React Scroll: Smooth Scrolling between sections

Wish to fix a bug or add a new feature?🤝🏽🍀:

Please check out our contribution guidelines

The geeks🤓 behind this initiative:

Our Project Maintainers👨‍🏫:

   

Smaranjit Ghose              Anush Bhatia

Our valuable Contributors👩‍💻👨‍💻

Open Source Programs we have been associated with:

Code of Conduct

License

Made with ♥ for the students of the world!