feel like this is kind of weird question but still,

I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.

I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.

But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each ponents should have, totally got blocked.

I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.

Something like beefree.io is what I want to build.

Many Many Thanks for all your feedback.

feel like this is kind of weird question but still,

I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.

I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.

But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each ponents should have, totally got blocked.

I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.

Something like beefree.io is what I want to build.

Many Many Thanks for all your feedback.

• javascript
• html
• reactjs

2 Answers 2

I very remend TinyMCE editor: https://www.tinymce./download/. This editor has a lot of features. I can also remend http://hammerjs.github.io/, https://github./yabwe/medium-editor and http://premiumsoftware/cleditor/.

If you want to create standalone HTML5 editor, you should research GitHub sources of remended editors and learn mainly jQuery and AngularJS.

Instructions how to create from basics HTML5 editor:

• http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
• http://blog.teamtreehouse./building-an-html5-text-editor-with-the-filesystem-apis
• http://buildwithreact./

I remend trying out Unroll.io's react-email-editor: https://github./unroll-io/react-email-editor

It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.

This React ponent is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React ponent and change displayMode to web as per Unroll.io docs.

I have seen this being used in production on EmailMonster's email editor.