Webflow Development for a Crypto Website
Webflow Development for Charlie DeFi
Charlie DeFi is a crypto currency reporting and education company. They needed a site that allows them to educate those interested in Web3, specifically decentralized finance.
The site pushed Webflow’s no code boundaries. Not only did it push Webflow’s boundaries, but it also required custom development, as well as API calls and the use of chart.js.
I learned Webflow’s boundaries and best practices for working with custom code alongside a complex Webflow project.
Casey is extremely knowledgeable and skilled in the use of Webflow. He has impressed me with his ability to turn complex design concepts into beautifully functional websites. I highly recommend him for any web design projects.
![testimonial image](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63ed3766cf7e9f73a7205cc7_Juan.webp)
Project Scope
Charlie DeFi needed a website that allowed them to educate crypto currency enthusiasts. The site operates under a freemium model. It needed to offer both free content as well as a paid membership for more premium content.
An API connection to both Defi Llama and Coin Gecko was necessary. As well complex filtering and CMS collections that could be updated easily by the client for continued reporting and educating.
Deliverables
Harnessing Webflow's Potential for Crypto Platforms
- Modern design for a Web3 crypto currency website.
- CMS collections making it easy for the client to update, as well as provide the ability for numerous writers to access the site and add content on a daily basis.
- Memberstack memberships, along with social logins
- API calls to Defi Llama and Coin Gecko
- The use of chart.js with Webflow’s CMS to dynamically graph financial data.
- Complex filtering via Finsweet’s Attributes, along with custom code.
- Dynamically connect to Spotify Podcast displaying the podcast on each article.
- CMS filter for block chain bridges
![Website development and design example](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6447e16cd43e8fdeb1f414a5_Memberstack%20Premium%20Membership.webp)
Crafting a Premium Subscription Experience with Memberstack
Memberstack was used to create a premium subscription model that allows access to more in-depth reporting and articles.
We decided to provide potential subscribers the opportunity to read a portion of the article. Memberstack’s features allowed us to hide a portion of the article prior to signing up.
We utilized the gating feature to include a strong call to action for the premium membership.
Social logins were also added to make it easy for subscribers to both sign up and login.
We also selectively show content based on a users status - no sign up, signed up but not a premium member, full premium member.
Seamless API Integrations for Real-time Crypto Data
Webflow is a powerful no code development platform that allows you to build a custom website fast.
It also gives you the ability to easily add custom code to your project, extending its capabilities.
Leveraging VS Code, Github, and CDN delivery network, we were able to dynamically provide financial statistics and charting.
Charting is handled by chart.js and dynamic financial information is displayed using a few lines of custom Javascript.
All the information displayed is delivered dynamically via Webflow’s CMS and is easy for my client to add as they create new articles.
![Website development and design example](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6447e16ca0bd6387d0204c10_Custom%20Code.webp)
![Website development and design example](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6447e16c805f6a81306c01e2_CMS%20Filtering%20Style%20Guide.webp)
Optimized Content Delivery with Finsweet’s Client First Approach
The website was developed using Finsweet’s Client First class naming system. Every section and component is named for future development work or easy handoff.
Attributes were used throughout the build to extend Webflow’s capabilities. These were particularly used for complex filtering and search functionalities.
Every CMS collection has the ability to filter and search. A few have complex filters applied that not only surface the right article, but provide useful information within the DeFi world.
Dynamic Content Management with Webflow's CMS Collections
The site reports on and educates in a number of different categories. Each of these areas were developed using CMS collections and template pages.
There are a total of 21 CMS collections. 16 of these are designed to be unique template pages and 5 support those collections.
Not only did we build out 21 CMS collections, but we also built 26 static pages.
Overall the website was a massive build not only in size but in complex functionality to support each of these collections and pages.
![Website development and design example](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6447e16c85137681b49ae0b9_CMS%20Collections%20and%20Static%20Pages.webp)
Claim Your Design Spot Today
We dedicate our full attention and expertise to a select few projects each month, ensuring personalized service and results.
![increase sales webflow project](https://cdn.prod.website-files.com/624b45b45d06af79d30f94bf/655b89ed1d8ceb05a40415d0_cta%20image.webp)
Previous
![Owner and CEO of CL Creative](https://cdn.prod.website-files.com/624b45b45d06af79d30f94bf/6303a08bbd8313103bc2e6c9_casey%20lewis%20headshot.webp)
Next
![Owner and CEO of CL Creative](https://cdn.prod.website-files.com/624b45b45d06af79d30f94bf/6303a08bbd8313103bc2e6c9_casey%20lewis%20headshot.webp)
Want to 2x Your Leads and Conversions?
Join the exclusive community receiving our 5-Minute SEO and Web Design Tips.
Every week, we deliver expert insights straight to your inbox, designed to propel your business to the top of Google rankings, resulting in more website visits and more sales.
With years of proven experience, our tips are concise, actionable, and tailored to fit your busy schedule.
Transform your website into a lead-generating powerhouse without spending hours on research.
![Person reading our seo and web design weekly tips](https://cdn.prod.website-files.com/624b45b45d06af79d30f94bf/65b959bab5d7a7e19fd2db73_seo%20success%20business%20owner.webp)
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/65b585ed272e384cb975f2f7_Web%20Design%20Dark%20Mode%20-%20Homepage.webp)
Web Design for a Staffing Firm
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/65845b8733e66fa374ef7779_fluidline%20solutions%20homepage%20mackbook%20mockup.webp)
Webflow and Shopify Website Design and Development
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/653675e6be4761462bb19045_Portfolio%20Savannah%20Walks%206.webp)
Website Migration to Webflow and Redesign for Walking Tour Company
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6535cf4792a04a804f11bf17_Wise%20Guys%20Portfolio%206.webp)
Webflow Migration from Wordpress and Webflow SEO
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/653657d9b67c5237c046aabf_Satterfield%20Mockup%20Portfolio%203.webp)
Redesign and Migration to Webflow of a Home Builder's Website
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/65355edf1f1473aa509dbf7e_Circle%20T%20-%20Home%20About%20Page.webp)
Web Design and Development for Window Treatment Company
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6511cd87f8a057afd03dd4c4_Portfolio%20mockup%20-%20Popcandi%20pages.webp)
Webflow Web Development Building A Career Marketplace Platform
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/64c3deef252bb8fc3f3639ba_Lonestar%20Roofing%20-%20Roofing%20Contractor.webp)
Website for a Roofing Company in Dallas Texas
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6447e16ca0bd6387d0204c10_Custom%20Code.webp)
Webflow Development for a Crypto Website
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63edc0b502f94a011a434d89_Big%20Brand%20Experience%20Portfolio.webp)
Webflow Design and Development for a Talent Management Startup
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63ed36763a0b9f32f42b67d7_Charlie%20Gaming%20Main%20Mockup.webp)
Webflow Website Development for the Web3 Space
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/634860db136b894d19ae0c65_carousel-mockup-1.webp)
Webflow Design for a Leadership Foundation
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63485e0116aa63caf1040082_nhrealtors-carousel-design.webp)
Webflow Website for a Real Estate Broker
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63101fdd50601a0238bf3452_mobile-responsive-design.webp)
Webflow Development for a National Moving Company
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/63101dd650601a49fabf0d30_client-first-website-development.webp)
Webflow Web Design for a Wellness Startup
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/6310170bd3b76bd5b8dce4bb_design-natural-texas-lawn-care.webp)
Web Design for a Lawn Care Company
![](https://cdn.prod.website-files.com/627fa16857254f6bf333d073/630e9ebefcc91e7ca478bfd2_annas-bake-sale-foundation-design-update.webp)
Web Design for a Non-Profit