sh

From Wix to Wow: Reinventing NYBC's Digital Presence

ReactJS
JS
TailwindCSS
Framer Motion
REST API
Strapi CMS
Postgres
Cloudinary
PWA

Project Purpose & Goal

In the realm of web development, there are projects that go beyond creating an online presence; they empower communities and amplify voices. The National Youth Bike Council project was one such endeavor that I had the privilege to be a part of through Catchafire. The overarching purpose was clear: to provide a dynamic platform for young cyclists, a space where their voices could resonate and influence the bicycle industry through peer leadership.

From Wix to Wow: Reinventing NYBC's Digital Presence

Tech Stack Explanation

To breathe life into this vision, we harnessed a versatile web stack. At the heart of our project stood React, the dynamic JavaScript library known for its responsiveness and reactivity. Tailwind CSS lent its elegance to the design, allowing us to craft an interface that was as visually appealing as it was functional. Framer Motion in React brought a touch of enchantment to the user experience through subtle animation effects, making every interaction feel like a journey. The crown jewel of our tech arsenal was Strapi CMS, a headless CMS that granted us unparalleled flexibility in managing content. With Strapi, I seamlessly organized and delivered the rich, ever- evolving content needed to fuel the NYBC's mission.

From Wix to Wow: Reinventing NYBC's Digital Presence

Problems & Thought Process

Moving the NYBC away from their old website, built on Wix was quite a challenge. While Wix is user-friendly, it lacked the scalability and customization potential essential for a growing organization like NYBC. The ask was to create a simple web design along with flexible & organized interface to manage the content. I designed the UI interfaces from scratch in Figma and the team, very kindly, let me navigate through the process. We finalized our screens mockups, fonts and brand colors. Every decision was carefully considered. Tailwind CSS streamlined our design process, allowing us to iterate swiftly while maintaining a consistent and aesthetically pleasing interface. React provided the interactivity required for users to engage meaningfully with the NYBC's initiatives, resources, and community.

Benefits Achieved

There were many benefits that the NYBC's team pointed out. In the words of National Youth Bike Council's President - Joshua Funches, it helped them to run their website in much lesser cost as compared to $200-$300/year for their old website. He also enjoys the flexibility of adding or updating the content on his website. According to the council's annual reports, the traffic of their website has also incresed with the new platform. The team also appreciated the launch of PWA. It is still work in progress but the initial release helped them use the website as a mobile app. That was great.

Lessons Learned

The NYBC project was more than just code and design; it was about building a bridge between the organization and its audience. I learnt a lot while designing the UI and all the React components from the scratch. It was a good brush up. The integration of Strapi was in itself a nice experience. PWA (Progressive Web App) implementation, though initiated, taught me that constant improvement is key. While we offered the mobile app experience, we recognized the potential for further enhancements and optimizations to make it truly outstanding. As the Software Development and Tech Advisor for the council team, I found immense fulfillment in leveraging my skills to contribute to a cause greater than myself. This project reinforced the belief that technology can be a force for good, connecting communities, and fostering positive change.