This project is a conjunct effort of Amir Rastkhadiv, Chris Carabine,Cian O'Connor, Daniel Callaghan, Monique Veldman and Rodolfo Frainer.
The project aims to connect people through half phrases at a time.
Message in a bottle is an ocean of potential where you can met kindred spirits or fish for that special someone! Add your own bottled messages to our vast ocean or fish to your heart's content for other people's messages. Sign up today!
- Sign up and create a profile with us
- Fish for bottles in the ocean
- Respond to messages that appeal to you
- If the recipient likes your reply they can now contact you directly
- Write secret half messages for your own bottles
- Add them to our ocean and see who replies to and finishes your message
- A received reply offers you the option to contact them directly
-
As a user I would like to be able to access the about section of the page to understand it's purpose and how to interact with it.
-
As a user I would like to be able to create an account.
-
As a user I would like to be able to login into the account I've previously created.
-
As a user I would like to be able to edit my Bio on my account.
-
As a user I would like to be able to change my account's password.
-
As a user I would like to be able to create my own bottled messages so other people can interact with.
-
As a user I would like to be able to choose which bottle i want to pick.
-
As a user I would like to be able to respond or not to a bottle that I have picked up.
-
As a user I would like to be able to access my inbox so that i can read sent and received messages.
-
As a user I would like the messages in my inbox to be refreshed periodically.
-
As a user I would like to be able to read the bio and see the profile picture of a user that has replied to my bottled message so I can decide if I want to contact them or not.
-
As a user I would like to be able to contact other users who have replied to my bottles via a contact form.
- Lato and Lovers Quarrel fonts were used.
#590c8d
#FFCCCC
#42193D
#C31AAD
#FFFFFF
Wireframes can be found here
- Bootstrap Used to design a mobile-first responsive website layout.
- jQuery Loaded as part of the Bootstrap CDN starter template
- Popper Loaded as part of the Bootstrap CDN starter template
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
-
- Used to store, host and deploy the project files and source code after being pushed from Git.
-
- An online IDE linked to the GitHub repository used for the majority of the code development.
-
- An online code editor and open-source learning environment used to test small sections of code quickly and easily.
-
- A locally installed IDE connected to the GitHub repository for when there was no internet connection to use Gitpod.
-
- Used for icons to enhance headings and add emphasis to text.
-
- Used for the website fonts.
-
- An online tool used to choose the website colour scheme.
-
- A tool for taking a quick snapshot of the responsive breakpoints of the website to visualize how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.
-
- An online tool to find out the screen resolution on your device used for CSS @media queries - Favicon
- Used for icons to enhance headings and add emphasis to text.
-
- Django is the framework used through the project.
-
- Google fonts were used to import the 'Lato' font into the style.css file which is used on all pages throughout the project.
-
- Balsamiq was used to create the wireframes used on this project.
Chrome Dev Tools & Firefox Developer Tools
- The Team is made up of all experience levels from those who have only just started the course, right up to Alumni.
- Our first task was to figure out at which level everyone is and how much time each of us has.
- Our team is Daniel Callaghan, Christopher Carabine, Rodolfo Frainer, Monique, Amir Rastkhadiv and Cian O'Connor.
- Initailly, we split all the task between us according to experience and competence.
- As the team developed and became more confident, we were able to help one another depending on the task and time we had free.
Version control for this repository is managed within GitHub and Gitpod using separate forked repositories for each team member.
Each member synchronised their own GitHub repositories by adding an additional remote named upstream linked to the team's main GitHub Repository by entering the following steps Git commands:
git remote add upstream https://github.com/Seamse/hackathon-love-team7.git
git fetch upstream
git merge upstream/master
git push
The following describes a typical Team Member's forked repository branch structure. The word 'contributor' is a placeholder for the otherwise name of the person or persons working on a paticular branch:
-
Master - this is the default branch and the source for the repository deployment.
-
contributor-README - this branch is used for updating the README.md and testing.md documentation only.
-
contributor_backend -this branch is used for creating and updating all backend activities.
-
contributor_hompage - this branch is used for styling and working on the index.html page.
-
contributor_style - this branch is used for styling each page across the site so that they all look the same.
-
The following workflow steps are used to create and update branches within Gitpod and to push changes back to GitHub.
- Open Gitpod from Github using the Gitpod button. This needs to only be done once at the start of the project.
- Start the Gitpod Workspace which opens an online IDE editor window.
- For changes to be made to any documentation files, the git command
git checkout documentationis used to checkout and switch to the documentation branch. - For changes to be made to other files under normal site development, the git command
git checkout developmentis used to checkout and switch to the development branch. - To create a new branch for bug fixes, use the git command
git checkout -b <branch-name>to create and switch to the new branch.
- New or modified files are staged using the
git add .command - The changes are committed using
git commit -m "<commit message>"command. - If the changes are in a newly created branch, the committed changes are pushed from Gitpod to GitHub using the
git push --set-upstream origin <branch-name>command as there is currently no upstream branch in the remote repository. - For branches that have already been synchronized, the committed changes are pushed from Gitpod to GitHub using the
git pushcommand.
- Opening the repository in Github, a new pull request is created for the updated branch and assigned to its related Development, Development - JavaScript or Bug Fixes project.
- The changes are reviewed to ensure there are no conflicts between the updated branch and the Master branch.
- The changes are then merged into the Master branch and the merge request is closed. The Project entry is automatically moved to the Done card.
- To update Gitpod with the latest commits From GitHub, the
git checkout mastercommand is used to checkout and switch to the master branch. - Use the
git pullcommand to update the master branch and reset the pointer. - Now switch to the other branches in Gitpod using the
git checkout <branch-name>command and use thegit merge origin/mastercommand to update each branch in turn. - Use the
git pushon each branch to update the relevant GiHub Branches to the same commit as the Master branch. - Repeat steps 3 - 17 regularly to ensure updates are saved and correctly version controlled in GitHub.
- To update the upstream remote repository, each Team Member creates a pull request from the their forked master branch (
origin/master) to the upstream Team repository (upstream/master) - The pull request is reviewed and any merge conflicts are resolved before merging into the upstream master branch.
- Team Members must then fetch the latest commits again to their forked repositories using the following Git commands:
git fetch upstream
git merge upstream/master
git push
HTML
CSS
JSHint
JSHint test completed with no error or warnings.
Lighthouse
Result for Desktop
Result for Mobile
- To access the about section of the page:
-
Low resolution devices
Click on the hamburger menu
A few options will appear, click on the about button
Once clicked it will open a modal window
To close it the user can either press the X button or click outside of the modal
-
High resolution devices:
On the right corner of the nav bar you will find the About button
Once clicked it will open a modal window
To close it the user can either press the X button or click outside of the modal
-
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
- Install the gitpod browser extension. Gitpod Browser Extension
- Go to the project repository. Here
- click the gitpod button beside the about section.
- W3Schools
- for just being a constant source of help and inspiration!
- Code Institute
- Course material for the inspiration from code-along challenges.
- Software Testing Fundamentals (STF)
- for an excellent guide on building testing processes.
- Git - Branching and Merging
- documentation for help understanding how to manage branches in GitHub / Gitpod.
- TutorialRepublic
- for Boostrap help and tutorials.
- GitHub
- Help guide on using Error 404 pages on repositories.
- Colorlib
- the 404.html was made by Colorlib. Go visit their website for more awesome templates, themes and tools.
- Stack Overflow
- For help fixing so many thing that fell over on this project!
- Bootstrap
- Pexels.com
- Images were taken from
Our team is Daniel Callaghan, Christopher Carabine, Rodolfo Frainer, Monique Veldman, Amir Rastkhadiv and Cian O'Connor.
The team would like to thank Nemanja for his support, encouraging us along the way.
And Code Institute for setting up these amazing projects that allow people to come together and do what they love in a safe space.