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👨‍🏫:

Our valuable Contributors👩‍💻👨‍💻

Open Source Programs we have been associated with:

Code of Conduct

License

Made with ♥ for the students of the world!