This project is part of my Code Institute Full Stack Software Development studies, Anyone visiting the Website should NOT add any real bank or credit card details!.
The Website is designed and based on digital freedom, securing the new disruptive class of crypto assets. Crypto requires new rules. New protection. New security practices. But nothing can't be learned. Visit Crypto Wallets website for all your crypto needs. A hardware wallet is a cryptocurrency wallet which stores the user's private keys (critical piece of information used to authorise outgoing transactions on the blockchain network) in a secure hardware device. The main principle behind hardware wallets is to provide full isolation between the private keys and your easy-to-hack computer or smartphone.
This project is my fifth and final Milestone Project in the Code Institute's Full-stack Development program. I decided to create a website based on my passions!. Blockchain Technology. The E-commerce site has many features for customers and returning customers, from browsing the latest digital wallets, to purchasing various products, also learning about Blockchain and cryptocurrency's with a added Blog page.
| As a customer I would like to | So that I can |
|---|---|
| Browse products | purchase what I need |
| Search products | find something specific |
| Filter products | compare the offerings |
| Buy a product | get the parts i'm looking for |
| Pay using a card | complete my purchase |
| Create a profile | save my information and review past orders |
| See my shopping cart before paying | know the cost and content before the purchase |
| Update my shopping cart | make decisions before the purchase |
| See details about a product | make an informed purchasing decision |
| View my order history | be reminded of previous purchases |
| Receive an email confirmation about my order | have archived information about it |
| As an administrator I would like to | So that I can |
|---|---|
| Add/Update/Remove a product | keep the store up to date |
| Add/Update/Remove a producer | keep users informed about the latest information |
| Receive orders from customers in my mailbox | fulfil the orders |
| As a returning customer I would like to | External links to learn provided |
|---|---|
| Learn about Blockchain Technology | Drop down learning on nav-bar |
| Read the latest news on cryptocurrency | News articles provided for users in the Blog |
| Buy and store cryptocurrency safely | Information is provided |
-
If a user
More products will be added at a later date, latest ( Storage ) devices.
- Dbdiagram.io is a free online database diagraming tool for developers and data analysts. It uses a code-based user interface, and you can create up to 10 diagrams for free. screen shot
-
User stories provide a way to simply and plainly describe user action and intent when interacting with a system (typically a user interface). In considering both the steps a user takes, and their motivations, in a narrative form we aim to empathize with our users while delivering a product or service.
-
here are the user stories I created with Github.
The home page has a fixed nav-bar header with a search bar, as well as drop-down menus for customers to navigate through products. Account sign-up and login details are also available with shopping bag and shop now button.
Payments on the website I used Stripe.
-
What does Stripe actually do?
As a payment processor, Stripe allows business owners to accept payments from credit and debit cards and processes those payments. Using Stripe, businesses can also accept payments from mobile wallets and buy now, pay later services. -
Simulate payments to test your integration.
To confirm that your integration works correctly, simulate transactions without moving any money, using special values in test mode. -
Test bank card number Please DO NOT! use any real bank cards as previously mentioned, use the numbers provided from Stripe for testing payments.
When testing stripe payments the links and images above should tell you that everything is working as it should be, if for any reasons you are getting any errors have a look at these links. Help Guides
The designs you received are called wireframes (sometimes called wires, mockups, or mocks).
A wireframe is a schematic, a blueprint, useful to help your and your programmers and designers think and communicate about the structure of the software or website your building.
-
Mailchimp was added to the footer of each page, for customers and users to subscribe to.
What is mailchimp!
- marketing automation platform designed and developed for businesses using email to reach out to their target markets. It is an all-in-one tool where you can manage your mailing lists, create custom email templates, and nurture and automate your entire marketing campaigns. Enterprises looking to leverage email marketing need a tool, such as Mailchimp, to run their campaigns like a well-oiled machine.
- SEO is not limited too websites; it also applies to your Facebook pages. You can consider a facebook page as a web page only and SEO principles can be applied here to maximise reach, attract followers, and advance businesses by increasing organic visibility and ranking.
- The Facebook pixel is a piece of code that you place on your website. It collects data that helps you track conversions from Facebook ads, optimise ads, build targeted audiences for future ads and remarket to people who have already taken some kind of action on your website.
- VS Code - Used as my code testing and editing.
- GitHub - Used as remote storage of my projects online.
- Balsamiq - Used to bring my wireframe sketches to life.
- HTML5 - Used as the base for markup text.
- CSS3 - Used as the base for cascading styles.
- jQuery 3.4.1 - Used as the primary JavaScript functionality.
- Stripe API - Used to make secured payments on Feature Tickets.
- Amazon AWS S3 - Used to store static-files and media folders and files.
- Python 3.6.7 - Used as the back-end programming language.
- Django 2.2.16 - Used as my Python web framework.
- Heroku - Used for "Platform as a Service" (PaaS) for app hosting.
- PostgreSQL 11.4 - Used as relational SQL database plugin via Heroku.
manual testing have gone into building the project.
HTML
-
Element li not allowed as child of element nav in this context.
-
Mailchimp signup embedded code has also flagged up a few errors.
-
A meta element with an http-equiv attribute whose value is X-UA-Compatible.
- Mentioned on Stackoverflow
-
Either X-UA-Compatible is not "standard" HTML (FSVO "standard" that involves appearing on a publicly editable wiki page referenced by the specification) or the Validator isn't up to date with the current status of that wiki.
At the time of writing (20130326) X-UA-Compatible appears on the wiki page under a section that states: "The following proposed extensions do not yet conform to all the registration requirements in the HTML spec and are therefore not yet allowed in valid documents." So the validator is correct to reject this value.
-
- Mentioned on Stackoverflow
CSS
- W3C CSS Validator was used to test all css code, code come back clean with no errors.
JavaScript
-
JShint was used to check the javascript code two errors did flag up as follows, ('template literal syntax' is only available in ES6 (use 'esversion: 6'). after researching how to resolve the issue a .jshinttrc file was added to the root directory with the following code {"esversion": 6} to override the issue.
-
Undefined variables
$(used for jQuery)
Python
In the command line interface the following input was added, (python3 -m flake8) to bring up files with errors. Most errors have been resolved, ( E501 line too long characters, have been left in some files, like the env.py file was showing line too long with my ["DATABASE_URL"] = "postgres: ? when i tried to shorting the database code, my website did not function properly, so decided to leave it the way it is for now. at this point in time I didn’t want to adjust my code incase I added more issues.
I chose to ignore any warnings on migration files such as, (./.vscode/arctictern.py) (./blog/migrations/0001_initial.py). since these are automatically generated files so may ignore style rules for efficiency reasons. Also as developers, usually don't need to touch them so they don't need to be perfectly readable.
'django.test.TestCase' imported but unused in various files.
Docstring's were added to nearly every file that was needed.
Email Issues
- Issue with sending emails was discovered just before submission was due, all step were taking from the video guide tutorials during the build process, Ive contacted various tutors and students to resolve my issue.
From Slack the below article
- FYI: for those dealing with password reset and google blocking django from sending emails: It seems that Django and Google's "Allow Less Secure Apps" setting don't play together nicely anymore, and it's been like this for a while. What can you do instead: use an App Password. How?
1: turn off less secure apps
2: turn on two-factor authentication
3: click on app passwords (this will appear right below where you turned on the two-factor auth)
4: set up your new app password
5: put it in your env/config vars instead of your normal password
Email sending fixed
- The reason my Emails weren’t sending on the sign up page is because in Heroku I still had development=true in my config vars, I deleted the config vars and the issue is now resolved.
TempMail was used for dummy email addresses.
-
Disposable email - is a free email service that allows to receive email at a temporary address that self-destructed after a certain time elapses. It is also known by names like : tempmail, 10minutemail, 10minmail, throwaway email, fake-mail , fake email generator, burner mail or trash-mail.
Error pages created for users
- The HyperText Transfer Protocol (HTTP) 400 Bad Request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (for example, malformed request syntax, invalid request message framing, or deceptive request routing).
- HTTP 403 forbidden errors are caused by an access misconfiguration on the client-side, which means you can usually resolve the issue yourself. A common cause of these errors is the file or folder permission settings, which control who can read, write, and execute the file or folder.
- The HyperText Transfer Protocol (HTTP) 400 Bad Request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (for example, malformed request syntax, invalid request message framing, or deceptive request routing).
- The HyperText Transfer Protocol (HTTP) 500 Internal Server Error server error response code indicates that the server encountered an unexpected condition that prevented it from fulfilling the request. This error response is a generic "catch-all" response. Usually, this indicates the server cannot find a better 5xx error code to response. Sometimes, server administrators log error responses like the 500 status code with more details about the request to prevent the error from happening again in the future.
Config Vars
- Whilst working on my project I accidentally pushed my convig vars to github, realised after. I deleted it from Heroku and created a new config vars. I spoke to a Code Institute tutor who guided me on this issue. And recommend I mention it in my readme.md file to say it has been corrected.
Website was tested across various browsers in both desktop and mobile configuration.
-
Chrome
-
Safari
-
Internet Explorer
-
Apple iphone xr, 12,
-
Android Pixel 5, Galaxy s20
-
Create a repository in github with the desired name of your App or project.
-
Once your github repository is created, click the green Gitpod button. This will automatically start creating your workspace environment.
-
Gitpod environment is used to write your code for your App then gets pushed to Github.
-
Django makes it very easy to set up your own computer so that you can start developing web applications.
-
After you’ve created and activated a virtual environment, enter the command pip install Django at the shell prompt.
-
Creating a project, From the command line, cd into a directory where you’d like to store your code, then run the following command: $ django-admin startproject mysite ⬅ (name of your website/app).
-
These files will be created in your project folder.
-
The outer mysite/ root directory is a container for your project. Its name doesn’t matter to Django; you can rename it to anything you like.
-
manage.py: A command-line utility that lets you interact with this Django project in various ways. You can read all the details about manage.py in django-admin and manage.py.
-
The inner mysite/ directory is the actual Python package for your project. Its name is the Python package name you’ll need to use to import anything inside it (e.g. mysite.urls).
-
mysite/init.py: An empty file that tells Python that this directory should be considered a Python package. If you’re a Python beginner, read more about packages in the official Python docs.
-
mysite/settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.
-
mysite/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site. You can read more about URLs in URL dispatcher.
-
mysite/asgi.py: An entry-point for ASGI-compatible web servers to serve your project. See How to deploy with ASGI for more details.
-
mysite/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project. See How to deploy with WSGI for more details.
-
Let’s verify your Django project works. run the following commands: $ python manage.py runserver You’ve started the Django development server, a lightweight web server written purely in Python.
Once your web application is finished deploy it to Heroku.
-
-
Make sure you add a procfile to your root directory!
-
The Procfile is always a simple text file that is named Procfile without a file extension. For example, Procfile.txt is not valid. The Procfile must live in your app’s root directory. It does not function if placed anywhere else.
-
Once you have your account ready, login with your credentials.
-
Click New on the top right corner and select “Create new app”.
-
Give your app a name (This will be included in the public URL for your application) and click Create app.
-
This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.
-
Select GitHub as the method.
-
It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.
-
Here, you can search for your GitHub repository and click connect:
-
If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.
-
Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, deploy from the master branch.
Amazon web services was used to store the static files for this project.
Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its e-commerce network.
Step by Step guides for setting up a AWS account
Thanks and praises has to go to all of the below as I work through a career change, asking for help and guidance along the way is always a good starting point.
Much like any other skill, learning how to code requires time and persistence. The difficulty will depend on the programming language itself and what kind of software you'd like to make.
-
Code Institute for providing the walkthrough guided videos and code.
-
I used YouTube for guides during my project.
-
Unsplash for unlimited free photo's.
-
Pexels another great website for free images.
-
Favicon for the website favicon.
-
My go to website is always W3Schools
-
Stackoverflow best answers to your technical question.
-
Wiki Wikipedia is a free online encyclopedia.
-
Slack for that extra push and always help.
-
MDN Web Docs best documentation on the web.
-
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
-
Ethereum is the community-run technology powering the cryptocurrency ether (ETH) and thousands of decentralised applications.
-
Bitcoin uses peer-to-peer technology to operate with no central authority or banks.
-
Bitcoin whitepaper Satoshi Nakamoto's original paper is still recommended reading for anyone studying how Bitcoin works.
-
Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs which govern the behaviour of accounts within the Ethereum state.
-
Blockchain explorer believe that in a decade the financial system of the internet — that is, commerce that happens on the internet — will be the largest financial system in the world. And it will be powered by crypto.
-
Coinbase is a distributed company; all employees operate via remote work and the company lacks a physical headquarters.
-
Truffle Suite A world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM), aiming to make life as a developer easier.
-
Ganache Quickly fire up a personal Ethereum blockchain which you can use to run tests, execute commands, and inspect state while controlling how the chain operates.
-
Binance Academy Your one-stop guide to all things crypto. Whether you're a rookie trying to understand mining or a veteran looking to develop a trading strategy, we've got you covered.
-
Blockchain.com Exchange APIs Explore the REST API documentation for detailed examples of the various functionality offered, such as receiving real-time market data, requesting balance information, and performing trades.
-
CoinMarketCap Since its launch in 2013, CoinMarketCap has become one of the most powerful websites in the cryptocurrency space, being one of the most visited sites in the industry and a premier source of cryptocurrency market data.
-
Coinbase Coinbase is a distributed company; all employees operate via remote work and the company lacks a physical headquarters. It is the largest cryptocurrency exchange in the United States by trading volume.
-
Live Coin Watch Complete cryptocurrency market coverage with live coin prices, charts and crypto market cap featuring 17399 coins on 463 exchanges.
-
CoinGecko CoinGecko is the world’s largest independent cryptocurrency data aggregator with over 13,000+ different crypto-assets tracked across more than 500+ exchanges worldwide.
-
Messari Messari brings transparency to the crypto-economy. Messari provides crypto market intelligence products that help professionals navigate crypto/Web3.
-
UseWeb3 is a platform for developers to explore and learn about Web3. Whether you're a new dev getting your hands dirty for the first time, or a seasoned developer making the transition into the Web3 space.
-
Best Websites For Programmers you must know to get always informed to do your technologies even better and learn new things. Here is a non-exhaustive list of some sites you should visit.