InstaSite is a Python and React project meant to allow users to make simple websites using a GUI interface for template design, and a rich text editor for content.
The application is hoster on Render.com
pip install -r requirements.txt
pip install psycopg2
flask db upgrade
flask seed all
npm install --prefix react-app
npm run build --prefix react-app
After a successful build the application can then be ran using gunicorn
gunicorn app:app
To remove all messages, channels, dms and reset back to initial DB state run:
flask seed undo
- Rich text editor build with Facebook's Draft.JS
- GUI based template editor built using FabricJS and the HTML5 Canvas
- Export working HTML in a ZIP file
- Create and Edit pages in real-time controlling:
- Font Size
- Font Family
- Background Color
- Add Header Tags
- Add Lists
- Formatting with Bold, Underline, and Italics
- Insert Images
- Control DIV alignment
dragDemo.mp4
Drag and Drop design editor
editorDemo2.mp4
Live Editor With Features
A simple database design where each user has several projects. Each project has several files. Each file has many-to-one relationship with templates. Each file has a one-to-one relationship with FileContent
This is my second time building an editor using Draft.JS, but it's application was significantly more complex than I had initially thought. The editor needed to be able to consistently export HTML and load that HTML back into the Editor state, and each additional feature into the Editor brought it's own unique challenges to overcome regarding that consistency. Outside of making this a learning experience- I think I would much rather use a prebuilt editor maintained by several developers over years instead of one I was making in tandem with other features over the course of a couple weeks. In the end, I ended up learning a lot about controlling entity-state inside DraftJS and I'm proud of the final result.
preview.mp4
Much of the work involved parsing through the exported HTML from the editor, and combining it with the full DIV styling controls like 'alignment' and 'font-family'. The final product needed to then be further parsed to provide two different versions of each page. One for the preview and one for the final output. The links inside of the preview are controlled with javascript to change the page content by communicating back with the main page instead of actually navigating the page. I had been previously unaware that child-windows created with JS could communicate and call functions from the main window- this luckily made the process very easy.