Gig Findr

I created the back end of this site using Google Firestore and Google Firebase. I created a Firestore NOSQL document database to store the data necessary to run the app. User authentication was set up using Firebase and user images were stored in a Firestore Storage bucket

The homepage displays all the upcoming gigs in a grid showing the gig image as well as location and genres. It also shows a countdown until the gig starts. This is done using date-fns rather than Moment.js. With date-fns i was able to only pull in the date functions I required and the rest were removed with Webpack tree shaking.

The countdown format changes as the start date approaches. It begins by displaying months and changes to displaying minutes and seconds as the start time gets closer.

There is also a notifications section in the top right of the page. This uses firebase cloud functions and web sockets to push notifications about new gigs that have been added. These notifications appear in real-time and a new gig will appear here as soon as it is added without needing a page reload.

Each gig has a detailed entry page with more information. The page and the URL are created dynamically using React Router. This page includes extra information such as a detailed description of the gig as well as the username and profile picture of the user that created the gig.

The profile picture is a link to a dynamically created profile page for the user that created the gig. The gig detail page will display different content depending if the current user is the creator of the gig. If you are the creator, rather than displaying the username of the creator it will display the text 'Posted by You' above your profile picture. There will also be 2 additional buttons allowing you to edit or delete the current gig. You cannot edit or delete gigs created by other users.

Every user has a dynamically created user profile page created with React Router. This displays information like the users display name, profile picture, hometown and a list of user uploaded pictures. This page changes depending if your are viewing your own profile or another users. When viewing your own profile you will have the option to delete photos, upload a new photo or set any picture as your main profile photo. Theres also an option to logout of the current account.

Only registered users have the ability to add gigs. Once a user has registered and logged into their account the site nav will display an 'add gig' button. This links to the add gig page where a user can create a concert using the displayed form. If the user does not upload a picture a function will select a random picture from an array of unsplash photos.

The form takes the users data and checks for errors using a custom validation function and uses Redux to dispatch an action. The action is passed through a reducer and the appropriate function is executed to update the Firestore database as well as the global state for the App. A success or error message is displayed to the user once the functions have finished running.

If a user is on a gig detail page for a gig they created they also have the ability to edit or delete the gig. This is handled by the same form used to add a new gig but it is handled slightly differently. A different action will be dispatched depending if the user wants to update or delete the concert. The user will be shown a either a success or error message and Firestore and the Redux global state will be updated to reflect the changes.