And here I am once again, writing to you in the midst of changes. I’m in between projects, and thus, that means I’ve had some spare time to work on a personal project I’ve been wanting to work on for a little while.
I’ve seen several DJs websites, and honestly, they kinda suck. So I’ve created a very simple, yet robust, efficient and effective boilerplate for those blessed souls who live off their arts.
Let’s go to the nitty gritty.
First, I’d recommend you to set up the front end, as it ends up building a static page (oh the wonders of Vue Cli, Webpack, and so forth) that is already workable without the actual server (which honestly, only serves the purpose of storing and serving your awesome booking data!)
The Front End consists of a single Home component (yes, I know how to break things into atoms, but honestly this was supposed to be done in less than 7 days, which obviously was achieved by taking some shortcuts).
The Home component will:
- It shows a login link (login only works if the back end is running)
- Shows your awesome logo.
- Shows links to your Instagram, SoundCloud, Spotify (yes, your mixes can be on Spotify for free. Check out Spotify for Podcasters) and YouTube.
- Ask for Vuex (your awesome store/state manager) to fetch data from Twitch and try to know whether you’re in your porch streaming live music/video to the world wide web. In case you’re streaming at that moment, the Home component will display, right below the social links a video embed of you’re live streaming.
- It shows your about copy, with your DJ biography.
- It shows an embed of your SoundCloud.
- It shows your latest streams uploaded to your YouTube channel in a public playlist of your choice.
- It asks for Vuex to fetch data from your Instagram to show your latest 9 uploads with the square thumbnail inside a responsive grid, which overlays the first 160 characters of the image description as you hover your mouse on each image, which when clicked, leads you to the image in your public Instagram profile.
- In case you have the server up and running, and in case you have any bookings created in the database for any date between 3 days ago and 1 year from now, it will show each booking separated by year, and displaying the date, the country, the city, the name of the gig, the format of your presentation and a link in case you have a link for your fans to buy tickets.
- It shows your booking/contact info (as an image, because I know there are evil crawlers out there who are eager to fetch your contact as plain text and spam you with terrible products).
- And,last but not least, my company’s copyright. But, honestly you can just remove/edit it as you wish.
The Front End also has a register a new user component (that is deactivated in the back end) and a Bookings component which allows you to add your great bookings. All that wrapped in the Vue Router.
To setup your front end, just clone this repo and follow the instruction on the readme file: https://github.com/angeloreale/dj-website-vue-boilerplate
As for the back end, here is the repo:
The front end was built from scratch using Vue Cli. The back end repo was created as fork of a node-express-mongoose boilerplate by the awesome https://github.com/madhums. I’ve just adapted it for the DJs reality.
To be honest, I could have made the process of creating an account easier, but given my 7 days challenge and for security reasons, you’ll have to actually get your Postman skills into action in order to create the first account. But that’s only once, I promise. Then you’ll have the register page in the front end if you want to create more accounts (just activate the route in the back end first).
Well, that’s it! Here is a preview of my new DJ page using this boilerplate, which can be seen in https://dhruid.com