Skip to content
A place to share, trade, and talk about the music that you love.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
controllers
middleware
migrations
models
public
test
uploads
views
.editorconfig
.eslintignore
.eslintrc
.gitignore
LICENSE
LICENSE.txt
README.md
favicon.ico
package-lock.json
package.json
server.js

README.md

alt text

Garrett Moore 2019 - Data provided by Discogs.

Created using:

  1. SQL/PostGres/Sequelize
  2. JavaScript
  3. Node.js
    • Mapbox
    • BCrypt
    • Cloudinary
    • Dotenv
    • Express
    • Express Ejs Layouts
    • Express Sessions
    • Helmet
    • Passport/Passport Local
  4. HTML/CSS/Bootstrap
  5. [www.discogs.com] Data provided by Discogs

Deployed VIA Heroku (https://mighty-sands-84315.herokuapp.com)

I began sketching out the idea for Record-Exchange the weekend of 3/1/2019. I knew I wanted to make something music related for my second project - and after experimenting with the wonderful Discogs API, I knew that I needed to incorporate it somehow. The idea came to me after talking to a friend about the various online bartering groups we've encountered that dealt with just about everything except directly with music.

alt text

I wanted to make a platform on which users can explore new music, initiate conversation, trade albums, and foster the artistic curiousity that first drew me to the internet when I was a kid. I wouldn't be the person I am today if I hadn't spent those countless hours scouring every forum I could trying to take in as much new music as possible.

alt text

After sketching out the general concept of the project, along with what packages I might need, etc. - I got to work creating all of my data entities in SQL. I knew that the core functionality of the app would rely upon the connection of the User and Release tables - so I started with those first. Each table with a uni-directional One to Many relationship, joined by the usersReleases table containing the userId and releaseId information. After getting that core up and working - I made the Photo and Message tables. The latter being connected to Users by the same uni-directional One -> Many as before.

Entity Relations map created in draw.io

alt text

Once I had my packages installed, authentication processes, and models created and migrated - I was ready to start fleshing out the project in VSC. I began making all of the files and associations I knew I would need (.env, server, etc).


I then started writing out my basic CRUD routes - beginning with the first GET to query the API.

// Display search results
app.get('/search', function(req, res) {
  var search = req.query.search;
  var url = 'https://api.discogs.com/database/search?q='+ encodeURI(search) + '&key=' + process.env.CONSUMER_KEY + '&secret=' + process.env.CONSUMER_SECRET
  request( {url,
    headers: {
      'User-Agent': "Record Exchange - Student Project"
    }
}, function(error, response, body) {
    let results = JSON.parse(body).results;
    res.render('main/index', {results})
  });
});

The first roadblock I encountered using the API was the results I got back from the initial searches. It seemed that given Discogs wildly vast database - it not only brought back multiple versions of every album by any artist - but it brought back ** EVERY ** single release even remotely associated with them. On top of that - any query also resulted in not just the label or genre information - but multiple arrays of information for each tag. It made for quite an overwhelming user experience - so I began to implement some conditional rendering to seek out only master releases and their pertinent information.

alt text

Then I was able to start routing Search Results -> User Collection

// Add selected albums to collection
app.post('/search', function(req, res) {
  db.user.findById(parseInt(req.user.dataValues.id)).then(function(user) {
    return user.createRelease({
        title: req.body.title,
        artist: req.body.title,
        year: req.body.year,
        genre: req.body.style,
        label: req.body.label,
        imgUrl: req.body.imgUrl,
        type: null,
    })
    }).then(function(){
        res.redirect('/collection');
    }) 
  });

After applying some basic styling - I was able to render up the Collections page I wanted. Keeping a minimal design - I implemented modals for each release in the collection to display all of the associated information.

alt text


With modal pop up.

alt text

'See More by This Artist'

Using .split() on the returned object - I just selected the artist name and redirect the user to the search results for that artist


Once the user has designated any items for their collection - they're able to select any of them to be available for trade. Having a boolean column in the join table - the add to trade button just toggles it to True and prompts the user to add a comment about the album. I had a tough time getting both the album information and associated comments to render together on the myTrade page. After a lot of experimenting - I was recommended to use async to fire off all of the DB queries in a row. That solved the issue of only being to get one album out of the db at a time.

Trade Page:

alt text


3/10/2019 //

I have all of the basic functionality of the app up and running - but I still have a few things I plan to add over the coming weeks. A messaging system so users and directly message one another - either with a socket server chat - or just direct one to one messaging via the database.

This was a really fun project to make - having the app revolve around something I'm extremely passionate about, it was a really great drive to experiment and push myself to learn new approaches and techniques to programming.

You can’t perform that action at this time.