The aim of this entire series was to teach you how easy it is to create a playground like CSSDeck, in reality. We covered everything from building the environment to making it secured. Then we integrated an amazing piece of code editor and finally discussed how to build a nice, performant and secured gallery to show the “real” interactive but scaled down previews of your creations. Although, you might need some extra bells and whistles.
What More ?
Backend
You require a backend. Some code on your server that could be written in PHP, Ruby, Python, Javascript (Node.js) or any other server-side programming language.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
You also need a Database. A relational database like MySQL or SQLite seems like a good fit for such a web app.
The database is going to store the html, css and js code and other information like author details, time of creation, last modified time, etc. while the backend code is going to help with the retrieval, saving, modifying and deletion of the data.
Oh! Is that too much for you buddy ? Then maybe you can just store your code in files, fetch them via AJAX and pass to CodeMirror’s setValue() to set the editor contents. Or use a programming language like PHP and just load the code files in your HTML source, easy!
Save and Update
Just like CSSDeck, you may want to have the functionality of Saving your code and create a new version out of it. So the different versions will have URLs like:
http://yoursite.com/labs/xyz/1http://yoursite.com/labs/xyz/2http://yoursite.com/labs/xyz/3
You might also want to support Updating, that would just overwrite instead of creating a new version.
On initial save, generate a unique random string and save it into your Database. When a user views the page, just take that unique string from the URL and lookup the DB, to fetch the relevant data.
Multiple Users
You could integrate signup and logins to let multiple users create stuffs that could be featured in the gallery. Roll out extra features like User Profiles, follow/unfollow, Notifications, etc. if you would like to.
Other Stuffs
CSSDeck has lots more like liking items, commenting, and so on. You can follow the same path if you want to.
GoodBye
So that’s it for this particular series. It’s the first time I am blogging and I really hope you like my write ups. If you have any questions or suggestions, then let’s discuss in the comments.
