Ride is a web application targeting the motorcycling enthusiast community. The common theme between all motorcyclists is the "Ride", that stretch of road that has the right amount of curves, the best views, the fast straightaways, and, of course, the burger joint to finish it all. Ride, the web app, allows a user to record a ride on a map and peruse all saved rides. Have a great idea for a ride? Use the "post" a ride feature to share it with your moto-brothers and sisters. Don't know where to go this next Saturday? Stop by Ride and find your next adventure. Have a comment on an existing ride? Leave the community your nugget of wisdom in a ride review. Our aim is to enhance the enjoyment of two wheeled riding everywhere.
Ride is a full stack, single page application. In its construction, we've used MongoDB, Mongoose and Express on the backend. React and Redux complete the application on the frontend. Other technologies include BCrypt for password hashing and the MapboxGL API for all map related functionality.
- React
- Redux
- Express
- Mongoose
- MongoDb
- MapboxGL
- Secure frontend to backend user authentication using json webtoken.
- All rides are displayed after login in an easy-to-view, ride tile format.
- Visitors and users alike may peruse the rides on the website.
- A search bar allows for search on ride titles, e.g "san francisco" turns up all rides with "San Francisco" in the title, case insensitive.
- Users can create, read, update and delete rides; users can create, read and update reviews.
- Users can rate rides, and average ratings for a ride are displayed on each ride tile.
Our users are greeted by images of Joaquin Phoenix's legendary ride in the critically acclaimed movie "The Master":
The main page of the app is an index of all the rides:
The image below shows a user searching for rides that contain the "skyline" text string (case-insensitive search). You haven't ridden the Bay Area if you haven't done Skyline Blvd:
Creating a ride is simple, and the app guides you through the process. First, fill out the text data:
And then click on the map to create waypoints.
There's much more to the app, so be sure to visit and take the demo account for a test ride!
User authentication does not store the user's password, but rather a password digest:
bcrypt.genSalt(10, (err, salt) => {
bcrypt.hash(newUser.password, salt, (err, hash) => {
if (err) throw err;
newUser.password = hash;
newUser.save()
.then(user => {
const payload = {
id: user.id,
email: user.email,
username: user.username,
location: user.location
}
Ride data is stored a mongoDB backend, routed there using Express, through a set of friendly validations:
router.post('/', (req, res) => {
const { errors, isValid } = validateRideInput(req.body);
if (!isValid) {
return res.status(404).json(errors);
}
The single page app makes use of a React and Redux front end, with a number of components, including the searchbar:
render() {
return (
<input
className="search-input"
type="text"
placeholder="Search"
onChange={this.filterFunc}
/>
);
}
We've taken care in the styling of the website, to give it a clean, intuitive and seamless feel. Styling of the ride create / update buttons was a concern. We wanted the app to have smooth transitions to new functionality, as evident in this CSS transition:
.button-tray {
background-color: white;
display: flex;
justify-content: space-around;
height: 0px;
transition: height .5s;
z-index: 1;
}
The development roadmap for Ride includes some form of photo attachment to a ride. Outside of the text fields and the actual map of the ride, a user might want to post a picture of a critical juncture or turn in the route, or a beautiful vista which really distinguishes the ride.