You can view the live project here

This project is part of my Front-End Development coursework, where I developed an online store called Rainy Days, specializing in jackets. The project involved setting up a headless WordPress instance with WooCommerce to manage products. The front-end site dynamically fetches product data using the WordPress REST API and displays it in a grid format, with a detailed view for each item. This approach allows product data to be updated and displayed without hardcoding it into the HTML, leveraging JavaScript for dynamic content.

• Dynamic product management: Products are fetched via the WordPress REST API from WooCommerce.

• Product grid view: A responsive grid displays available jackets with images and prices.

• Product detail page: Each product has its own detail page with more information.

• JavaScript functionality: All product data is fetched using JavaScript, allowing for smooth updates.

• Mobile responsive design: The layout adapts to different screen sizes for an optimal user experience.

• Deployed online: The site is hosted using a static host, ensuring fast load times.

• 
  

• WordPress (headless setup)
• WooCommerce (product management)
• JavaScript (API fetching and rendering)
• HTML5/CSS3 (front-end structure and styling)
• Netlify (for deployment)

This project utilizes the WordPress REST API to manage product data.

Fetching all products: JavaScript is used to fetch an array of product data from the WooCommerce API and render them on the homepage as thumbnails. Product detail page: Individual product data is fetched based on an id search parameter and displayed on the product detail page. Deployment The website is deployed on Netlify.

1. Clone the repository:

git clone  https://github.com/torehirth/Rainy-Days.git

To run the app locally, run the following commands:

npm run start

My LinkedIn profile | My GitHub profile