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.
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 cann add comments.
- Users can not at this moment, edit their own comments, only admin can. As I would not like any negative words.
-
Admin users can.
- Add/edit/delete posts ✅
- Create groups/users ✅
- add attachments ✅
- Social accounts ✅
- Approve/delete selected comments ✅
-
Site User's I can view a paginated list of posts so that I may easily select a post to view.
- Pagination is the method of separating digital content into different pages on a website. Users can navigate between these pages by clicking links, often in the form of numbers located at the bottom of a page. Paginated content is typically related by some common theme or purpose.
-
As a user I would like to delete my comments from posts.
- engaging with your audience via comments is an excellent way of making a connection with your target market. If you are able to provide customer service to comments from unsatisfied customers quickly, you can avoid losing such customers and end up gaining new ones as well.
-
Site admin can create, read, update, and delete posts so that I can mange the conntent.
- Having a content management system for your website allows you to have control of your content. It means having the ability to update, change or delete any images, text, video, or audio. It allows you to keep your site organised, up to date and looking great. So many websites never review their content after launch.
-
User's can like and unlike comments, so they can interact with the content provided.
- Every successful social media website offers features for users to engage with what they see: likes, loves, comments, and reactions.
-
Site user's can comment on posts so they maybe able to interact with conversations.
- Algorithms on social media seem to favor comments and back-and-forth conversation. If your post gets a lot of comments, it will get more distribution.
-
- Through the registration process, you can detect fraud and add a level of increased security to your website.
-
Visitors and site user's can click on post's to view and read the content available.
- People may be more likely to pause on, interact with and respond positively to posts with creative that captures their attention. Every post should include creative, such as images
-
Site admin and users can view the number of likes for each post to see the most popular ones.
- Popular posts can help you get more likes, comments, and shares, which can lead to organic reach and new followers.
-
As a site admin and user I can view comments on each post available.
- Comments build the relationship among the readers/ users and the owners/writers.
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.
- Colour scheme chosen by W3Schools The final list of colors used has been placed in the below list.
Coinbase and Binance were used for content and images throughout the blog posts.
-
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.
-
To help me visualize a typical user journey around the site, I used draw.io to help me plan out the various routes a user could take through the site. ➡️ 🗾
-
Newest content
- Keeping up to date with the industry, networking, forums, and google alerts will be regularly researched.
- 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.
- 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.
-
- Gitpod terminal was used to commit and push to GitHub.
-
- GitHub is used to store the project code after being pushed from Gitpod.
-
- Bootstrap was used to assist with the responsiveness and styling of the website using design templates.
-
- WSGI server used to take care of everything happening between the web server and web application.
-
- PostgreSQL database adapter
-
- Google Fonts makes it easy to bring personality and performance to your websites and products.
-
- 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
-
- Used to validate JS code
This project was created on Github then using Gitpod as a development environment to write and push code to Github, before being deployed to Heroku, with the media and static files stored on Cloudinary.
-
To put your project up on GitHub, you will need to create a repository for it to live in.
-
In the upper-right corner of any page, use the drop-down menu, and select New repository.
-
Type a short, memorable name for your repository. For example, "hello-world".
-
Optionally, add a description of your repository. For example, "My first repository on GitHub."
-
Choose a repository visibility. For more information, see
-
Select Initialize this repository with a README.
-
Click Create repository.
-
Congratulations! You've successfully created your first repository, and initialized it with a README file.
-
Start your first workspace
-
The first time you login to Gitpod with GitHub, you will be prompted to “Authorize Gitpod” to access your GitHub account. This creates a connection between Gitpod and your GitHub account, and installs an OAuth App in your GitHub settings.
-
Gitpod uses the name and email from your GitHub account ID to create a new Gitpod user account. This is sufficient to start a Gitpod workspace on a public repository.
-
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.
-
-
- The packages installed for this project can be found in requirements.txt
-
- Django was used as the python framework in the project.
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.
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.
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.
Validators
- html file was checked with W3C markup validation some errors were flagged due to?
- Using CoinMarketCap API widget that is displayed at the top of each page for Cryptocurrency prices.
- The error has Something to do with the widget and not the website it’s self.
- Cloudinary img element that was added through the Admin side of each post, wanted an alt attribute added.
- The following alt was added to correct this issue. ( alt="cryptocurrency" ) within the index.html file.
- Mailchimp subscription form has an error of using the same ( mc_embed_signup ) Duplicate ID within the form.
- I need this for the subscription form to work.
-
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, hover across one of the errors then press down command and click. this will open the file and area of code that needs attention.
-
I chose to ignore any warnings on migration files susch 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.
-
imported but unused, also line too long E501 were some common issues, Code was shortened within the urls.py and env.py files to fix these errors. One issue was when I shortened the ["DATABASE_URL"] Postgres code within the env.py file, I lost the website and it wouldn’t load, so I left it the way it was for now.
-
In the settings file one issue is AUTH_PASSWORD_VALIDATORS line too long, after loosing my Website when trying to shorten the ["DATABASE_URL"] Postgres, I didn’t want to create more issues, I have spent too much time and sleepless nights getting to this stage.
-
-
All errors were corrected too the files mentioned to the best of my ability.
- Various browsers and devices have been also tested throughout.
- 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.
- This error shows when a user types a URL into the browser which does not exist within the app's domain.page not found or file not found error message is a hypertext transfer protocol standard response code, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested.
- 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.
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,code and the student support they have.
-
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.