Tactile is a shopping app where users can see details about an item by clicking it within an image. Users can browse editorial photographs, click an item they like, then add that item to their cart.
Tactile is a single-page app built with a Ruby on Rails backend, PostgreSQL database, and React/Redux frontend. Rails is an opinionated backend framework, which makes it ideal for projects built in a short timeframe. React is ideal for single-page apps because it is designed to dynamically render components. PostgreSQL is a relational database, which made it easy to connect images, image maps, and individual clothing items.
Tactile's core features include:
- Responsive clickable items
- Searchable images
- Shopping cart
- User authentication
Tactile's coolest feature is the ability to click directly on something you like in an image. Like her jacket? Click it. Want to know more about those shoes? Click 'em. Tactile lets editorial photos ✨come to life✨.
This clickable magic is build using an HTML image map, which renders like this:
<img useMap="#demoMap" src="cute-outfit.jpg">
<map id="demoMap">
<area shape="poly" coords="123, 345, 456, 746, 12, 23, ..." alt="12">
</map>Tactile uses image-map-resizer to render clickable maps on desktop and mobile.
- user clicks an
<area>tag - grabs the
item_idreferenced in the<area>'salttag - redirects to
/item/{item_id}
- fetches item information based on URL
- renders item details!
Users can search the database of images and Tactile will return all relevant images.
Tactile wouldn't be a shopping app without a cart. Users are required to login to see their cart. Logged out users are redirected to /login if they try to open their cart. This is achieved using an <AuthRoute> on the /cart path.
