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.
- Clone the repository:
git clone https://github.com/torehirth/Rainy-Days.gitTo run the app locally, run the following commands:
npm run startMy LinkedIn profile | My GitHub profile