Summary
When I was at ezTask, I was given the responsibility of rewriting the companies proprietary content management system. The one we were using had been written several years ago and had many issues that were preventing us from being a modern competitor in the education space.
So, I worked with our backed engineer to architect and build a single page React application that was also server side rendered. The CMS featured an extensive page editor with dozens of widgets ranging from layouts to image editors and text editors. It also featured several features specific to education and government like organizing users into groups (High school, middle school) etc.
Technologies Used
1. Javascript
2. React
3. ASP.NET MVC
4. React.Net
5. CSS Modules
6. Webpack/Babel
Design Considerations
There were a lot of things that we had to take into account when designing the new CMS because it was a huge time and money investment. We needed to design and build a content management system that would provide our local government and education customers with enough functionality to be able to build beautiful and dynamic websites but be simple enough that non-tech savvy users wouldn't be frustrated using it. The CMS also needed to provide support for SEO in search engines.
The CMS needed to provide customers out of the box with everything we and they need to build a modern website with slideshows, responsive layouts, text editors, page templates and many other things. We also needed to CMS to provide a smooth user experience as opposed to the previous version which used ASP.NET Web Forms and caused a full page refresh after any change. We had to build and design a CMS that updated instantly as a single page application.
The Architecture
So, with the design considerations though through I settled on building a single page application with React that was also server side rendered. The server side rendered portion of the application ensured that search engines were able to parse the content easily and that our clients SEO did not suffer.
I setup webpack to create 2 bundles, one for the client and one for the server. When the initial html request for a webpage was made the server would respond with the initial html for all of the react components on the page. Any subsequent updates were made via REST API that updated components as needed as the user made changes to their page.
Related works
Request a quote
