A gear sharing app built with AngularJS and Rails
MusicGearShare is a Craig’s List style application where users can sign up and share their music equipment with each other, including anything ranging from instruments, accessories, sound equipment, and more. After signing up, users can search gear thats available to rent and messages each other to coordinate sharing and renting.
The back end uses Rails for API endpoints, which AngularJS uses to make $http requests and retrieve information for the user.
Check it out the production app on www.musicgearshare.com
Or view the code on Github: https://github.com/cassaram09/music-gear-share
Back End: Rails 4.2.6
For the back end, I used Ruby on Rails. I considered using Rails API but learned about it after I had started, so I stayed with RoR. There would be performance benefits of using Rails API and would love to try it on the next app I build.
I used ActiveModel Serializers for rendering JSON responses at my API endpoints. The application is structured in such a way that only logged in users can access JSON endpoints in their browser, and can’t access other user’s endpoints.
Front End: Angular 1.5.8
For the front end of MusicGearShare, I used AngularJS. This was my first time building a custom Angular app from scratch (with the exception of a HackerNews clone I built recently) and it was definitely tricky getting everything set up. Once I figured out how to get some of the basic pieces together and how to make $http requests to my endpoints coding the remainder of the app became a lot easier (and a lot more fun!)
User authentication is achieved through Devise – this was difficult considering I wasn’t sure how the authentication, which is being handled by Devise and Rails, would work with Angular. I settled on using the Login and Signup pages as their own views, rendered by Devise, while the Profile state is render in Angular for consistency with the other pages in the app. I tried using other alternatives, such as Angular Devise and ng-token-auth, but struggled to get everything working (If you know how to work with Devise or authentication for Angular, feel free to message me). This solution was relatively easy to implement as Rails/Devise handles all the authentication and all Angular needs to do is query the appropriate routes I set up. In the future I would like to switch over the Login and Signup views to Angular, or use an Angular based authentication system instead of Devise.
I used SweetAlert for the notifications and pop ups, including the Send A Message pop up. I could have also used BootStrap’s modal windows, but I discovered this first and it was also very easy to implement.
I used MomentJS to convert the Rails generated timestamps on database entries, specifically for the Message timestamps. This allowed me to easily bypass converting timestamps manually.
I also got more experience using Bower to install and manage application (specifically Angular;) dependencies.
Walkthrough / Demo
Ideas for refactoring:
- Add a location for Users and integrate with the Google Maps API somehow? It really only makes sense to be able to rent from other users who are near you (vs someone across the country)
- Better messaging structure. I would like to have Messages grouped by threads instead of Sent / Received.
- Image uploads for Gear.
- Built in Leasing creation, so Users can create “Leases” when the arrange to share gear.
- Filter gear by date availability. This would be related to Leases – when gear is being leased, it is unavailable for a particular date range and cannot be leased.
- Ratings: User ratings, based on the experience of leasing and renting.