Blockchain-Blog

When most people hear the word blockchain, which refers to a type of decentralized ledger technology, they immediately connect the term with cryptocurrencies. However, it is important to keep in mind that bitcoin just happened to be one of blockchain’s earliest and most popular applications; most experts believe that the potential for other applications of blockchain technology is vast.

UX

This project is part of my Code Institute Full Stack Software Development studies. The idea was to create a blog page for users to register, comment and like various contents about different blockchain technology information.

Main goals for users

• To make the website interactive for user wanting to learn all about blockchain technology.
  • Various external links are added for each blog posts. ✅

• Let users see the latest cryptocurrency prices from the newest coins. ✅
  • A price coin marquee widget was added to the header of the page generated from CoinMarketCap

• As a user I want to.

  • Register ✅
  • Comment ✅
  • Like posts ✅
  • Be able to login ✅
  • Log out ✅
  • See how many likes on other content ✅
  • View all content as a user ✅
  • once users are signed up and logged in they can delete there comment.

• Admin users can.

  • Add/edit/delete posts ✅
  • Create groups/users ✅
  • add attachments ✅
  • Social accounts ✅
  • Approve/delete selected comments ✅

• User story and template was created with github.

Design

As a base guide I used code institute walkthrough videos for the design process.

• Imagery used
  • I wanted to use cartoon style images throughout each blog page.

Coinbase and Binance were used for content and images throughout the blog posts.

balsamiq wireframes

• Creating your first wireframe.

  • A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume.

  • Blockhain-Blog home page wireframe

  • Blog-page content

Features to add

• Email sign up

  • However, email marketing has stood the test of time. Creating email newsletters is the most effective way to build stronger customer relationships, and grow your business revenue.

• Newest content

  • Keeping up to date with the industry, networking, social media, forums, and google alerts will be regularly researched.

• All social media pages and links will be added at a later date for users to follow.

  • Facebook

  • Instagram

  • Youtube

  • Reddit

  • Twitter

• With over half of the world’s population using social media, platforms like Facebook, Instagram or Twitter a natural place to reach new and highly targeted potential customers.

Technologies used

Languages

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries & Programs

• Django

  • Python Web framework used to build the site.

• Gitpod

  • Gitpod terminal was used to commit and push to GitHub.

• GitHub

  • GitHub is used to store the project code after being pushed from Gitpod.

• Heroku

  • Heroku is the app platform I deployed my project to.

• Heroku Postgres

  • Heroku’s reliable and powerful database used to store the data for my deployed Heroku App.

• Bootstrap 4

  • Bootstrap was used to assist with the responsiveness and styling of the website using design templates.

• gunicorn

  • WSGI server used to take care of everything happening between the web server and web application.

• psycopg2

  • PostgreSQL database adapter

• Google fonts

  • Google Fonts makes it easy to bring personality and performance to your websites and products.

• Font Awesome 4.7.0

  • Font Awesome was used to add icons for aesthetic and UX purposes.

• W3 Validator and W3C CSS Validator

  • Used to validate my HTML and CSS files

• JShint

  • Used to validate JS code

Deployment

The project was deployed to Heroku with the media files stored on Cloudinary.

Setting up Heroku environment:

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 main branch.

Cloudinary

What is the purpose of Cloudinary?

• Cloudinary is an end-to-end image- and video-management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations to delivery.

• Cloudinary Media DB is a service that allows you to store media files in the cloud.

• Cloudinary is used by 1 million web and mobile application developers at more than 8,000 companies including Condé Nast, Dropbox, Forbes, Outbrain, Taboola and Answers.com. Inc. Magazine has called Cloudinary the "gold standard" of image management on the web.

• create your account with cloudinary first and follow these steps for storing your media and static files.

• favicon.io was used to generate the browser icon, then the image was saved and uploaded to cloudinary.

SEO

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages. It can be run against any web page, public or requiring authentication. Google Lighthouse audits performance, accessibility and search engine optimization of web pages.

These checks ensure that your page is optimized for search engine results ranking.

Testing

Validators

• html file was checked with W3C markup validation some errors were flagged due to using Django.

  • Issues using '{}' brackets, this syntax is necessary to access files and urls and therefore ignored. further research will be needed.

• CSS file was checked using CSS validation service all code was passed with 2 errors coming from the (-webkit-transform) and (moz-transform) because it is a vendor extention. This article explains the reason for the errors

  • At this point, these look like they'd all be safe to remove from the CSS file, but there's no particular benefit in doing so.

• JS Hint was used for the small amount of JavaScript used, only (use 'esversion 6') was flagged up, this article explained the reason for creating a .jshintrc file in the directory

• PEP8 was used for testing python code.

  • In the terminal by typing ( python3 -m flake8 ) and hit return will bring up all issuse within each python code file, saves you looking through every file one by one.

  • I chose to ignore any warnings on migration files 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.

  • imported but unused, also line too long E501 were some common issues, but at this stage I didn’t want to start breaking up my code, so can live with this, I understand as a developer these will have to be addressed more professionally.

• Various browsers and devices have been also tested throughout.

Credits

Thanks to everyone involved at Code Institute for giving people the opportunity and possibilities of a career change. From the student support, to the mentors available and everyone over at slack, getting this far with the course has been one of the most challenging things i've done.

• Code Institute for providing the walkthrough guided videos and code.

• 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.

Helpful Resources To Continue Learning About Blockchain

• 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.