Beach Resort

In this project, I built a beach resort website using React, context API, and Contentful CMS. The website allowed users to browse and filter different types of rooms, view the details and images of each room. The website also provided information about the services and amenities offered by the resort. I used React router for routing, context API for state management, Contentful headless CMS for data management, and Netlify for hosting the application.

React is a JavaScript library for building user interfaces. It allowed me to create reusable and interactive components that rendered the UI based on the data and user actions. I used props to pass data and functions from parent to child components, and state to store and update the data that changed over time. I also used hooks, such as useState, useEffect, and useContext, to add functionality and access the context API.

Context API is a feature of React that allows me to share data across the component tree without passing it through props. It was useful for providing global state, such as the rooms' data, the filter options, and the loading status, that could be accessed and updated by any component that needed it. I created a context object using React.createContext, and wrapped the root component with a context provider that passed the value of the state and the functions to update it. I also created custom hooks, such as useRooms, useFilter, and useLoading, to access and update the context in a simpler and cleaner way.

Contentful CMS is a headless content management system that allows me to create and manage the rooms data in a structured and flexible way. It provided a web interface where I could define the content model, such as the fields, types, and validations for each room, and enter the content, such as the name, price, size, and images for each room. It also provided an API where I could fetch the content and use it in my React application. I used the Contentful JavaScript SDK to connect to the API, get the rooms data, and format it into a usable format.

Netlify is a platform that allows me to host and deploy my React application in a fast and easy way. It provided features such as continuous deployment, custom domains, HTTPS, and serverless functions. I used Netlify to connect to my GitHub repository, where I pushed my code, and automatically built and deployed my application to a unique URL. I also used Netlify to integrate with Contentful CMS using webhooks, which were triggers that notified Netlify when the content in Contentful changed, and triggered a new deployment of the application. This way, I ensured that my application always reflected the latest content from Contentful.