DW Education

React, NextJS, SWR, Redux, Stripe
DW Education
DW Education
DW Education

DW Education

React, NextJS, SWR, Redux, Stripe

One of the many platforms that Dental Whale offers is Dental Whale Education. This platform allows users in the dental industry to watch videos and purchase courses to earn CE Credits. Continued Education Credits (CE Credits) are credits that dentists must earn each year to continue practicing.

For this project, my team and I collaborated to build a React + NextJS application. A requirement for this project was to allow the user to preview content without being authenticated. For example, the user can browse content; however, once the user reaches a paid video, a paywall is displayed to collect payment via Stripe.

An additional challenge presented to my team was the need for pages within this application to be pre-rendered for SEO purposes. To achieve this, I implemented getServerSideProps, a NextJS function called on each request. Then, The data returned by getServerSideProps is passed to the page where the components are populated and rendered.

Other technologies used for this project include SWR, a library of react hooks used for data fetching. For example, SWR is utilized to refresh data returned from getServerSideProps after a set interval of time. Another instance where SWR is utilized is to fetch user data which is not needed for SEO purposes.

Finally, global state such as layout properties or user data is managed using React-Redux.