Another phase at Flatiron School, in the books! Phase 2, as I wrote about previously, was based upon the JavaScript library, React.js. Learning React certainly came with challenges, but through the building of this project with my partner Daniel Kilcullen, I learned to appreciate many of the benefits of the library to build dynamic Single Page Apps (SPAs). To piggyback on my previous entry making an analogy between React and Eli Whitney, the ability to create Components like a manufacturer would use interchangeable parts is critical to building SPAs that feel like multi-page apps without bothering the user with constant refreshes and rerenders, and I will be highlighting how we utilized this in our app, VTSkir.
Daniel and I are both avid skiers and wanted to create an app for the vibrant ski (and snowboard) community. We saw a big opportunity in helping share information on factors at the mountain that can negatively affect your day at the slopes independent of the conditions of the mountain itself like the parking lot, stairs to traverse in boots, etc.
We had the community we wanted to benefit in mind. We had an API to pull our data from, SkiMaps.org, although we did have to narrow our initial focus from any ski resort in North America to specifically Vermont in part because of the large nature of the data set as well as the quality of the data (SkiMaps.org is an open-source database with inconsistencies across all resorts about what data was submitted by users. Accessing the data that we needed was very challenging because of a lack of consistency with how the data was stored in the API). We set out to create functionality that would allow users to rate each resort on the specific criteria we outlined, post that data to our API server, and dynamically see how that new data would affect the data rendered on the page. We even had a stretch goal to curate the Apres Ski experience with a suggested local brewery (another important part of the fabric of Vermont). Now it was time to execute.
As shown in the demo, we were able to create the functionality that we set out to create, as well as style the page with usability in mind. This was in large part due to utilizing React’s Components.
Much of our styling was thanks to MUI, which is a CSS framework that utilizes React’s component features to style dynamic apps like Netflix, Amazon, and Shutterstock. This gave us a leg up in regards to styling AND functionality thanks to some of the components that are already built into MUI.
One such feature was our NavBar.
import Box from "@mui/material/Box";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import "../styles/NavBar.css";function LinkTab({props}) {
return (
<Tab component="a" onClick={(event) => {
event.preventDefault();}}
{...props}/>);}function NavBar({searchText, handleSearch}) {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};return (<Box className='container' sx={{ width: '100%' }}><Tabs value={value} onChange={handleChange} aria-label="nav tabs example"><div className="background"><img className="site-logo" src={skier} alt="VTSkir Logo"/></div><Tab label="Home" component={Link} to="/" /><Tab label="Favorites" component={Link} to="/favorites" /><Tab label="About" component={Link} to="/about" /></Tabs></Box>);}export default NavBar;
The NavBar component that we created was based upon a NavBar snippet from MUI.com that also utilizes components that are part of the MUI framework. For the NavBar, we imported the MUI components of <Tab/>, <Tabs/>, and <Box/>, which made our lives much easier as MUI already knew how to structure the NavBar thanks to the framework. We more or less inserted the appropriate information for VTSkir, which in this instance were the routes that each Tab would render.
<Tab label="Home" component={Link} to="/" /><Tab label="Favorites" component={Link} to="/favorites" /><Tab label="About" component={Link} to="/about" />
Components were also very important in styling our Grid. MUI has created an excellent Grid system that gave us the similar advantage of rendering our data in an easy-to-use UI.
<Box sx={{ justifyContent: 'flex-start'}}><Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>{resorts.map(resort => (<Grid item xs={2} sm={4} md={4} key={resort.id} sx={{ boxShadow: 3}}><Item><ListItem key={resort.id}
resort={resort}
isFavorite={ isFavorite(resort) }
toggleFavorite={toggleFavorite}
postReview={postReview}
reviews={reviews.filter(review => {
return review.resortId === resort.id
})}route={route}/></Item></Grid>))}</Grid></Box>
We were able to utilize the data we fetched from the API, use JSX to map out all the resort objects, and have them render into the grid UI, without having to worry about the layout, other than changing a few built-in parameters of the <Grid/> component.
This all came without having to work with CSS extensively.
One other Component that made coding this page much easier with better functionality was the Star Rating scale component <ReactStars/>.
import ReactStars from 'react-stars'<td><h1 className='section-heading'>Leave a Review</h1></td>
</tr>
<tr><td>(1⭐️ Bad/Unsatisfactory | 5⭐️ - Great/Easy to Use)</td>
</tr>
<tr><td><h2>Parking</h2></td>
</tr>
<tr><td>Was there enough parking?</td>
<td><ReactStars
count={5}
onChange={(rating) => handleSetReview('enoughParking',rating)}
value={review.enoughParking}
size={24}
color2={'#ffd700'} />
<ReactStars/> is a pre-built component that we imported that gave us the dynamic UI for our rating system that returns the number of stars that the user chooses. We were able to code an event listener (in this instance onChange) to track what the user rated each resort on the criteria and be able to pass it up to the parent component that would both post it the review to our API and use that data to render changes in the data on the screen. This saved us a lot of time to not have to code a component ourselves, but also, if we are being transparent, allowed for a much better UI experience than we could have created ourselves.
If given the opportunity, Daniel and I would love to be able to expand this to other states and add rating criteria. Thanks to React’s component framework, this would be easy to scale up. We would simply just reuse what has already been created and also allow us to upgrade as we improve our skillsets without having to recode the whole app.
As someone new to coding, being able to plug-and-play components makes the whole process much less intimidating and gives me more confidence to create dynamic SPAs, especially with so many components already out there to use. As Steve Job’s once said:
“We have always been shameless about stealing great ideas.”
Great ideas combined with interchangeable components in React make for great apps! Eli Whitney would approve!
