The Project
Fipamo began as a personal project because I wanted to consolidate all of the code I had been using to blog into a cohesive package so I could stop duct-taping solutions together. As it came together, I decided to make it an official project and it will serve as the base for a new social media experience. It is open-source and available for anyone to use.
And its core, it's a database-less interactive markdown editor that exports good old HTML, javascript, and CSS that can be hosted anywhere one chooses.
Process
Creating Fipamo was a unique experience because it was born from a need to consolidate code from various projects into a single package. A big part of accomplishing this was identifying the basic features of a blog, i.e. creating/editing/deleting pages, managing assets, publishing, etc, and then finding what pre-existing code I had that accomplished this. If that code wasn't adequate or didn't exist, I created it.
Once basic functionality was in place, a frontend was needed to interact with the system. I mined my previous experience with building UIs and started with a basic wireframe to make sure all necessary pages were accounted for. After that design comps were created to leverage the backend system to be created. The primary goals for the UI were to be simple, clean, and accessible without being boring. The UX needed to be snappy but not overwhelming so users know what is happening in an informative but fun way.
Once the front end was coupled with the backend, the basic features were tested and the first version of the beta was released.
Tools/Frameworks
The backend is created with the PHP-based Slim Framework. A combination of Markdown and JSON files is being used as datastores to eliminate the formal need for a database. Twig is used for front-end templating and ES6 Javascript compiled with ParcelJS for custom scripting. CSS preprocessor SASS (Dart) is used to handle styling.
index 1
index 2
dashboard index 1
dashboard index 2
pages index
page editor
settings index