My MEVN stack App 🎶 Gig Manager: a CRUD application using a Node.js/Express/MongoDB back end, and a Vue.js front end (with Vuetify to help with styling).

I began by creating an ERD, to ensure I understood the data structure required for this project.

I began by setting up the back end. Although I had previously used an index.js file and kept all endpoints, controllers and schemas in the same file, I knew that for this project this was going to become unwieldy so I created separate files with controllers for each model.

Vue.js was the first front end library I used, so there was a fairly steep learning curve for this! I began by creating the single gig page, as gigs were the core model and being able to see all of the information for a gig, clearly laid out on a single page was one of the most important functions of the app.

I realised that I was repeating quite a lot of code - as the cards and the grids to display the cards were the same on each of these pages. So far, I had only used components as the pages, rather than separate parts of the page. To try to make the process of creating these pages more efficient, I decided that I would try to create the grid as a reusable component, passing in props to tell it which gigs to display. My initial version of the GigGrid component performed the fetch within the component, using conditionals to determine which data to fetch based on the props passed in.

With most of the CRUD functionality complete, I moved onto working out how I could implement one of the features my friend said would be the most useful for him - showing combined earnings over time by agency. This required a deep dive into the MongoDB docs, and I eventually arrived at aggregation as the best way to do this - which took a lot of getting my head around. The resulting function was eventually packaged into the getOne function above, so that the stats were served up alongside the agency and gig data with one fetch.