Problem

Jumpitt's website lacked an admin panel that would allow a person with no coding knowledge to quickly generate modifications. I took this problem as a personal challenge to learn how to create an application from scratch with React and NodeJS.

Progress

The first step for the creation of the site was to manage the whole interface using NextJS, which allowed to manage routes, SSR, or static content easily. For the components and style management, I decided to use Styled Components, and finally, to get to know GraphQL, I used GraphCMS - a headless CMS in the cloud -, which offered me the possibility to quickly set up an API. As time went by, I got to know KeystoneJS, and I discovered that it completed all the requirements that GraphCMS offered me, and even added some features like managing your DB and also your image service, that's where I met MongoAtlas and Cloudinary.

Results

Thanks to this challenge I learned tools like GraphQL, the MongoAtlas service for free Mongo database management, how to implement Lazy Loading through the Intersection Observer API, and the creation of custom hooks. I used Heroku to deploy some test cases, but finally, everything was running on AWS, along with the service's DB and Cloudinary's cloud for image management. This website is the Jumpitt development agency's current business card and it meant a substantial improvement in the updating of its contents.