The Cryptopedia World

Introduction

The Cryptopedia is a community encyclopedia about crypto assets, crypto economy, and blockchain technology. When we first start working with cryptocurrencies, terms and concepts may sound foreign. It can take significant time to understand this information and gain momentum to dive into the fantastic possibilities available in crypto investments and decentralized finance. The goal of The Cryptopedia is to help people get to the fundamentals faster and in a friendly manner. The Cryptopedia is free to use, and all are welcome to join in contributing and building the archives.

The Cryptopedia is a Python-Flask web application that lists crypto informational content in the form of an online interactive encyclopedia, backed by a MongoDB collection. The Cryptopedia is a cloud web app deployed via the Heroku PaaS and consists of a lightweight, responsive website designed with Google's Materialize CSS Framework. As you read this document, you find my complete development process, from UX strategy to deployment.

• View The Cryptopedia on Heroku

• View the repository on GitHub

• For testing, please use the following login information:

  • username: user / password: user
  • username: admin / password: admin

This project has both educational and entrepreneurial goals.

Thanks for appreciating The Cryptopedia World with me!

Kes Cardoso

Contents table

1. UX

   • Wireframe

   • Target User and What They Want to Achieve

   • Target User's Main Challenges

   • User Stories

2. Features

   • Existing Features

   • Features Left to Implement

3. Technologies Used

4. Testing

5. Deployment

6. Credits

UX

Wireframe

Link to the initial wireframe for this app on Figma

Who is the target user

According to Binance, active cryptocurrency users' total number currently stands somewhere around 19 million. And according to Bitcointalk, about 82% of these users identify as male interested in the following areas: trading, investing, computers, software, design and animation, employment and career change, electronic gadgets, and banking systems. The current geographical crypto engagement is mainly caucasian: Europe, followed by the US, are the most important crypto markets and blockchain technology providers.

This demographic concentration (tech-savvy and financially educated European male, between the ages of 25 and 34, source: CoinTraffic), could be the result of a lack of educational and informational systems available for people who are marginalized by the dominant fintech industry.

The Cryptopedia provides entry-level information to people who are new to crypto and looking to elevate their financial status outside the traditional bank system, or the stock and bonds market. This project gears towards empowering new users, from a different background than that above, so crypto mass adoption can happen as intended: openly and democratically, all the while encouraging decentralized global wealth.

Target-user and what they want to achieve:

• Client Avatar: Cross-cultural English speaking men and women, from GenX and Millenials, who are researching basic information on how to get started with cryptocurrencies, digital asset trading, Bitcoin, Ethereum, Litecoin and Decentralised Finances (DeFi). This user demographic is based on the following:

  • Working women: female engagement with cryptocurrencies is rising and currently at an all-time high. The Cryptopedia aims to bridge the gender technological and monetary gab, by also offering women with resources and possibilities for financial and professional sustainability.

  • Coding Bootcamp students interested in software and undergoing a career change, who are looking to achieve financial stability with an initial low monetary support.

  • Entrepreneurs interested in the new economy and looking for alternatives within staking, investing, accounting, affordable online payments, and low-cost international banking systems;

  • Travelers, digital nomads, culture and art lovers, and political enthusiasts with interests in open finance and global economy solutions.

Main challenges

According to CoinTraffic, some of the main reasons why regular people don't invest in cryptocurrencies or blockchain-related products are:

• They find crypto hard to understand.
• They believe all crypto to be a scam.
• They are under the impression it is illegal in their jurisdiction.
• They find crypto to be too difficult to spend in every-day life.

The goal of the Cryptopedia is to pass information about the fundamentals of crypto finance through a simple, user-friendly interface. Structures are lightweight, from design to copy, and information is recorded from reliable sources and research. The reader can pick and choose what they need to learn and clarify and build on their knowledge. They can also contribute and enrich the collection with their research. The Cryptopedia follows the same ideology of decentralized blockchain systems. In essence, it is a trustless and permissionless encyclopedia for the crypto learner.

User Stories

Chloé is a 38-year-old European female, based in France. She is a cross-cultural English-speaking solo-entrepreneur, and she is looking for financial solutions during the current pandemic and economic downturn. She has savings on her French bank account, but she worries about her long-term sustainability, and how she will send money contributions to her retired mother who lives in Guadalupe, as the quarantine and social distancing are preventing her regular revenue.

Apart from finding online alternatives to continue running her business, Chloé wants to find a more profitable money management system, and she heard about crypto and how crypto transactions accross frontiers are cheaper and how DeFi could be an alternative for her savings. But Chloé is not tech-savvy, and she is afraid of running risks and losing her money.

