Building a minimum viable UI with React and open source componentsHazim JumaliBlockedUnblockFollowFollowingFeb 17CodePusher’s code editor interface.
Recently I decided to start a side project called CodePusher, which is a real-time code collaboration platform where developers can remotely solve programming challenges together.
This idea largely came from a desire to bring more collaboration into our learning process as developers.
When I first started out as a software engineer, the biggest problem wasn’t so much trying to solve hard technical problems but learning how to effectively communicate and work with other engineers on my team.
This is such an important skill as great software is built by teams and not isolated programmers.
But even with all the technology around real-time communication at our disposal, learning to code can still feel pretty isolating and not representative of what working as a software engineer is really like.
To solve this problem in an MVP fashion, I decided to take a common learning process used by many developers and revamp it with easy to use remote collaboration tools like code sharing, messaging, and voice chat.
The learning process I chose to focus on was solving targeted programming challenges, which is a good example of how deliberate practice can be used to improve a skill.
This is a process used by a lot of developers in many different situations from learning a new concept to preparing for job interviews.
Picking a UI library and design systemThe first decision made was to build the entire front end in React and bootstrapped using create-react-app.
React is great for quickly building and iterating over your web app’s front end, there is a ton of community support and open source libraries available which really helps to tighten those initial development cycles.
Another big time saver was also deciding to use a design system library instead of creating my own.
This library did however have a huge impact on the look and feel of the app.
If you decided to go with a design system, make sure to throughly vet the different components available before picking one to see if it aligns with the UI vision you have for your product.
The three main choices for me were either Material-UI, Semantic UI, or Ant Design.
For CodePusher I chose to use ant design as it allowed me to build a clean code editor interface which users could easily get use to.
The library itself was also fairly straightforward to work on and easily customisable through CSS when necessary.
Building an Interface for a code editorThe first and most important part of building the UI was the code editor interface.
The main goal here was to build an editor that most developers could feel familiar with.
For instance, a lot of the UI details for this part of the app were inspired by Atom.
In order to achieve this it had to have a main text area for writing code with syntax highlighting, a terminal to run commands, and a place to read up on the problem description.
On top of that, there had to also be easy access to communication tools such as direct messaging and voice chat.
To implement the main editor I used react-ace which is a react component based on the popular ace editor library.
Alternatively, this could have also been implemented using react-codemirror which is similarly based on the CodeMirror text editor.
Next step was the terminal which was implemented using react-terminal-component, while the README section used react-markdown to render a string to a complete markdown view.
React-panelgroup was also added in to allow users to resize sections of the UI on the fly by dragging on the borders.
This is a pretty common feature for online code editors with CodePen and jsfiddle being two good examples.
The only UI features left to consider on this page were the communication tools.
For this the only other dependancy needed to be installed was react-chat-widget in order to implement a direct messaging window.
The voice chat as well as all the other components seen on the header, footer, and sidebar were a combination of ant design components and customised CSS.
The final result was the following code editor:Building the remaining pages for authentication and account managementThe code editor by itself, although delivering the majority of the app’s value, is not enough to satisfy a minimum viable UI.
The user still needs a way to login and manage their account settings.
Therefore, at this point it was necessary to be able to route to different pages.
This was achieved through the react-router library.
The implementation of the login page was pretty straightforward using mostly static HTML and CSS.
The only dependancy was the “Login with GitHub” button which was an ant design component.
The final result was the following authentication screen:In terms of dependencies required, the account management page fell in between the login screen and the code editor.
Each option on the account management screen relies on react-router’s switch routing.
All the other components were then implemented again using ant design and customised CSS, with the exception of the payments form which uses react-stripe-elements.
Since I had already planned on using stripe as the main payment gateway this component was a great way to save the time in building out a complex front end workflow required to safely collect a user’s credit card details as it was already a built in feature of the library.
The final result was the following account management page:SummaryOverall the time spent on producing a minimum viable UI for CodePusher was 2 weeks compared to two months had I decided to build out most of the components on my own.
In the end the front end for CodePusher ended up with 9 open source dependencies listed below:reactant designreact-acereact-markdownreact-terminal-componentreact-panelgroupreact-chat-widgetreact-routerreact-stripe-elementsHowever, it’s important to also note that this was only the work needed to get the UI and UX set up.
At this stage the front end still needs to be supported by a back end system that handles the core business logic of dealing with real-time code collaboration and concurrent live sessions.
Part 2 will focus on what it takes to implement user authentication as well as an end to end system for collaborative code editing and direct messaging.