Skip to content

Artisty is a full stack Etsy clone that displays various artworks for sale. Users are able to search for items, either via search bar or category listing, and place them in their cart for purchase.

subinc1633/artisty

Repository files navigation

artisty

Screen Shot 2021-12-13 at 4 54 58 PM

About

Artisty is a full stack Etsy clone that displays various artworks for sale. Users are able to search for items, either via search bar or category listing, and place them in their cart for purchase.

Live Demo

Technologies Used

  • Ruby on Rails
  • HTML
  • SCSS
  • JavaScript
  • React
  • Redux
  • AWS
  • PostgreSQL

Features

Search

Users may search for artworks through the search bar and find the item they wish to look up. The use of URLSearchParams allowed for faster procurement of the search queries.

Untitled

const SearchPage = () => {
    const items = useSelector(state => state.entities.items);

    let location = useLocation();
    let params = new URLSearchParams(location.search);
    let query = params.get('q').replace('+', ' ').toLowerCase();
    
    ...
    
    return (
        ...
        <div className="item-list-container">
            <h1 className="search-query">You searched for "{query}"</h1>
            <ul className="category-show-items">
                {
                    Object.values(items).map((item, idx) => {
                        if (item.title.toLowerCase().includes(query)) return <CategoryShowItem key={idx} item={item} />
                    })
                }
            </ul>
        </div>
    );
}

Reviews

Users may leave reviews and set a rating for an item if they are logged in. After a review is created, the item page re-renders and updates the star rating.

reviews

const ratings = []
item.reviews ? Object.values(item.reviews).forEach(review => {
     ratings.push(review.rating)
}) : null;
const avgRating = item && ratings.length > 0 ? Math.round(ratings.reduce((acc, el) => acc + el, 0) / ratings.length) : 0;

return (
     <div className='review-index'>
         <h3 className='review-total-count'>{reviewIndexItems.length} Reviews</h3>
              <span className='review-rating'>
                    {
                        [...Array(5)].map((star, idx) => (
                            idx + 1 <= avgRating ? <IoStar key={idx} /> : <IoStarOutline key={idx} />)
                        )
                    }
                </span><br />
...

Cart

On the item's show page, users can add the item to their cart with the number of items. Users may delete the item from their cart and update the quantity. Upon checkout, the cart refreshes and users may continue shopping if desired.

cart

Future directions

  • Allow users to favorite items and shops
  • Implement filter function for categories
  • Add image carousel functionality

About

Artisty is a full stack Etsy clone that displays various artworks for sale. Users are able to search for items, either via search bar or category listing, and place them in their cart for purchase.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published