This project has been awarded with 1st place at the hackathon 2022 - Code Institute December Hackathon themed Re:Unify. Merits to myself and my colleagues participating at this project, Patrick Alexander, Aiga Andrejeva, Dennis Jensen and Aws Al-adhami.
Jingle Bingle is a merry web application created to spread happiness and joy.
The purpose of this website is to allow users to create a card which they will be able to download and send via email to their loved one.
The landing page has been conscientious created to embrace simplicity and at the same time a great user experience.
When landing on our home page, you should be able to feel the joy of holidays as you are greeted by a merry song.
The live website can be found here.
A favicon has been implemented with 2 cards to symbolize the meaning of the page and at the same time to allow users to easily identify this website if they have multiple tabs open.
At the same time, the title has been selected to offer a clear description of the page where the user is navigating, such as Home, About and Create a Card.
- Home page
- About Us Page
- Create a Card Page
On the landing page, the users will be able to see the graphic designed conscientious Selected by Dennis Jensen, who took his time to build up the landing page in photoshop.
The idea of the image is to compile the old and the new Christmas spirit. Using JavaScript functions on the landing page has been implemented snowflakes symbolising the spirit of the winter.
The landing page has been also provided with a Christmas song that will be automatically starting when landing on the website.
The volume of the Christmas song has been minimised to not create a disturbing environment for the users, but a peaceful one.
At the same time the user has been provided with 2 buttons to be able to stop or start the music at any time they would like to.
However, every time when the user lands on the home page the music will automatically start.
- Preview of the website landing page.
- Preview for the buttons to start and stop the music.
At the same time on the landing page, has been implemented a button to allow users to quickly navigate to the Create A Card page.
The about page has been thoughtful implemented to represent the team that has been working on this project.
The user will be able to visualize a small text containing a little ‘’about’’ each person.
At the same time, the user has the possibility to navigate on each person’s GitHub page in order to be able to preview the profile of each member of the crew.
- The GitHub icon, which will alow users to navigate to each persons profile.
Each crew member has their picture, name and a little about them.
The Create A Card page has been implemented combining simplicity and easily for the users to be able to create a card, allowing beginners and experienced users to be able to use the website.
A button to be able to download the final product of the card has been implemented in order to allow users to download and print / distribute the card in other social media platforms.
There are in place 5 diferent backgrounds where the users can choose from. Each background has a specific name.
- Jingle Bingle
- Christmas Ribbon
- Blue Tree
- Pinebranch
- Ornaments
- Comand access has been implemented in order to allow users to be able to reset the card, preview it and download it.
The website has been implemented with type of error in order to allow users to be able to understand when they navigate to a broken link.
On the page a home button has been implemented in order to allow users to be able to return home without using the back arrow button.
- Allow users to change the music playing on the background.
- Implement a Contact Us page, to allow users to be able to contact the staff members.
- Implement a Blog side where family members can share their picture.
- Implement a gallery page where users are able to post a picture and share with their family which to be protected by a pin code. Once the code has been created this can be shared with the family members or friends to allow just certain persons to be able to see these pictures.
- A game to be implemented in order to create more fun for the users.
The wireframes have been created in order to allow the members of the team to have an overview of what the website will look like or a simple vision to guide us to completion of the website.
However, the website frameworks have not really been followed as we decided to implement a more simplicity for the pages so that users will find it more easily to familiarise with the webpage.
- HTML -> The structure of the website was developed using HTML.
- CSS -> The website has been styled using custom CSS in a n external file style.css.
- Bootstrap -> Has been used to compile and style faster the website due to the short deadline.
- JavaScript -> The snowflakes and the card logic has been implemented using JavaScript.
- GitHub -> Source of code is hosted on Github and deployed using GitPod / Git pages.
- Font Awesome -> Icons obtained from font awesome used withing the body element.
- Favicon.io -> Favicon files were created at favicon files.
- Balsamiq -> Was used to create wireframes.
- Photoshop -> used to create the main image present on all 3 parts of the website.
- Photopea -> used to create the logo of the website.
- Photopea -> Used to create the favicon presented on the website.
- Google Image -> Has been used for some images presented on the website.
- The site was deployed to pages. The steps to deploy are as following:
- In the GitHub repository, navigate to the Settings tab.
- From the menu on left select 'Pages'.
- From the source section drop-down menu, select the Branch: main.
- Click 'Save'.
- A live link will be displayed in a green banner when published successfully.
- The live link can be found here.
Navigate to the GitHub Repository you want to clone to use locally:
- Click on the code drop down button.
- Click on HTTPS.
- Copy the repository link to the clipboard.
- Open your IDE of choice. (git must be installed for the next steps)
- Type git clone copied-git-url into the IDE terminal. The project will now be cloned on your local machine for use.
Credits
- Google has been a great source of inspiration and finding out answers to problems / bugs that have occurred on the website.
- Thank you to all my colleagues that have been participating and showing a lot of interest in building up this website.
- Thank you, Code Institute, for providing us this course including the amazing hackathon created to teach us how to work within a team.
