Green Doctors Programme
Sustainability enterprise
Green Doctors Programme is a social enterprise that aims to promote circular economy in the field of medical wastes
Purpose and goal
About Us pageI joined this programme as their Web Developer (Frontend), with the goal to create their main website as per their design lead's mockups. The website serves to educate the public about their mission and vision, and to provide a platform for them to share their blog posts.
I worked alongside a backend developer who was responsible for creating the models Contentful CMS and the deployment of the site. I converted the high fidelity mockups to a responsiveresponsive website using GatsbyJS and React Bootstrap, and integrated the site with Contentful CMS using GraphQL.
Stack consideration
With no experience using a component library like Bootstrap, I wanted to learn how to use one to speed up the development process. I chose React Bootstrap as it had good documentation, and GatsbyJS as it had deep integrations with Contentful CMS and GraphQL, and provided a good opportunity to learn about static site generationstatic site generation and dynamic sites.
Contentful was chosen to provide an easy interface for the blog writers to create and edit their posts, and GraphQL was used to query the data from Contentful and to pass it to the React components. Their free tier also provided plenty of space for the site.
Problems faced
Blog pageCreating the blogs was one of the most challenging parts of the project. I had to first learn how to fetch the data using GraphQL, then use the slugsslugs to create the pages dynamically. Thereafter, I had to take the raw HTML data and convert it to React components, while retaining the styling and images.
Lighthouse reportThere was also a large emphasis on SEO and accessibility, where I had to learn about the different tags and attributes to include in the site to improve its ranking on search engines and to make it accessible to all users. LighthouseLighthouse was used to audit the site and to improve its performance.
Additionally, converting the design to code was not as straightforward as I had thought. I had to discuss the feasability of designs with the design lead and inform them of the limitations of viewports and the time required to implement certain features.
Lessons learnt
Being my first time working in a team, I learnt the importance of communicationcommunication and collaborationcollaboration . I had to communicate with the design lead to clarify the designs, and with the backend developer to ensure that the data was being passed correctly.
Bi-weekly meetings were held to discuss the progress of the project and to raise any concerns. I also learnt to be more proactiveproactive and to ask the more senior backend developer questions when I was stuck, instead of trying to solve the problem myself for a long time, which is common when handling new technologies.