Project Details

Goals

Even though there are multiple Cryptocurrency websites available in the market, none of the websites had all the information about Crypto currencies like News, Videos and tweets etc. So the client’s major vision was to have all these News, Tweets and Videos in the same website apart from the core crypto currency data.

The goal was to develop a Cryptocurrency website with the following

• To Build with WordPress that includes 10+ pages with a custom theme design
• To Display real time tweets about Cryptocurrencies on the website
• To Display real time YouTube videos (with English language only) about Cryptocurrencies on the website
• To Display real time news from GNews about Cryptocurrencies on the website
• To Display Top performing Crypto coins in header with price growth graph using last 7days sparkline data
• Global currency switcher option
• To Display various snippets like ‘Top 10 Highest Market cap currencies’, ‘Top 10 Lowest Market cap currencies’, ‘Top 10 Highest Volume currencies’, and ‘Top 10 Lowest volume currencies’, etc
• Autocomplete search of Crypto Coin names and Crypto coin symbols
• To Create various charts which provide and compare info like Price, Market Cap, Volume over different time periods with Range selector options
• Real Time currency convertor using CoinGecko API
• Crypto Sweep module which has all the information from Twitter, Youtube and gNews for the search term displayed in a Masonry layout with Load more option.
• Chat module for every crypto coin and crypto exchange separately.
• Reviews module for every crypto coin and crypto exchange separately.
• Discussion and Forum module
• Cryptocurrency data pulled from an API called CoinGecko.
• To Display all the data like Price, Market cap, volume, rank, 24h% change,7d% change,30d% change, and 365d% change etc in our website without going to CoinGecko website
• Registration and login feature
• Social login options like Facebook, Google, and Twitter

Website Development Process

Client’s Inputs

Client came up with a detailed plan for the website. They provided a rough sketch of all the pages and the elements to be implemented in every page more like a low fidelity wireframe. Client initially suggested Nomics API for the core functionality of cryptocurrency data and Twitter API for tweets, Youtube API for displaying youtube videos and RSS APP API for displaying Google News.

Designing Phase

With the information and ideas shared by the client, we had an internal discussion about how to take this forward in terms of designing mockups. As more than 90% of the website’s data is from 3rd party APIs, we had to analyse how the 3rd party APIs are providing data. So we decided to do designing phase page by page instead of designing all the pages upfront before starting the development. Since the developer’s input and ideas were important, we decided to do it this way. And also, API’s limitations also need to be considered while designing. Even Though client came up with rough design sketches, we had calls with the client and designed the pages in a better way without deviating from what the client was expecting.

Website Design Plan

Even though the client gave us design inputs, our designer had to make various changes to their version in terms of designs, colors, fonts, etc.

So we designed mockups for the homepage with the client’s branding colors and fonts. Below are the major points which we considered while designing the mockups.

• Analyzing about CryptoNypto’s needs
• Brainstorming the immediate marketing goals
• Retaining the required modules in the homepage from the client’s design sketch.
• Adding other needed modules in the homepage which were not part of the client’s initial design sketch

CMS Pages Development Process

As this is a Cryptocurrency portal with data pulled from various 3rd party APIs, there weren’t many CMS pages in the website like other websites.

Crypto currency based modules development process

As mentioned earlier, core functionality of the website comes from a 3rd party API. Client suggested Nomics API for this functionality. We started the development with the Nomics API. We initially started with displaying the top 5 currencies with a price graph based on 7 day sparkline data and completed it. As the Global Currency Switcher option was there, all the information displayed in the website should change as per the currency selected by the user in the Currency switcher.

While working on this, we found that Nomics free API supports only 1 request/second. But for the Global Currency Switcher to work, we need to make multiple API calls when currency is changed. We informed the client about the need for the plan upgrade. As the pricing was too expensive, the client decided to let go of Nomics API and suggested we go with CoinGecko API (Open Source API). So we had to scrape off everything which is done in Nomics API and we had to start from the beginning.

There were few issues as we decided to go with CoinGecko API instead of Nomics API. As CoinGecko is fully free, their features were limited when compared to Nomics API. So the client had to cut down some requirements which were not possible in CoinGecko API.
Cryptocurrency product page development was quite a challenge because there were lots of functionalities involved. Intro section had important details like Price, Market Cap, Volume, Rank and Price change % etc. Price change % was provided for 24 hours, 7 days, 30 days and 365 days dropdown selector.

Main section of the product page was an Infographic Chart display of Product Price for various time periods like 1 Day, 1 Week, 1 Month and 1 year. And every product page has tweets, youtube videos and google news related to that specific product (currency) displayed in that page.

Above all, we also had a custom chat module specific to that product page. So every product page has its own chat page with chat history. There are around 6000+ coins and 400+ exchanges on the website. We found a chat plugin and customized it to create separate chat rooms for every product and exchange separately.

