This is the website for Rave Reviews. It is my third milestone project for the Code Institute Level 5 Diploma in Web Application Development. It has been designed with the focus of creating 'CRUD' functionality and to be responsive and accessible on all devices. Rave Reviews is a site accessed via registering an account and it was created for like-minded Drum and Bass enthusiasts to share their experiences and sets of their favourite raves / club nights and online events. The site utilises user authentication ensuring only those with accounts can access the content, leave reviews and comment on the reviews. The authentication also allows admin users to have privileges that access otherwise restricted areas as well as control over the content of the site and the users' reviews, comments, and uploads. Amazon S3 bucket has been used to allow the user to upload images to their profile page and when leaving a rave review.
I decided to create Rave Reviews based on my love for Drum and Bass as a teenager and into my early 20's. My friends and I are always discussing raves we've been to and the sets from them. Sharing our favourite tunes and sets so I thought it would be great to have a place all these recordings and memories could be stored.
In a sense this would be like a Facebook page but specifically for Drum and Bass enthusiasts where they can review raves, comment on others and share their favourite sets.
Target audience is for anyone with an interest in Drum and Bass. While raves are for 18-year-olds and over, the age one can appreciate the music and experiences from fellow enthusiasts is any age, so it would be restrictive to set a specific target audience. That said, I would imagine it will appeal mostly to those aged 16 - 50 as those are the ages that will have experienced joys of Drum and Bass and the raves most since its birth in the mid 90's.
As a first-time user of the site I want to be able to:
- Understand what the site is for and how to navigate through site.
- Register for an account and create a profile.
- Find rave reviews.
- Create a rave review.
As a returning registered user of the site, I want to be able to:
- Log in to my account.
- Create, edit, delete, and view my rave reviews.
- Edit, delete and view my profile.
- Search for other rave reviews from other members.
- Leave comments for other members to read.
As an administrator for the site I want to be able to:
- Add, edit, or delete organisations.
- Remove any content that could be offensive.
- Ensure defensive programming to avoid deletions by mistake
- Ensure defensive programming so a logged-out user can't access areas of the website only accessible via log in.
- Automatically return a logged-out user to the logged-out home page, or anyone but Admin from restricted pages to the logged-in Home page if logged-in.
- Relevant error page displayed should an invalid command or error occur.
- I want the user to be able to contact me should they have any questions.
My aim is to make the site feel urban / street as Drum and Bass (DnB) is a raw music genre with its roots firmly set in the poorer areas of UK cities. I designed my own logo in Illustrator and used oranges against dark grey and black as my colours reflecting the bright energy the music brings and the dark and shady venues Dnb raves are held at. The 'DnB' is only used for the home page, and I created a bright electric blue styling for this to emulate the light shows and lasers you get in a rave.
To continue the urban theme, I chose a graffiti style font called 'PhillySans' and for main written text and a strong and easy-to-read. sans serif font from the Google Fonts Library called 'Merriweather Sans'.
As the members of Rave Reviews are able and encouraged to upload their own images, I have kept the site free from too many images. The times that images are used they are of pictures I have taken from raves I've attended.
Wireframes have been designed for mobile, tablet and desktop.
Home
Register / Edit Profile
Login
Profile
Rave Reviews
Add / Edit Review
Organisations
Add / Edit Organisations
Errors
Contact
Delete Modal
- The website is a data-centric one with HTML, CSS, Javascript and the Materialize framework as a frontend.
- The back end consists of Python and Flask, Jinja templates with a database of MongoDB open-source document-orientated database.
-
Mongo DB was used for the project as I knew project 4 would be using PostgreSQL and I am keen to understand both and their differences
-
As Mongo DB is a NoSQL database, it stores data in a flexible, schema-less format using JSON-like documents. This can be advantageous for projects with evolving data schemas or when dealing with unstructured data, like user-generated content and reviews
-
Upon review of both there's no reason why either couldn't be used but where users will have different information in their profiles and reviews Mongo DB's flexibility might also mean it's the more suitable option for this project
-
rave_reviews database was created to store site information; it contains four collections described below:
- users - to store registered user information
- organisations - to store rave organisation information added by an admin user
- raves - to store the rave review information added by an admin/regular user
- comments - to store comment information for a review added by an admin/regular user
-
The users collection is used to store user information when they register and display it on their profile page
-
The fields stored in the collection are user's username (String), password (String), first_name (String), last_name (String), fave_dj (String), fave_mc (String), fave_venue (String), fave_organisation (String), fave_set (String) with a unique identifier (primary key), "_id"(ObjectId)
-
The user's password is encrypted using a generate_password_hash from a werkzeug.security Python library
-
This allows users to return to the site, log in and access the sites content and features
-
User stories covered: 2, 3, 4, 5, 7
-
The organisations that reviews are added to are added by an admin user and displayed as selectable options when leaving a review
-
The fields stored in the collection are the organisation name (String) with a unique identifier (primary key), "_id"(ObjectId)
-
This allows admin to add, edit or remove organisations from the options panel when adding a review
-
User stories covered: 10
-
Rave Reviews are added by regular and admin users
-
The fields stored in the collection are the organisation_name (String), rave_image (String), rave_name (String), date (String), venue (String), rave_description (String), rave_set (String), banger (String), created_by (String) with a unique identifier (primary key), "_id"(ObjectId)
-
When a user adds a review, it stores the organisation name (from the options in the organisations table) and a created_by (taken from the users table username field of the user who added the review) to create a link between the two collections
-
The rave_name and rave_description have search indexes set up for searching functionality.
-
Once the review is added it is stored in the reviews page allowing users access all review, to search for specific reviews or find their own reviews and edit or delete them
-
Admin can delete any review
-
User stories covered: 4, 6, 8, 11
-
Comments are added to a review by a regular or admin user
-
The fields stored in the collection are the comment_text (String), comment_created_by (String), commment_id (ObjectId) with a unique identifier (primary key), "_id"(ObjectId)
-
When a user adds a comment, it stores the comment_id as the primary key of the review (taken from the _id in the raves table) and the comment_created_by field as the username of the user (taken from the username in the users table) who added the comment. This creates a link between the two collections and displays the user's name and comment on the correct review
-
Once the comment is left it is displayed under the content of the review, for all users to read
-
Admin can delete any comment
-
User stories covered: 9, 11
While Mongodb stores the majority of the users' data in the database, images are stored in an Amazon Web services (AWS) S3(storage) bucket. I made this choice for performance purposes and so I could learn how to integrate the site with AWS, encouraging me to learn new skills while building the website.
-
Favicon - I designed the favicon in Illustrator, the two 'R's form the logo which is also used as the home link in the left of the Navbar.
-
Navbar - The Navbar is displayed on all pages and changes depending on whether the user is logged in or out or if admin when Organisations is then visible.
Logged Out Navbar
- Log In, Register & Home links
- User Stories covered: 1, 2 & 5, 14
Logged In Navbar
- Home, Profile, Rave Reviews, Leave Reviews & Log Out Links
- User stories covered: 3, 4, 6 & 7
Admin Logged In Navbar
- Home, Profile, Rave Reviews, Leave Reviews, Organisation & Log Out Links
- User stories covered: 10 & 11
-
Footer
-
The footer is displayed on all pages and includes social links, my GitHub link to this repository, a link to the contact page, the copyright year, and the logo.
-
User stories covered: 16
There are 14 pages which extend from a base template;
- Logged Out Home
- Logged In Home
- Login
- Register
- Profile
- Edit Profile
- Rave Reviews
- Add Rave Review
- Edit Rave Review
- Organisations
- Add Organisations
- Edit Organisations
- Contact
- Errors
- Introduction to the site
- Log In or Register Button
- User redirected here if not logged in
- User Stories covered: 1, 2, 5 & 14
- Navigation buttons to user reviews, rave reviews & leave review
- User stories covered: 3, 4, 6 & 7
- User name and password form input
- User stories covered: 5
- Form with requirements that build the profile
- User stories covered: 2
- Features the details from the registration form
- Buttons for edit or delete profile and user's reviews with defensive modal or delete option
- User stories covered: 6, 7 & 12
- Same form as registration with selected fields populated with the profile information
- User stories covered: 7
- Search for reviews
- Button for user's reviews
- Option to edit user's reviews
- Leave comments on all reviews
- Delete option if user's review with defensive modal
- User stories covered: 6, 8, 9 & 12
- Form with requirements to create the review
- User stories covered: 4 & 6
- Same form as add rave review with selected fields populated with the review information
- User stories covered: 6
- Only accessible as 'Admin' user, user redirected to home if not Admin
- Edit or delete options for all organisations with defensive modal for delete button
- User stories covered: 10, 12 & 13, 14
- Input field for organisation name
- User stories covered: 10
- Input field for organisation name
- User stories covered: 10
- Contact form that contacts the site owner directly via emailjs
- User stories covered: 16
- Specific error page returned depending on the error
- User stories covered: 15
- Defensive programming has been used to avoid accidental deletions
- Anything with a delete option will have a modal pop up confirming the delete is intended.
- User stories covered: 12
- Can delete or update any review that is offensive
- Can delete any comments that are offensive
- User stories covered: 11
I am content with what was implemented but if I had more time there are a few bonus features I think could be added;
- Add site users with different privileges to avoid using jinja templating and one 'Admin' log in that has a superior role.
- Add change and reset password functionality to the profile section.
- Allow users to see other users profiles by clicking on their name under the review.
- Email verification to enhance user protection when logging in.
- Extend the css with an scss file allowing a cleaner css file and a more customisable Materialize-based site. I did attempt this and had it the files working on my site but ran out of time to troubleshoot why the Materialize secondary colours were not changing, so I removed it.
- Delete images from the S3 bucket when profiles or reviews are deleted. Sadly, I had no time to look in to this but as there is so much space in the bucket I don't see it as a problem.
- On reflection I would not use Materialize, it is too restrictive and doesn't offer anywhere near as much styling or customisation as Bootstrap.
- HTML
- CSS
- Javascript
- Python
- Jinja
- MongoDB - Non-relational database used to store the Rave Reviews information.
- AWS S3 - Services that provides object storage through a web service interface.
- Flask - A micro framework.
- Materialize 1.0.0. - Responsive CSS Framework.
- PyMongo - Python Driver for MongoDB.
- Pip - Tool for installing python packages.
- Balsamiq - Used to create wireframes.
- Git - For version control.
- Github - To save and store the files for the website.
- GitPod - A cloud development environment.
- Google Fonts - To import the fonts used on the website.
- Google Chrome Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
- Tiny PNG To compress images for use in the readme.
- Visual Studio Code - An integrated development environment from Microsoft.
- Adobe Suite (Illustrator, Photoshop & InDesign) - Graphic design software.
- Giphy - Video to gif conversion website for user story testing section.
- Font Awesome - The icons used on the site from font awesome.
- Diagrams.net - Flow chart maker used for database models.
- W3C validator - HTML validation testing.
- Jigsaw CSS validator - CSS validation testing.
- WAVE Web Accessibility Evaluation Tool - Accessibility testing.
- jshint - Javascript validation testing.
- pep8 - Python validation testing.
- Chrome Lighthouse - For performance, accessibility, progressive web apps, SEO analysis of the project code
The testing information and results for this project are documented in TESTING.md
- Create an account at emailjs.com
- In the integration screen in the emailjs dashboard, note your userid
- Create an email service in the Email Services section and note the id
- Create an email template in the Email templates section and note the id
- Update the script sendEmail.js, method sendMail with your user id, email service id and email template id.
There are a number of applications that need to be configured to run this application locally or on a cloud based service, for example Heroku
- Create an account at https://aws.amazon.com
- Open the IAM application and create a new user
- Set the AmazonS3FullAccess for the user and note the users AWS ACCESS and SECRET keys
- Open the S3 application and create a new bucket. For the purpose of this application the bucket name is rave-reviews-bucket but this can be updated.
- With security best practices update the public access and policy bucket to enable the user created and the application access to read/write to the S3 bucket. Consult the AWS documentation if required: https://aws.amazon.com/s3/
- The s3 bucket is now updated to be accessed by your application.
- In necessary route files update the variables BUCKET and image_url with the correct information that you have set up, for example:
BUCKET = "rave-reviews-bucket"image_url = "https://rave-reviews-bucket.s3.eu-west-1.amazonaws.com/"
Mongodb is the database used in the application
- Create an account at mongodb
- Create a database cluster
- Select the cluster, and in the collections section create a database and create 4 collections under the database: raves, organisation, users & comments.
- In the database access, create a user and allow the user read/write access. Note the username.
- In the network access tab, allow network access from the ip-address of the application connecting to the database.
- In the Databases section click Connect, and select connect your application.
- Note the MONGO_URI, MONGO_DBNAME and user, these parameters are used when deploying locally(env.py file) and deploying on the likes of heroku(config vars).
To run this project locally, you will need to clone the repository.
-
Login to GitHub (https://wwww.github.com).
-
Select the repository jamie2210/CI_MS3_RR.
-
Click the Code button and copy the HTTPS url, for example: https://github.com/jamie2210/CI_MS3_RR
-
In your IDE, open a terminal and run the git clone command, for example
git clone https://github.com/jamie2210/CI_MS3_RR -
The repository will now be cloned in your workspace.
-
Create an env.py file in the root folder in your project, and add in the following code with the relevant key, value pairs, and ensure you enter the correct key values
import os
os.environ.setdefault("IP", TO BE ADDED BY USER)
os.environ.setdefault("PORT", TO BE ADDED BY USER)
os.environ.setdefault("SECRET_KEY", TO BE ADDED BY USER)
os.environ.setdefault("MONGO_URI", TO BE ADDED BY USER)
os.environ.setdefault("MONGO_DBNAME", TO BE ADDED BY USER)
os.environ.setdefault("AWS_ACCESS_KEY_ID", TO BE ADDED BY USER)
os.environ.setdefault("AWS_SECRET_ACCESS_KEY", TO BE ADDED BY USER) -
Install the relevant packages as per the requirements.txt file
-
Start the application by running
python3 app.py
To deploy this application to Heroku, run the following steps.
- In the app.py file, ensure that debug is not enabled, i.e. set to True.
- Create a file called ProcFile in the root directory, and add the line
web: python app.pyif the file does not already exist. - Create a requirements.txt file by running the command
pip freeze > requirements.txtin your terminal if the file doesn't already exist. - Both the ProcFile and requirements.txt files should be added to your git repo in the root directory.
- Create an account on heroku.com.
- Create a new application and give it a unique name.
- In the application dashboard, navigate to the deploy section and connect your application to your git repo, by selecting your repo.
- Select the branch for example master and enable automatic deploys if desired. Otherwise, a deployment will be manual
- The next step is to set the config variables in the Settings section
- Set key/value pairs for the following keys: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, IP, MONGO_DBNAME, MONGO_URI, PORT, SECRET_KEY
- Go to the dashboard and trigger a deployment
- This will trigger a deployment, once the deployment has been successful click on the "Open App" link to open the app.
- If you encounter any issues accessing the build logs is a good way to troubleshoot the issue.
-
Materialize is used throughout for CSS styling and some javascript / jquery
-
For Help with using AWS S3 buckets and python these were all very useful;
https://www.twilio.com/blog/media-file-storage-python-flask-amazon-s3-buckets
https://blog.filestack.com/tutorials/upload-files-amazon-s3-bucket-using-python/
-
When adding a password confirmation Javascript feature that only enables the register button once both password entries are the same, this tutorial was very helpful;
-
For the pagination of the reviews these articles were of great help;
https://gist.github.com/mozillazg/69fb40067ae6d80386e10e105e6803c9
https://pythonhosted.org/Flask-paginate/
and these tutorials;
-
For the send-email functionality I used some code from the code institute learning platform.
-
I used this stack overflow page to better understand exception handling;
https://stackoverflow.com/questions/33239308/how-to-get-exception-message-in-python-properly
-
For a better understanding on how to check for YouTube links in javascript I used this stack overflow thread;
https://stackoverflow.com/questions/28735459/how-to-validate-youtube-url-in-client-side-in-text-box
-
Font Awesome
- The icons used on the site from font awesome.
-
Fonts
Merriweather-sans- The text font Merriweather Sans is from Google fonts
PhillySans
- PhillySans was taken as a free font for personal use from dafont.
All images are either photos taken by me or uploaded by users of the site
All logos are designed by myself
I would like to take the opportunity to thank;
- My mentor, Mo Shami, for his excellent feedback, advice support and guidance throughout.
- Tutor support from Code Institute for their swift response.
- The slack community of coders for immediate and helpful response.
- WAES College and my Tutor Michael for their support and help throughout.
- My friends and family who have created accounts and tested the site and given valid feedback helping me fix bugs I was otherwise unaware of.