nobodytoldme

[nobodytoldme]

Conclusion

To conclude on this project I want to reflect on the process along with comparing what we achieved compared to what we set out to do. Alongside this I will discuss a few future modifications of the site. So to start we wanted to create a site that allows artists and venues to organise gigs easily. I feel this works for the most part with the exception being a future modification. I want in the future to add a feature that has contact information for each user that appears on the press of a button. This shouldn’t be too difficult to implement but I want it to be more detailed than just an email for example. I want it to be customisable like a directory. In the sites current state, users can still add and view events. This is a main thing we wanted to add.

Another feature is getting a user database set up with the option of a profile picture. After a long time I got this working. I am really pleased with the functionality of the backend of the code overall. Especially considering I started off from scratch with Firebase which I had never used before. I was glad the site even worked let alone save users and be hosted on a different URL etc.

I feel as a group we have worked well together to create some decent code and an overall project that may not be as complex as we once hoped but still serves its basic purpose. I feel individually we have all pulled our weight and supported one another through difficult periods. This especially applies to when Dan and Mike were helping me during the problems I was having dealing with my grandparents poor health.

Myself, Mike and Dan would regularly call to work collaboratively. This made motivating each other easier as we could encourage each other. Overall, I feel the project has been fun to make despite being difficult and holds potential for development in the future. It may not have all the capabilities we hoped for at the start but considering the current situation we have been working in, I am proud of us all!

[nobodytoldme]

Integrating Social Media Links

As a final step, Dan has sent me the social media links so I have now integrated these into the HTML:

Dan has not made an Instagram page but I left the favicon there anyway as it was a representation of how it would look. This was a minor addition to the site but it just finished off our work on it.

[nobodytoldme]

Placeholder for Accounts

I created a placeholder for the account images. The image input field is required but I wanted to add a default image in case this did not load correctly or the images did not upload correctly. I built this in Illustrator and then added it to the assets folder:

I kept this fairly basic whilst still following the colour scheme of our site. Obviously this is just a fall-back in a worst case scenario.

[nobodytoldme]

Eureka!

At long last it works. It has taken a large amount of pain to get working but it does work. This post will be long no doubt as I am going to explain each issue and each resolution I had along the way. Firstly I added a form input for uploading files that calls a function when there is a change.

Next up I changed the auth.js file. I added a file variable and a function that attaches the target file to this variable. I experimented here for the longest time with different methods of getting the code to work. There were a few occasions where it worked correctly and then would stop working. The bit that was most confusing to me was that the user would save and everything would go through correctly however the images refused to save to the storage. I eventually discovered what was happening here. The code from lines 25-30 was originally a then function for auth. This meant that as soon as the user was authenticated, the page redirected and reset the form before the image could upload to storage. To fix this, I made the then function apply to storage instead so it would only be called after the image had uploaded to Firebase successfully. The process of fixing this took me around an hour mainly because I was testing with two images. One was small enough to upload before the redirect and the other wasn’t.

I setup the rules on the storage to allow users to save their images. Again this was only if they were authenticated.

I moved on to the index.js file next. I added another global variable for the image url. This was then declared in the auth state changed class. I used the getDownloadURL function to grab the reference to the image. The profile picture url was then added as a field when users upload events. I added the profile picture in the HTML too so it would be displayed.

After testing the code many times, this version finally worked. I tested it on the server and got this:

The border radius style really cleans up the images. At this moment in time the users can only upload .png images. I decided that as I had to choose one I would go with .png as it is probably the most commonly used nowadays. Looking back I wondered early on if the storage wasn’t working due to it not having enough time to complete. I then spent a while checking other things before I came back to that. I think it was because I was worried it would be a complicated fix when in fact it was very easy to do!

[nobodytoldme]

Adding Profile Images

I am keen to get these profile images working. I have been looking and I am adamant that I can get this working. I will keep searching into this and then try again. It is annoying that it has taken so long to get something like this working. Hopefully by my next post I will have sorted this.

[nobodytoldme]

Small Change to Events

I think it would be a nice idea as a means of avoiding confusion if I add a small note on each event specifying what account type has posted the event. This should help people notice if they are looking at venues or artists.

This just involved one extra line of code along with some basic styling to make it look nicer. The page now looked like this:

I really want to try and get the photos working as this will add so much visually to the project. I don’t have a huge amount of time but I will use what I have left to at least theorise how to do this.

[nobodytoldme]

Adding My Events Area

I decided it would be beneficial to the user to be able to see their own event listings on the main page. For this I used a similar filtering system as before. I started with a global variable:

This variable would be for adding the current users ID to an uploaded event to then match it with the users ID again later.

This was the code I used to accommodate for this. Once again this logged the details correctly in Firestore:

From here all I had to do was clone the setupEvents function and adjust it for the purposes of filtering out a users events:

I duplicated the HTML section for events and changed the class to myEvents to avoid clashes. Then in the auth function I added another db.collection reference where userID was equal to the userName variable. This would then call the setupMyEvents function. This ran in the same way as before with the appropriate name changes. Once this was complete I checked the site:

