What if an individual or small company wants a basic, maintainable, and elegant landing page without the fuss of an entire platform such as Wordpress?
From this precept, Level was born. The idea of Level is to make content editing by the user trivially simple even for those with little technological prowess. The user can login securely without any page reloads or navigation and start editing the page straight away.
The User Workflow
First of all, the user scrolls to the bottom of the page to find the login link:
Clicking this link shows the login form, where credentials can be entered:
If the credentials are correct, the page enters editing mode. This is all done with no page reloads or redirects.
Dynamic fields are now editable throughout the page. As the user edits a field, the save status is shown in the toolbar. Changes are sent to the server, debounced by several seconds from user input to prevent request spamming.
The user is notified when the server has received and stored changes:
The process allows for simple editing. The user can see what field they are editing, can toggle spellcheck, and can logout at any time.
The Technical Details
- MongoDB: Uses two collections: one for users and one for fields.
- Express: Handles the app routing. Level is more or less single-page, so there’s nothing too fancy here, but there are routes set up for actions such as logins, logouts and field edits.
- React: The app is built on React.js. Interface files are used for both client-side and server-side rendering.
- Node.js: The runtime used for Level.
There are other key libraries which I used:
- Redux: Used for state management and action dispatching. In other words, a lot of heavy lifting!
- redux-observable: Brings RxJS to redux. In Level it takes care of the AJAX workload; namely, sending login attempts and edits. It also has neat functionality for debouncing those edits before sending.
- Passport: Server-side authentication management. Used with a few session libraries, makes user management quite convenient. Obviously, changes will only be pushed to the database if an authenticated session is detected.
- Redux took a while to learn. There are reducers, actions, and connections to manage, not to mention the state itself. I found Redux to be one of those ‘practice makes perfect’ things. I’m nowhere near perfect but I can get actions whipping through the app pretty quickly now, and linking them to components seems like less of a chore than it did initially.
- I recommend source maps. I’ll admit it: I barely realised what a source map was, let alone how it could help me. That was, until halfway through the project. Webpack can easily generate source maps and it makes debugging many times easier than probing code with ‘console.log’.