Guitar Bazaar - http://guitarbazaar.trade/#/

---

I've always wanted to own a guitar shop that allowed me to buy and sell used guitars, service/repair guitars, offer guitar lessons and record music in a studio. I built this website as my personal project for DevMountain based off of that dream.

The admin portion of this site can be accessed if you put

/login

at the end of the url. Login with kk as the username and kkkkkk as the password. Feel free to mess around with the data :) I trust you.

Optimization

---

I really wanted to focus on keeping the site optimal at every step. I made sure to use the minified version of all CDN's which I know can make an small difference. Really, it is all those small differences that can really add up and make a great fluid experience for the user. I used gulp to minify all my js files and I minified all images using Amason S3 to host my images). I feel like I just touched the surface with what gulp can do but I really enjoyed working with it.

I've combed over the entire project multiple times looking for needless divs, classes, id's and white space. It is easy to add a class or a div with intentions of using it but then forgetting about it. Again, these seem pretty miniscule but they can add up. I pride myself with clean code as well. Readability is HUGE to me.....Before I can even start debugging I have to clean up the code indentation and spacing. This is something I feel I am OCD about but I get a strange satisfaction from looking at a perfectly indented and symmetrical piece of code. It is almost art to me, in a really nerdy way. This site was hosted using MongoLabs and DigitalOcean

Techs I used

---

Libraries I used

---

Angular-UI-Calendar - http://angular-ui.github.io/ui-calendar/

This awesome library made it really simple to get a fully functional calendar implemented on my site. It was very intuitive setting it all up. I have it connected with my database so that once a studio session is added, it will show up and persist on the calendar.

Toaster Confirmation Alerts - https://github.com/jirikavi/AngularJS-Toaster

Often times, I will be at a website and I will click a button and won't really notice anything happen because it happened so fast. I really enjoy how Toaster alerts gives you an aesthetically pleasing pop up confirmation. I have used this alert on the admin section, confirming to the admin when a CRUD function was successfully executed.

Passport Local - https://github.com/jaredhanson/passport-local

I used passport local auth to allow the admin user to login securely. I learned a lot about what it takes to keep confidential information hidden from the client side. Processes like salt and hashing is crucial when using local authorization. I was very pleased with how easy Passport Local made this for me.

ngAnimate - https://docs.angularjs.org/api/ngAnimate

I didn't get to dig into ngAnimate as much as i'd like but I did accomplish adding a neat animation to every route change which I though was pretty cool. ngAnimate made it real simple to do this and I think it's subtle animations like these that really make the difference for the users experience.

We had 2 weeks to finish our personal project and I feel I easily put in over 100 hours on this one in that span. I take a lot of pride in it. Thanks for taking the time to look at my work :) Feel free to reach out to me about this project or about anything else really.

Twitter: https://twitter.com/KyleBarl0w
Email: kylebarlow@musician.com
Github: https://github.com/kbazl3
LinkedIn: https://www.linkedin.com/in/kylebarl0w