Rank Pro: Boost Your website's SEO
This is a submission for the KendoReact Free Components Challenge. What I Built RankProis your one-stop tool for comprehensively scanning your website's SEO factors and receiving tailored actionable tips to improve its SEO performance. Demo Live Site - rankpro GitHub Repo - Rank-Pro KendoReact Experience For this project, I utilized quite a few of the UI KendoReact components. Below is a list of them and how they were used. (Free components*) Floating Label (from label): This component helped me seamlessly create a stunning floating label feature for my input field. Input: This was used to receive the website URL to be analyzed. The above-mentioned components were used in conjunction to produce the following Loader (from indicators): I utilized this component to display a loading state when data is being fetched from an API. Button: This component was used to easily create different action buttons as well as a theme toggle button in the application as shown below. ProgressBar: This was used to display the percentage of a metric after the website analysis has been completed. TabStrip: This made it extremely easy to be able to create a seamless tab layout. TabStripTab: This was used to create the individual tab sections in the tab layout. (Premium components*) ChartSeries: ChartSeriesItem: ChartValueAxis: ChartValueAxisItem: ChartCategoryAxis: ChartCategoryAxisItem: AIm to Impress A unique feature of RankPro is to generate tailored optimization tips for the user based on their website's metrics. This was made possible by integrating the OPEN AI API, which analyzes the prefetched website metrics and provides detailed insights into optimizing the SEO of the queried website. I have to say, this was a fun one
This is a submission for the KendoReact Free Components Challenge.
What I Built
RankProis your one-stop tool for comprehensively scanning your website's SEO factors and receiving tailored actionable tips to improve its SEO performance.
Demo
Live Site - rankpro
GitHub Repo - Rank-Pro
KendoReact Experience
For this project, I utilized quite a few of the UI KendoReact components. Below is a list of them and how they were used.
(Free components*)
- Floating Label (from label): This component helped me seamlessly create a stunning floating label feature for my input field.
Input: This was used to receive the website URL to be analyzed.
The above-mentioned components were used in conjunction to produce the following
Loader (from indicators): I utilized this component to display a loading state when data is being fetched from an API.
- Button: This component was used to easily create different action buttons as well as a theme toggle button in the application as shown below.
- ProgressBar: This was used to display the percentage of a metric after the website analysis has been completed.
- TabStrip: This made it extremely easy to be able to create a seamless tab layout.
- TabStripTab: This was used to create the individual tab sections in the tab layout.
(Premium components*)
- ChartSeries:
- ChartSeriesItem:
- ChartValueAxis:
- ChartValueAxisItem:
- ChartCategoryAxis:
- ChartCategoryAxisItem:
AIm to Impress
A unique feature of RankPro is to generate tailored optimization tips for the user based on their website's metrics.
This was made possible by integrating the OPEN AI API, which analyzes the prefetched website metrics and provides detailed insights into optimizing the SEO of the queried website.
I have to say, this was a fun one