When Chloé researches the internet about crypto assets, she finds very complex information, with lots of financial and technical jargon. But amid her google search, she spots The Cryptopedia World, which seems to be a more straightforward and accessible place to get started.

1. She opens The Cryptopedia web app on her Chrome browser and starts experimenting with it.

2. The interface is very straight forward, and soon she performs a term search through the glossary to find information about Etherium.

3. The search brings out a short text about what Etherium is and the possibilities around Ether and stable coins.

4. So Chloé goes to the categories tab and searches for "stable coins" and pulls out another short text, and she finds out about DeFi.

5. Chloé decides then to go back to google to find out more in-depth information related to DeFi. She learns about terms such as Smart Contracts, and the possibilities of lending-borrowing with higher interest rates than traditional banking, all using stable coins which are not affected by high volatility such as Bitcoin.

6. She is now very excited about the possibility of having a crypto staking and savings account, so she goes back to The Cryptopedia and decides to share this information with the archives.

7. Chloé quickly finds the register and login page; she enters her user information and logs in to The Cryptopedia. She is now able to add a new term to the glossary 'DeFi' and contribute to the database with her research.

8. She clicks the button "add new term", she fills out the form, and she clicks save. And her contribution is added to the glossary.

9. Chloé is also able to enter new category names to the archives. She can, too, search for terms using the category lists, which group terms by categories. And she finds, on the categorie list "Financial Terms", the term "Exchanges".

10. She reads about exchanges and learns that these are the plataforms where we can buy, sell and send crypto beyond borders for a very affordable price. She feels very good about this possibility for sending money to her retired mother and she wants to find out more about exchanges and wallets.

11. Chloé now feels empowered and motivated to continue growing her knowledge about crypto finances. The Cryptopedia is friendly and easy to use, and her participation counts: she is motivated. She is also looking forward to learning more about staking stable coins and finding a crypto banking solution to use her stable coins with a crypto visa card for her weekly groceries. The possibilities are now endless!

Features

Existing Features

1. Navbar: contains the logo and the main menu with easy access to the glossary, add new term and category, term lists by category and the login button

2. Search Box: this is a full-text search box that allows the user to locate a term to on the glossary. The Search Box is wired to the Cryptopedia MongoDB atlas.

3. The Glossary: this is the Cryptopedia itself, where all the information is stored (listed by term name, term category and term description) in the form of a collapsable accordion list.

4. Category Lists: There is the main category list, listing all categories for management, and there are query lists that filter terms by category. They display in the form of a collapsable accordion list, and these lists serve to improve the user interface.

5. Add New Buttons this offers the possibility for users and admins to add new terms and new categories to the glossary, via a form wired to the database.

6. Edit Button this offers the possibility for users and admins to edit existing terms and categories already in the glossary.

7. Delete Button: this offers the possibility for admins only to curate and erase terms and categories from the glossary.

8. Pagination: as the glossary grows with more terms, pagination is necessary and implemented for best user-interface.

9. Footer: Displays credits and contact links. It also has a login/logout ticker that becomes available during user sessions.

10. Custom Domain: a custom domain is registered for this project at http://www.thecryptopedia.world

11. Secure SSL Certificate: for users to feel confidente using private information such as email and Password on this app, and to increase software credibility.

Features Left to Implement

1. Wildcard Search: at the development of the first version, the app disposes of a full-text search form (which is the feature available for MongoDB and pyMongo search forms). In January 2021 a fully functioning wildcard search box was achieved and implemented using $regex.

2. Recover Password: the register and login system used in this version is a lightweight and straightforward pyMongo method based on user-sessions. For a more sophisticated and robust user system, a uthentication token system (i.e. JWT token) or the Flask-Login add-on have more secure options for the register, login, and password handling, including the option for recovering passwords with temporary session tokens which can be implemented in future versions.

3. Translations: translations to both French and Portuguese are planned for future versions of this project.

4. Databse Update: this project currently uses a document oriented database (MongoDB), which could be updated to a Relational Database (mySQL) to dispose of more functionlities in terms of users priviledges, user profile features, list of contributions by users, and admin priviledges for a more complex encyclopedia and database app based experience.

Technologies Used

1. HTML & CSS.

2. Programing languages - this project uses Python as the main programing language, with PyMongo as the main library; as well as Javascript and the JQuery library.

3. PIP - for installation of necessray tools and extensions.

4. Flask - as a Python framework, with the Jinja library.

5. MongoDB - as a document-oriented database to store data in JSON-like objects with a dynamic schema.

6. Materialize - as a Css Framework to facilitate a grid-system, responsive design, and optimal user experience.

7. GitPod - as a development and testing environment.

