Responsive E-Commerce Website Redesign

Framer Shopify Developer

Web Developer

CSS3

HTML5

React

Project Overview

As part of a major brand overhaul, I was tasked with redesigning and redeveloping the e-commerce website for a leading lifestyle apparel company. The goal was to create a modern, mobile-friendly shopping experience that would drive increased online sales and customer engagement.

Key Features

Responsive, mobile-first design with a clean, intuitive layout

Custom product filtering and sorting functionalities

Integrated shopping cart and secure checkout process

Dynamic content management system for easy updates

Seamless integration with the client's inventory and order management systems

Technologies Used

HTML5, CSS3, JavaScript

React.js for the user interface

Node.js and Express.js for the backend

MongoDB for the product and user data

AWS services for hosting, CDN, and serverless functions

Results

The redesigned e-commerce website resulted in a 35% increase in online sales and a 22% reduction in shopping cart abandonment. The modern, mobile-friendly design and improved user experience helped to drive these significant business improvements for the client.

Code Snippet

Here's a sample of the React component I used to build the product filtering functionality.

import React, { useState, useEffect } from 'react';



const ProductFilter extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      categories: [],

      selectedCategory: 'all',

      sortBy: 'newest'

    };

  }



  componentDidMount() {

    // Fetch product categories from the API

    fetch('/api/categories')

      .then(res => res.json())

      .then(data => this.setState({ categories: data }));

  }



  handleCategoryChange = (e) => {

    this.setState({ selectedCategory: e.target.value });

  }



  handleSortChange = (e) => {

    this.setState({ sortBy: e.target.value });

  }



  render() {

    const { categories, selectedCategory, sortBy } = this.state;

    

    return (

      <div className="product-filter">

        <label>

          Category:

          <select value={selectedCategory} onChange={this.handleCategoryChange}>

            <option value="all">All</option>

            {categories.map(category => (

              <option key={category.id} value={category.id}>{category.name}</option>

            ))}

          </select>

        </label>

        <label>

          Sort by:

          <select value={sortBy} onChange={this.handleSortChange}>

            <option value="newest">Newest</option>

            <option value="price-asc">Price (Low to High)</option>

            <option value="price-desc">Price (High to Low)</option>

          </select>

        </label>

      </div>

    );

  }

}



export default ProductFilter;