Another important feature of this product page was the Review module. In this, a logged in user can provide rating and write review for that product. Those reviews will be displayed in the product page with Ajax pagination option. Unfortunately after completing the development, the client decided not to have this feature.

All the above mentioned crypto features should work along with the global currency switcher, so we had to keep this thing in mind throughout the development.

Like Product pages development, Exchange pages had similar features. Only drawback we had in the exchange module was CoinGecko API’s Exchange endpoints were in Beta mode and features were limited when compared to its Product endpoints.

Convertor Module and DeFi module

We also developed other core Cryptocurrency pages like DeFi page and Currency converter pages using CoinGecko API.

Like Exchange’s API endpoint, DeFi related API endpoints were also limited. So we had to store some data in our database and update it on a daily basis by setting up a cron job on the server. Like Product pages, DeFi page also has Interactive Charts for Market Cap and Dominance. And also we display top DeFi coins based on Market Capitalization.

The Converter module was an important module in this website development as it shows real time converted currency value. In this page, we designed the page which allows the user to select both Base currency(From) and Convert currency(To) and enter the value to be converted. We also display the Currency flag near the currency symbol to provide more clarity on the currency.

CryptoSweep Module

CryptoSweep was a major module in this development. Initially the client’s plan was to have separate pages for Google News, Tweets and Youtube Videos while starting the development. But later the client decided to combine these 3 pages into 1 page called CryptoSweep page which has Google News, Tweets and Youtube Videos.

This page has an Ajax Search bar, and Checkboxes to filter contents like News, Tweets and Videos. And the Results are displayed in a Masonry layout with a Load more button. On clicking the Load more button, the next set of data loads without loading the entire page.

Search bar is the core of this page. Any keyword searched will connect to gNews API, Twitter API and Youtube API and display the data in this page. Since this is a Cryptocurrency portal, Client also told us that only the search results related to Crypto currencies, exchanges should be displayed. So we had to come up with a workaround which allows the user to search only crypto related words in the search module.

Forums/Discussion and Social Login Module

For this page, Client was looking for a basic forum/discussion board display and functionality, whereby users can create topics and comment on other users’ topics too. Also, the client’s requirement was that Users should be able to visit and read the content on this page without signing in, but they must be logged in to an account in order to leave a comment or create a post. Considering all these in mind, we chose Forum plugins and made necessary changes to match our requirements.

We also integrated Social Logins like Facebook, Twitter and Google in addition to the native Email login method.

Obstacles during development

We faced various challenges during the development process. Initial obstacle was starting the development with Nomics API and we had to switch to CoinGecko API after making considerable progress in Nomics API due to its pricing. Even after choosing CoinGecko API, we faced a similar situation where the client was thinking of choosing a different API as some features were not available with CoinGecko API and later decided to continue with CoinGecko API itself.

Another challenge was the CoinGecko API support and their documentation. Since it’s an open source free API, there was not much support from their end and also their documentation was very basic. For support queries, we have to wait at least a week to get a response from their team.

Another challenge was that the client was constantly changing the designs of the completed modules/pages throughout the development phase. So there was lots of rework in this website development.

Also the GNews API which we were using was a free version. In the free version, only 100 requests/day is allowed. In development, we had to test the modules frequently so 100 requests were not enough. So we had to create multiple free accounts and use multiple API keys throughout the development process.

Website Migration Process

Usually, we use ‘All in One WP’ migration for migrating the website from staging to live or from live to staging. Since most of the data is from 3rd parties, we had to create a few custom database tables to store some data. So while migrating the website to live, we had to be extra cautious about the tables and had to ensure these data were migrated properly. We also had to configure a few Cron jobs in the server for this website to minimize the number of API requests.

So we had to configure Cron Jobs in the live server after migration. Also, Social login had to be reconfigured after the migration to match the live website URL.

We followed the below points after completing the development process in our demo server.

• Migrating the website using WP Engine migration plugin
• Working on CSS fixes
• Configuring Cron Jobs on live server
• Re-configuring the Social Login module based on the live URL.
• Making the site look consistent across pages
• Start with functional testing and fixes
• Going through designer level testing and fixes
• Going through final live testing and fixes

Result

• Easy navigation in the header increased 200% more clicks
• Easy login/registration with social login enabled
• Forum/Discussion module for the visitors
• Interactive Price Charts for crypto currencies for various time periods.
• The CryptoSweep page will have tweets, videos and news on the same page.
• Website is ready for new marketing campaigns to attract more users

As one of the top providers of  website solutions provider, ColorWhistle can create, strategize, design  and develop your website requirements . From integrating a third party tools to website development, we can create effective solutions that will cater to your business challenges and goals.

If you need any help with website designing, website development  to digital marketing for any business get in touch or call us at +1 (210) 787-3600. We are happy to partner with you.