8. FontAwesome - to style the footer with icons.

9. Git - for version-control and for tracking changes in source code during development.

10. GitHub - as a remote code repository.

11. Heroku - for app deployment.

12. StackEdit - as an in-browser Markdown editor for beautiful, stress-free README writing.

13. NameCheap - for aquisition and installation of custom domain.

14. CloudFlare - for Universal SSL certificate instalation (currently being validated, may take a few days).

Testing

• Responsiveness -- The responsiveness of this website was consistently tested locally during the development process: on GITPOD using the Chrome developer tools, as well as physically using iPhone mobile devices, iPad tablets, and Mac desktop.

• Browsers -- The website was tested and verified in Chrome, Safari, Firefox, Brave and Opera.

• Code Validation -- The following validation services were used to check the code:

  • W3C Markup Validator was used to validate HTML.

  • W3C CSS Validator was used to validate CSS.

  • JSHint was used to validate JavaScript.

  • DiffChecker was used to validade the Python app.

• Real User Input -- I have asked friends and family to check and use the website on their desktop and mobile devices with positive feedback of proper functioning and design experience.

• Practical Tests -- Please, click on the linked titles below to open each test and see a screencast (mp4 file) on your browser.

  • Practical Test 1 Register and login forms

  • Practical Test 2 Logged user: add term

  • Practical Test 3 Logged user: edit term

  • Practical Test 4 Category list view

  • Practical Test 5 Logged user: add and edit category

  • Practical Test 6 Logout

  • Practical Test 7 Admin: delete privilege

Deployment

This project was developed using Gitpod as the chosen IDE and GitHub as a remote repository. The Project's source files were regularly pushed to the GitHub repository kescardoso/cryptopedia via the master branch.

Local Deployment: To reproduce this project within a local deployement, use the following steps and requirements:

1. Have the following installed in your IDE of choice:

• Git (for version control)

• pip (package installer for Python; pip3 was used at the time of production: April 2020)

• Python3 (the programming language used to produce the backend logic of this project) using the following command:

  • pip3 install dnspython

• Flask (the library used to add special features and functionalities to this Python application) using the following command:

  • pip3 install flask

2. Create an account with MongoDB, following the MongoDB instructions for the creation of a Cluster and Collections, and connect your database server with your Flask application:

   • From your MongoDB cluster dashboard >> click on CONNECT >> choose "Connect your application" >> Driver: Python and Version: your python version.

   • Register your MONGO_URI credentials inside your env.py file withing your project, by using the follwoing commands:

     • touch .gitignore
     • touch env.py

   • Connect your MongoDB data to your Flask app using the following command:

     • pip3 install flask-pymongo

   • Add the environment variables to your env.py file:

     import os

     os.environ.setdefault("MONGO_URI", "your_mongodb_credential_data")
os.environ.setdefault("MONGO_DBNAME", "your_mongodb_name")
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "your_secret_key")

3. Install additional packages:

   • pip3 install flask-paginate

4. Update the requirements.txt file using the following command:

   • pip3 freeze > requirements.txt

5. These files were added, commited and pushed to github using the commands git add git commit git push .

Heroku Deployment: The Project's source file was also pushed to Heroku via the heroku master branch. To deploy this app to a Heroku app use the following steps:

1. A requirements.txt file was created using the terminal command pip3 freeze > requirements.txt.

2. A Procfile was created using the terminal command echo web: python app.py > Procfile.

3. A new app was created for the Cryptopedia on Heroku dashboard, by clicking the "New" button and setting the region to Europe. It is necessary to open an account with Heroku and start a new app installation inside your heroku dashboard.

4. New app configurations including environament variables were added on "Settings" > "Reveal Config Vars" inside the Heroku dashboard:

   • IP: 0.0.0.0
   • PORT: 5000
   • SECRET_KEY: your_secret_key
   • MONGO_URI: your_mongodb_credential_data
   • MONGO_DBNAME: your_mongodb_name

5. From the Heroku dashboard the app was deployed using the "Deploy button" and connected to the gihub master branch for automatic deployments.

6. These files were added, commited and pushed to github using the commands git add git commit git push .

7. The web app is now successfully deployed.

Credits

1. Code

   • Pretty Printed Login System

   • Pretty Printed Bad request in Flask

   • Tech Monger Secure Passwords

   • DarilliGames Flask Paginate

2. Media

   • Logo: Eucalyp from FlatIcon

3. More credits here

4. Acknowledgements Gratitude to my dear mentor Seun for her gentle support and motivation throughout my coding journey. Also, to Code Institute staff, student services and tutors for their incredible patience and ongoing 24hour support. Thank you, from the bottom of my heart.