Hi! I’m Alex & I build software. Welcome to another project showcase. Today I’ll tell you about a Codepen clone I developed.
If you don’t know what Codepen is, it’s basically an online webpage editor.
> Stack
I used MERN (MongoDB, Express, ReactJS, NodeJS) for this project. I also used Create React App to bootstrap this website.
> Scope
Codepen has a lot of features. As the only engineer on the team, I decided to keep my MVP small. Here are a few user stories I had for the site:
- I can Sign up, Sign in, and Sign out via username, password
- I can CRUD my user account
- When I delete a user, that user’s webpages (bins) are deleted.
- I can CRUD a webpage (bin) live.
- When I delete a webpage (bin), the id is removed from the author’s array of webpages.
- I can text search for webpages (bins)
- I can text search my webpages
I had more user stories/bugs but I think that’s enough for now. Get a full list here at my repo.
> Challenges
I had my fair share of challenges developing and deploying this site. I had setup one website with Create React App previously, but I had unique problems with this project.
Preventing Cross-Site-Scripting
The first jarring issue to me was this: In our website, we are allowing users to edit HTML, CSS, and JavaScript in the browser. This is generally not a good idea! In our case, to prevent XSS, I used an iframe to separate the CodeBin website from the users webpage.
In practice, this meant the flow from a technical point of view was this:
1) User edits their webapage.
2) When the user clicks “refresh” or “save”, an HTTP request is sent to the server with the new files.
3) The server saves the new files. Responds with a 200 success.
4) The client refreshes the iframe, which points to the api to pull the new files.
By using an iframe, we’re restricting all scripts to that embeded page. Whoot!
Creating the Text Editor
I chose to use bootstrap to quickly style the website. This worked great except when it didn’t. For the text editor page, I decided to entirely scrap using bootstrap. I wanted a draggable text editor, which constantly fought with bootstrap styles.
In order to achieve this, I also had to redo my routing. I learned that you should separate routing from views in React!
Lesson learned: know when to use a framework, or how to structure your website so you are not forced to use it.
noSQL disadvantages
I used MongoDB for my database. The issue with MongoDB is that it’s unstructured and therefore difficult to cross-check and verify data, but it’s also really easy to setup and great for a quick database.
In order to keep everything consistent, I used mongoose as middleware between me and MongoDB. Mongoose allows you to create templates for your data. Whoot!
> Close
All in all I’m proud of this project. It was my first big solo project that I engineered and deployed on my own.