Doc2pen
An open source project aimed at making your student life easier!
Install / Use
/learn @smaranjitghose/Doc2penREADME
Doc2Pen
<p align="center"><img src="readme_assets/doc2pen.gif"></p>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
<img src="readme_assets/home.gif">Editor Page
<img src="readme_assets/editor.gif">Sketch Page
<img src="readme_assets/sketch.gif">Media Manip Page
<img src="readme_assets/mediaManip.gif">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: 💻
<img alt="React" src="https://img.shields.io/badge/react%20-%2320232a.svg?&style=for-the-badge&logo=react&logoColor=%2361DAFB"/> <img alt="HTML5" src="https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white"/> <img alt="React" src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white">
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?
🤝🏽🍀:
<p align = "center"><img src = "https://media.giphy.com/media/1xOe0qgiYLYWE6pkki/giphy.gif"></p>
Please check out our contribution guidelines
The geeks🤓 behind this initiative:
Our Project Maintainers👨🏫:
<p align="center"> <img width=20% src="https://avatars2.githubusercontent.com/u/46641503?v=4">    <img width=20% src="https://avatars2.githubusercontent.com/u/40017559?v=4"> </p> <a href="https://github.com/smaranjitghose"> <h5 align="center"><b>Smaranjit Ghose</b></a>              <a href="https://github.com/anushbhatia"><b>Anush Bhatia</b></h5></a>Our valuable Contributors👩💻👨💻 <a href="https://github.com/smaranjitghose/doc2pen/graphs/contributors"> <img src="https://contributors-img.web.app/image?repo=smaranjitghose/doc2pen" /> </a>
