After the 3th milestoneproject with Flask I helped some friends with finding a decent hosting provider. This gave me the idea to create a hosting providers website which I can build out into a fully functional platform later. The goal is to have the option to buy and choose a hosting service and find information (news items) about what has changes. So far the website has a good look and is ready to use while there is still a wide area to explore and include into the project.
To get admin access to the website use the following login:
username: admin
password: adminuber
Hosted on Heroku Repository on GitHub
Expected users of the website are people who want to host their website somewhere.
- Companies with websites who have big databases
- User looking for a place to host their smaller ecommerce website or portfolio
- Owner of website to post news and look for order information
- Contact support to find out more about hosting
- Colour scheme is green with black which gives a more darker feeling which is easy to read but still stands out.
- Main green colour:
#10DE0C - Black has been used as other main color to give a more darker 'nerdy' look.
- Grey and white colours have been used to create visible difference
- Main green colour:
- Custom designed logo created using the following font:
- font-family: 'Rubik Mono One Regular';
- Roboto and Krona One font used throughout the website
- font-family: 'Roboto', sans-serif; - All text.
- font-family: 'Bowlby One SC', cursive; - Only h1 titles.
The website consists of several pages each with a unique section of information:
Features planned, implemented and outlined for later development
- Documentation - ReadMe File & Mockups
- Website content
- Contact form
- Colour Scheme
- Custom Logo
- SQL database
- CRUD for news posts
- Editable user profiles
- Order lists
- CRUD news items (admin)
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Icons
- User register/login database
- Password reset
- Profile information
- News posts
- Chat function
- Customisation function for packages
- Packages system to sell package hosting deals
- Stripe API
- CMS system for content (admin)
- Responsive design - Mobile First
- Accesibility
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Heroku
- Documentation - ReadMe File & Mockups
- Website content
- Contact form
- Colour Scheme
- Custom Logo
- SQL database
- CRUD for news posts
- Editable user profiles
- Order lists
- CRUD news items (admin)
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Icons
- User register/login database
- Password reset
- Profile information
- News posts
- Packages system to sell package hosting deals
- Stripe API
- Responsive design - Mobile First
- Accesibility
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Heroku
- CMS system for content (admin)
- Chat function
- Customisation function for packages
This project makes use of:
- HTML
- HTML for basic strucutre
- CSS
- CSS for Styling
- Bootstrap
- HTML and CSS Framework from Bootstrap
- Javascript
- JavaScript for game application
- jQuery
- The project uses JQuery to simplify DOM manipulation
- Visual Studio Code
- Changed to local workspace where I used VS Code as editor
- Python
- Project runs on Python
- Django
- Django framework is used for website functionality
- PostgreSQL
- A PostgreSQL database is used to store information
- Google Chrome
- Used for browser and dev tools
- Mozilla Firefox
- Used for browser and dev tools
- Google
- Google was used for research.
- Git
- Git used for Version Control
- GitHub
- Repository hosted on GitHub
- Heroku
- Website hosted on Heroku
- Am I Responsive
- Testing responsiveness of the website
The website was tested by users, Chrome/Firefox dev tools, errors on W3 and django tests which you can see in Travis CI.
Preview was send regularly to people within my social circle and asked for testing.
- Sending website location to specific users over messaging.
- Write down feedback.
- Search for possible fixes.
- If possible implement solution to error or improve product.
- Everything has been tested and works correctly.
After complete product start to addres coding errors:
- Go to W3's validation websites HTML or CSS.
- Fill in URL of every specific page and look for errors.
- Locate errors and solve accordingly.
- After all errors are solved go back to step 1 and continue untill no errors are shown.
The project is hosted on Heroku
To deploy your own version of the website:
- Have git installed
- Visit the repository
- Click 'Clone or download' and copy the code for http
- Open your chosen IDE (Cloud9, VS Code, etc.)
- Open a terminal in your root directory
- Type 'git clone ' followed by the code taken from github repository
git clone https://github.com/Albastraoz/uberhosting.git
- Install all dependencies from the requirements.txt file
- When this completes you have your own version of the website
- Feel free to make any changes to it
- The website can be run by opening one of the HTML files within a web browser
- Visit the link provided
- Your website with any made changes will appear
- Saved changes to the website will appear here after refreshing the page
The benefits of hosting your website on Heroku through Github is that any pushed changes to your project will automatically update the website. Development branches can be created and merged to the master when complete.
It may take a moment for changes to appear on the hosted website.
The text on the website has been written myself or copied and edited from:
All icons are imported from Fontawesome:
Fonts are imported from Google fonts:
The images for the website are copyright free and taken from:
All images direct location:
Thank you to the following for inspiration, motivation and the direction I needed:
- Seun Owonikoko - @seun_mentor
- Anna Greaves - @anna_ci
- Yung-Chin Huang
- Code Institute
- Pretty Printed - Tutorials
- Google - Your best friend
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
