Welcome to Spirited, where Single Malt Scotch lovers can rate and review their favorite whiskies, and search our database to discover new drams. Built using React and Ruby on Rails.
-
- User Authentication
- Explore Our Whiskies
- Add and Review Your Favorite Malts
-
Background and Implementation Timeline
- Initial Sprint
- Completed Expansions
- Planned Expansions
React
for modular component management and rapid single-page app renderingRedux
to manage the store and maintain a single source of truth for all React componentsJavaScript
as the frontend language, and to manage asynchronous operationsRuby on Rails
acts as the backend API, including controllers models, and jbuilder viewsWebpack
for bundling scripts into a single sourcePostgreSQL
as a database system
Spirited takes security seriously, and new users can register knowing their password will be encrypted and securely stored.
Once logged in, registered users are strapped to the window, as seen in the code snippet below, so they're spared the hassel of signing on every visit unless they've explicitly signed out.
<% if logged_in? %>
<script type="text/javascript">
window.currentUser = <%=
render('api/users/user.json.jbuilder', user: current_user).html_safe
%>
</script>
<% end %>
All visitors to Spirited can browse our collection of single malts, visit individual bottle pages, and read reviews from other users. Try searching the Spirited database for that bottle you've been meaning to try, and a custom debounced search handles retrieving results from the database.
this.debouncedSearch = this._debounce(this.fetchSearchResults, 400)
...
handleChange(e) {
this.showResults();
this.setState({ query: e.target.value },
() => {
if (this.state.query.length > 0) {
this.debouncedSearch(this.state);
} else {
this.resetSearchState()
}
})
}
See the scotch you want? You can navigate directly to the page to peruse our community's tasting notes. Can't find what you're looking for? You'll be invited in the search results to add a new bottle to our growing collection.
Once signed in, users can add new bottles to the site inventory, as well as edit or remove bottles they've created in the past via RESTful routes. Bottles must be added to a verfied distillery, and you can visit any distillery page to see their bottle listings.
export const createRating = (bottleId, rating) => dispatch => {
return RatingApiUtil.createRating(bottleId, rating)
.then( (rating) => dispatch(receiveRating(rating)))
.fail( (errors) => dispatch(receiveRatingErrors(errors)));
}
export const createRating = (bottleId, rating) => {
return $.ajax({
method: 'POST',
url: `/api/bottles/${bottleId}/ratings`,
data: { rating }
})
}
Registered users can also also add a review alongside a 1- to 5-star rating from any individual bottle page, thanks to nested RESTful routes. New and updated rating forms toggle into view, as seen in the gif below, and users trying to review the same expression twice will be invited to modify their existing rating.
Spirited was developed as an App Academy student project over a 10-day sprint, using Rails as a backend API and React with Redux for the frontend. The overall design was inspired by Vivino.com, a popular wine-rating app.
Initial Sprint:
- User Authentication (1.5 days)
- Bottles CRUD (2 days)
- User profile (1 Day)
- Ratings and Reviews CRUD (2 days)
- Homepage Filtering (2 days)
- Production README (1 Day)
Completed Expansions:
- Average bottle rating displayed on homepage
- Add default 'Add this bottle?' result when no search results
- Pages for distilleries
Planned Expansions:
- Pages for regions
- Secondary navigation bar with dropdowns for distillery and region pages
- User ability to crop photos on upload