To my amazement it worked first time. This was the first occasion where I had incorporated something Firebase related without any issues. At this stage I feel a bit mixed about my code. It works and there don’t seem to be any issues however I get a bit anxious that I am ridiculously overcomplicating things or not doing them right. I think this is due to it being my first time using Firebase and also how the documentation has been quite difficult to use and in most cases I have had to learn things through trial and error.

[nobodytoldme]

Integrating Dan’s Promo Video

Dan created a promotional video for the company. As we had the short video on the main page as the background we decided to implement Dan's video as an embedded YouTube link. To do this I took the link Dan sent me and used the embed code that is provided by YouTube itself. I then used the embed-responsive classes from Bootstrap to make the video fit to its normal size:

In future I would like to make the promo video play as the header video. This could be done by streaming the video directly from a server. One of the reasons we didn’t use it as the header was how long it would take for the page to load the video. Streaming directly from our server (if we had our own server) would allow the loading time to decrease drastically.

[nobodytoldme]

Form Issues Resolved

As I stated in the last post there were some issues with the forms for login, sign up and contact. The issue was that the input field wouldn’t let the user click on them. This meant that you had to use TAB to navigate the forms which is not very user friendly at all and on mobile devices is almost impossible. Whilst making the contact form I noticed the fields were only broken when the Input did not have a Label associated with it. I went into the CSS and plodded through the various classes to find those that affected the labels. What I found was this:

Mike had implemented labels that took the place of the placeholders. This was so that the fields would be more animated when being filled in. I wanted to keep this as it was a nice touch visually. The problem was that the placeholders were told to be transparent. This meant that the labels were directly over the top of the input fields which caused no way of clicking on the inputs without using TAB. At first I resolved this by setting the placeholders to the colour of the label text. This meant that the text was displayed twice but the placeholder would still disappear after typing. This fixed the input problem but looked off with the delay of the placeholder disappearing when the label animation was already taking place. Therefore, I simply set the colour of all the placeholders to white so they blended with the background.

This fixed both issues and now the forms worked correctly. Whilst reflecting on this I wondered about removing the placeholders completely but this broke the animation of the label. Therefore, I decided this was the best option. I also learnt a new thing about Visual Studio which might be widely known but I hadn’t discovered before. If you hold ALT on the keyboard whilst clicking on the places you want to type you can select multiple parts and type into all of them at once. This is very beneficial when you have many duplicates pieces of code to fill in.

[nobodytoldme]

Contact Page Functionality

I wanted to do some research and explain possible methods for the functionality of the contact page. There is a way to run a contact page through Firebase but this seems a little complex for what we need it to do. I am thinking more of using Formspree. Formspree has been useful to me in the past with previous projects and it is very easy to use. For this project we have not setup a custom email address so for the sake of the functionality actually working, I will be using my own. Formspree was very easy to use. I simply logged into my account, made a new form and added the necessary post method to the form in HTML. Below is the before and after of this:

As you can see there wasn’t a great deal to change in the code from what I had already done. During the creation of this form I managed to resolve an issue I had with all three of the forms on our site. I will cover this in the next post as it is a little finicky. After the form was setup I tested it:

I was once again pleased to see it worked. On reflection of this, the contact method we chose here is suitable for the most part. In future if the site was bigger we would be looking at implementing something a bit higher level, perhaps even a live chat system. I have always found live chats to be an important element of modern websites. In an ever increasingly efficient world, users expect responses almost immediately. Live Chat service is a great way of offering these responses. Most live chats are bot based so this is a potential for sure but even the best bots will have their limitations. With a large worker base, people can be employed and designated to working on live chats. Obviously this is thinking very long term but it’s always good to plan ahead.

[nobodytoldme]

Adding The Contact Page

Dan had also built a contact page for us. I brought this in and then changed the styling of the form so that it matched the styling of our existing forms for sign in and sign up.

This matched the rest of the site quite well. We added social media icons to the bottom for contacting Jammer through there instead. I think it’s important to offer users multiple contact methods in order to make the process as simple as possible. Some websites these days have a tendency of hiding their contact information deep inside their site and try to resolve everything with FAQs. We decided we didn’t want to do this with our users. We want to offer a more personal service.

[nobodytoldme]

Implementing Dan’s Code

Once again I incorporated new code. This time it was from Dan which meant more tinkering. First of all the Splash page looked like this:

So once again it was time to fix this! Firstly I fixed the overflow in the same way as before:

Now it was time to fix the logo and button. I took a look at how Dan had written the HTML in terms of classes and columns:

I decided to rebuild this in a way that worked better with bootstrap. I spent a long time trying different things out but we eventually decide to leave it as it wasn’t essential to the site. In future I would be looking to implement a splash screen but it is really only a minor visual element.

So I moved on to the About Us page. This worked much better first try. I spoke to Dan and we decided to use his text and layout with my styling. As the About Us page was for demonstration purposes I filled it in with a basic format to start off with:

