HawtSawce is a full-stack web app inspired by Untappd. We seek to create a community for hot sauce lovers globally by connecting hot sauces lovers to each other and to new sauces. The app provides functionality to add hot sauces, checkin/review them, search for sauces, and add comments to checkins and reviews.
HawtSawce is built using a RoR backend, PostgreSQL backend, and React/Redux frontend.
The Sawce sorting feature was a really interesting component to build. The dropdown itself was implemented using Material-Ui. The challenges here were to determine whether the sorting should be done in the frontend or backend, and also how to design the sort to most efficiently run the sort.
Here’s how it works:
- On each dropdown click, an AJAX request is sent to my backend with a code representing the sort option selected.
- The rails backend then does the appropriate ActiveRecord query which hits the database.
- The response sent back to the front-end is an array containing the IDs of the sawces sorted in the correct order, and this result is then stored in my front-end store.
- All of the sawces are already in the store due to an AJAX call made during the ‘componentDidMount’ lifecycle step. These are stored in a hash, with the keys being the sauce_ids, and the values being the entire sawce object.
- With the sawces already in state, the sawces can then be displayed in order by doing an O(n) lookup using the array of IDs and the hash of sawces.
const mapStateToProps = ({sauces, saucesOrder, session}) => {
const holder = saucesOrder.map((sauceId) => sauces[sauceId]) || [];
return {
sauces: holder,
session: session
};
};While not specifically a feature, numerous UI components were challenges to source and implement. There were a number of libraries I learned and implemented in order to have a crisp and functional UI. Among these included material-ui, react-intl, and react-rating. After deciding to use a library, it is time-intensive and often quite difficult to choose one. Reading the documentation leads to a long phase of experimentation to learn how to implement the components, to determine whether or not they fit your usecase, and to imagine if it will continue to work for future usecases.
Below is an implementation of search with the Material-UI Autocomplete, which is used to display results in the frontend, with pg-search (multisearch) being used in the backend for the cross table search.
import AutoComplete from 'material-ui/AutoComplete';
render(){
const searchText = (
<i class="fa fa-search" aria-hidden="true"></i>
);
return(
<AutoComplete
searchText={this.state.searchText}
onUpdateInput={this.handleUpdateInput}
hintText="Search..."
dataSource={this.props.searchResults}
fullWidth={true}
onNewRequest={this.handleNewRequest}
/>
);
}Bookmarking is an important function of any discovery app. Users not only want to rate sauces that they have tasted, but will also want to pin sauces that they want to taste in the future.
Email communications between an app and a user is fundamental to an app's usability. Users need to be able to authenticate their accounts and to retrieve passwords if they lose them.