---

This is a Full Stack application to post your record collection. It's built with the Mongo(DB/ose), Express, React & Node (MERN) stack. It has two full CRUD features, a user account & a record profile. It is styled with Bootstrap, featuring a mobile-first design. Lastly, you can play the drums with your keyboard and I hope you think it's as cool as I do.

Video Tour

Git Url

https://github.com/bicycleben88/higginbotham-records

Technologies Used

• Node.js
• React
• Express
• MongoDB
• Mongoose
• CSS Bootstrap
• BCrypt

Features & Functions

Models, Views, Controllers (MVC) pattern

Models define the data of a piece of content (e.g. a record),

• 

Controllers

• define the routes associated with particular model
• follow RESTful convention (i.e. HTTP verb + endpoint = specific piece of data)
• 

Views

• are returned by a controller
• make up the front end of the user interface
• written in .jsx as React components
• 

Drum Kit

1. Import router & tell server to use it when it recieves a request from "https:...../drum"

2. define get route in controller to return drum.jsx from views folder

3. Create Views file

   • use custom data-key attribute to associate a keyboard key with an audio file
   • 

4. Import app.js in <Layout> to make it avaiable to all components

5. Create JavaScript Logic

   Grab DOM elements & add event listeners

   • 

   playAudio()

       - grab the audio file associated with the keyboard key that triggered the event
       - if there's an audio file, then play it from the beggining
   

   • 

   removeClass()

           - removes css effect
   

   • 

Type Ahead Search Bar

1. Create API end point to get list of album names & artists

   • Tell server to use API router
   • 

2. Create API controller

   • Access Record model
   • Use mongoose to find all Records & return JSON
   • 

3. JavaScript

   • Grab DOM elements & add event listeners
   • 
   • Make fetch request to API & get records
   • 

   findResults()

   create RegExp object from search term

   filter thru records to find matches

   

   displayResults()

   invoke findResults using user input

   only handle events triggered by the keyboard

   map thru array of matching albums & artists

   • display nothing if search bar is empty
   • create RegExp from user input
   • add class to highlight user input
   • create <li> that links to show page of record add <li> to the DOM

Notes

• RESTful - “Representational State Transfer”. It is a set of rules that developers follow when they create their API. One of these rules states that you should be able to get a piece of data (called a resource) when you link to a specific URL
• Regular Expression (Regex) - A regular expression is a sequence of characters that forms a search pattern. The search pattern can be used for text search and text replace operations.

Contact

• LinkedIn
• Tweet @BenMichaelJord1