I decided to develop on this if there was time to at the end. Time constraints have definitely been a big issue with this project. In a normal situation it would take less time to complete these tasks as I would be in University and around other people who had more knowledge of what I am trying to do. All three of us are Digital Media students so don’t have as strong knowledge when it comes to Internet Design. I think our original project aspirations were a little far fetched given the current situation and time constraints.

[nobodytoldme]

Struggling With Images

I want to make it so that users can have a profile image that displays above any events they add to the main page. The problem I am having once again is the lack of documentation and how varied it is. I may have to come back to this again if I have time. I’m sure there is a way to implement this though.

[nobodytoldme]

Tidying Up

I wanted to go through the code Mike has sent me and adjust it so it works more fluidly with the rest of the project. This is something me and Mike have found particularly awkward, working on the same project from different places. When you work on a project together you can keep consistency with basic things. If these basic elements are not consistent the code tends to snowball when it comes to more complicated parts. First off I replaced Mikes HTML head with mine:

Next up I just wanted to do some general tidying of code indentation. This is something I am very passionate about keeping tidy as it helps when it comes to navigating the code efficiently. Everyone is different with how they like to code so this is not a dig at Mike by any means it’s just so I can understand it easier:

After Tidying:

By tidying up the code I noticed there were some stray </div> tags that weren’t attached to anything so I removed them. I found the code was easier to navigate now.

[nobodytoldme]

The Nitty-Gritty

We want a way of making the site work so that people who sign up as artists can only see venues and vice versa. I knew this was going to be a good test of my newly developed skills with Firebase. I did some research into Firebase documentation and discovered  the .where() function for collections that only pulls in the documents that match the criteria.

I then went through my index.js file to work out a way of incorporating this. The issue I had was when I tried to define the accountType variable. I tried to make it equal the users account type. However, because I was trying to do this in the Auth State Changed function, no value had been assigned to it yet:

As you can see the problem lies in the fact the the auth function is called before the setup UI function. After a bit of thinking I decided moving the code from lines 10-12 would be a suitable solution and wouldn’t affect the other code. I moved the necessary code and the script looked like this:

This was now working. I was relieved to see that the .where() function has three individual fields which allowed me to use accountType. For this case I made it so that the events were not equal to accountType in order to pull events made by the opposite user type.

On reflection, I am still unsure if my methods are the most efficient. I have found the documentation for Firebase quite difficult to follow and also quite lacking in places. The video tutorials provided by The Net Ninja have been my only real decent source of help for this project. I feel this is a real issue with web development these days is the amount of people who want to learn but are put off by poor documentation or a lack of help. On the other hand Firebase has proven to be a brilliant tool in our case and I am definitely looking to use this again in the future.

[nobodytoldme]

Integrating Front-End Code from Mike

Mike has now sent me 2 new pages to add to the site, GDPR and a Ticket page. I have implemented these into the site. I had some issues with the ticket page which I will come back to in a minute but firstly I incorporated the GDPR page. For this I placed a link to GDPR in the footer of the site.

The page had been created by Mike previously with all the navbar and other necessary code. When it came to the tickets page, things were not as simple. The page did not have a navbar because Mike had some issues with code clashes in CSS. I incorporated my navbar code and the page looked as follows:

The issues were:

1. The page was scrolling left and right due to overflow and the background was an odd colour.

2. The navbar was severely broken.

3. The text on the navbar was way too big.

4. The navbar was transparent.

The first fix was easy. In the body in CSS I simply added overflow-x: hidden; and upped the values on the background colour value:

The other three fixes were resolved at the same time. I scrolled through the html and CSS for ages comparing classes until I eventually noticed an ml-auto class only in use by the navbar:

As can be seen the class has margin-top set to 27% so I simply removed this class. Next I found a text size class that was applied to all <a> elements. I changed this class to a.super-text so it was more specific:

Finally I realised the reason the navbar was transparent was because the one on the main page was too. I added code to resolve this:

After these fixes the page now looked like this:

I showed this to Mike and explained to him what I had done to check he was happy with this. He was. In fact these issues had been bugging him for a very long time. It made me realise just how important it can be sometimes to have a second pair of eyes going over the code and checking everything through. You shouldn’t be afraid of giving your work to someone else as they might be able to improve on stuff in ways you weren’t able to spot!

[nobodytoldme]

Custom Domain

A key element to any trusted site is a custom domain name. I always feel a bit uneasy using a site when it has a default URL. It is important that users feel safe using our site. For the domain I used Namecheap and purchased jammergigs.com. This was relatively low priced compared to alternatives. Then I went to firebase and added the custom domain:

In the DNS settings on Namecheap I added the necessary A Records. At first this did not work but I changed the host to ‘@’ rather than the URL itself and this fixed it.

After waiting an hour or two for the changes to take effect the status changed from pending to connected:

I was relieved to see this was working. Changing anything URL based takes time and patience but in most cases I find myself refreshing a lot of the time to make sure I have done things correctly. Once again I need to be more confident in my ability to do these basic tasks!