How we made a JAMstack-based web application for online yoga & lifestyle journal
The traditional media market has changed. Nowadays to succeed you have to be as close to the audience in digital channels as you can. Our client approached us with the task to quickly develop MVP of web application for yoga + lifestyle magazine going online. According to the client request we had to quickly develop the web project with the prospect of further building up the functionality.
The short presentation of cosmic plans of our client
Web application was intended to let the customer publish materials, special projects and digital advertising at the MVP stage already. Client has extensive experience in media so first of all content and its visualization were matter for this project.
Yet the task was not to create one more news feed. The main goal was to build the architecture of progressive web application for online publishing with the minimal release time for the first viable version.
Among the challenges of the case were limitations of our client in human resources for maintaining the project. So we had to develop the most user-friendly CMS which would allow to do a big day-to-day work by small team of editors.
The web application should contain interactive and user friendly features required for special projects and further monetization. The mission control of the system should be scalable and be able to simply transformed for new business tasks.
So the main requirements of the project were:
Fast Development of MVP with focus on building of PWA and possibility to scale backend system in the nearest future
High speed of Web pages on all devices
Web application’s mobile-friendliness (iOS, Android)
Possibility to handle with queries of thousands of visitors simultaneously
Design highlighting the philosophy of brand
Further building of an online-store on the basis of the web app
APPROACH
We could take some Wordpress standard templates and plugins to solve the client task old-fashioned and traditional way. It would take some time to do all steps among complex server-side operations required to present the final version in the web app. This traditional workflow requires a lot of effort to make the website secure, reliable and fast. The developers should carefully set up all this magic between the front end, back end and databases. It has many steps and takes a lot of time but any qualified coder can do it.
What we designed and developed
We want to launch the project from scratch extremely fast in the meantime it should be beautifully designed and totally secure. And we do not want to involve lots of developers in the project in order to low cost of the development.
So considered all project requirements we chose Gatsby and Netlify CMS as the main tool of the development. Front-end was performed using React JS.
React attracted us by its potential to build new powerful branched system on the basis of already available solution.
KEY FEATURES
of the task appeared while working on the project
Analysis of the unique content
Digital remastering of the content in very short terms
Development of multilingual search plugin
Development of adaptive mobile version (still in process)
Netlify CMS was chosen as temporary content management system. It is open source out-of-the-box solution so we had no need to reinvent the wheel. Netlify CMS was customized according to the technical requests. This CMS had its limitations so the next level of the project will be the development of custom headless CMS.
HumanseeLabs team designed all required built-in tools helping editors to create content and deliver story the best way. The structure of web application allows to publish guides with map binding, stand alone stories as well as sets of stories combined into magazines, videos, some special projects etc.
Types of content provided in Yolife.is
- Long reads
Example of the long read interview published as the main topic
The main type of content presented in Yolife.is. The challenge was to provide extremely high load speed in spite of heavy content the article could contain.
We decide to use super fast CDN which helps to deliver content to end-users extremely quickly regardless of their location.
- Journals
How journals is look like
Journals is the very special format of Yolife.is. The project has evolutionized from offline traditional printed magazine Yoga+Life. So the type of content which we called journals in the web application Yolife.is is the new digital representation of all unique content made in span of 6 years of existing the magazine.
- Guides
City Guides with personalized recommendations of famous city inhabitants
This type of content includes the map with recommendations where to go and what to do in the city. We called these recommendations as personalized city guide. As you might see a tracking symbol on the map change its position according to opened or scrolled article about particular city place in the left text box.
RESULT
Design and development of the web application to be used as digital media platform for publishing engaging and easy-to-read content. The designed software architecture allows to extend web application with new apps (ios, web). Platform could be extended with the online-store.