Loading page…
Publicly listed on BSE · ISO 27001 & SOC 2 Type II certified
Publicly listed on BSE · ISO 27001 & SOC 2 Type II certified
CASE STUDY
ReactJS
StripeThis digital marketplace allows signed-in users to upload/sell/buy/access study notes and study materials online. User-uploaded study notes on this platform are available for free and paid access. Every note, however, undergoes a quality check and verification process by the platform admin. After they’re verified, they’re made accessible to the signed-in learners. Those preparing for semesters or professional exams can read these verified notes to brush up on their skills and do well in their lives.
The portal was already up and running. But, the problem was it lacked a polished UI design. The site had unappealing layouts. The colors and patterns were old-school. The overall structure was inconsistent. Moreover, it wasn’t even responsive to all mobile screens or orientations. UI concerns such as these led to bounced traffic and poor user engagement. So, the platform owner contacted Capital Numbers to redesign the website and give it a fresh facelift.
Our primary responsibility was not just a visual upgrade but also to incorporate custom features. For example, we needed to correctly place the window controls (buttons, menus, dropdowns, searches, etc.). Our team had to custom-design admin controls (super-admin, sub-user admins, etc.). A reliable payment gateway had to be added for users to buy/sell online notes. We also had to keep enough on-screen space for the interface to look clean.
We decided to go for Laravel as the backend architecture because its wealth of built-in tools make email, text, video, and styling integrations easy. Plus, it has authorization checks to verify new users before onboarding.
We used ReactJS to redesign the frontend. React is ideal for creating scalable and customizable interfaces. Its virtual DOM helps developers modify individual parts of a page without changing the overall layout, adding modularity to the structure.
We integrated Vue.js into this React app. Vue is lightweight and helps create visually-appealing apps. It also separates the UI from the app logic. So, if developers wanted, they could plug in a new desired template in the future without changing the underlying code, thus adding flexibility.
We added Stripe to facilitate reliable transactions within the portal. Stripe supports all popular payment methods around the world.
Instead of chasing after flashy items, we worked on just the custom elements like search filters, personalized dashboards, login systems, and the knowledge base. We made a few improvements around the CTAs, colors, headers, footers, and dropdowns to ensure they meet the brand's goals.
We subtracted all trash from the codebase to make it as simple as possible. Our experts used dependency injection to keep the codebase testable end-to-end. We hosted the redesigned website on the requested server once done with all the fine tunes and API call checks.
We completed the project within two months of its starting date. Here are a few of the frontend highlights:
Our team designed personalized dashboards for three main user groups, namely the:
We made the page layouts ready for optimal viewing across mobile screens.
Desktop and mobile users can now read the notes without constantly zooming in and out.
We enabled Facebook, Google, and email sign-ups for quicker registrations and reduced abandonment.
Our custom search box shows user-uploaded notes within seconds of the search request.
We also added a new feature that filters and serves up information like ‘most relevant’ or ‘most accessed’ notes.
Our clearly-labeled dropdowns help users find notes subject-wise, country-wise, course-wise, and institution-wise.
Currently, users can upload thousands of PDF notes without worrying about system lags.
Our well-positioned buttons, footers, headers, CTAs, menus, and other graphical elements make the UI more compact.
Our seamless Stripe integration allows users in the US, the UK, Canada, etc., safely buy/sell notes without transactional failures.
Capital Numbers' dedicated frontend team implemented the above under the expert supervision of its experienced Project Manager.
For a faster rollout, the team divided the entire project into smaller chunks and then shipped individual chunks in an agile manner.
The timely go-live was possible because of our agile approach. Impressed with the portal’s new look, the client realized how important it was to tie up with a trusted brand like us.
The all-new portal is cleaner, fresher, and better in aesthetics. Users enjoy its cross-device compatibility and freely navigate without feeling an information overload. There’s also an influx of new mobile traffic that the previous version lacked.