From ac88ba68ae83fae796a9355abf2f21f57622e782 Mon Sep 17 00:00:00 2001 From: Akash Singh Date: Sat, 27 Apr 2024 15:31:01 +0530 Subject: [PATCH] Add CodeVerse --- documentation/docusaurus.config.js | 2 +- documentation/plugins/templates.js | 411 +--------------- documentation/plugins/templates.ts | 439 +----------------- .../src/assets/integration-icons/cpp.tsx | 52 +++ .../src/assets/integration-icons/css.tsx | 32 ++ .../src/assets/integration-icons/html.tsx | 32 ++ .../src/assets/integration-icons/index.ts | 6 + .../src/assets/integration-icons/java.tsx | 46 ++ .../src/assets/integration-icons/js.tsx | 24 + .../src/assets/integration-icons/py.tsx | 24 + .../components/templates-detail-page/index.js | 8 +- .../src/context/CommunityStats/index.tsx | 20 +- .../src/pages/AkashSingh3031/index.tsx | 10 - documentation/src/pages/CodeVerse/index.tsx | 328 +++++++++++++ .../src/prepverse-theme/about-me-profile.tsx | 2 +- .../about-section/leetcode-section.tsx | 137 +++--- .../codeverse/dsa/dsa-topics.tsx | 302 ++++++++++++ .../prepverse-theme/codeverse/dsa/index.tsx | 64 +++ .../src/prepverse-theme/common-drawer.tsx | 2 +- .../icons/popover/instagram.tsx | 4 +- .../icons/social-tech/instagram-color.tsx | 4 +- .../src/prepverse-theme/template-detail.tsx | 171 +------ .../src/prepverse-theme/templates-filters.tsx | 51 +- .../src/prepverse-theme/templates-hero.tsx | 11 +- 24 files changed, 1069 insertions(+), 1113 deletions(-) create mode 100644 documentation/src/assets/integration-icons/cpp.tsx create mode 100644 documentation/src/assets/integration-icons/css.tsx create mode 100644 documentation/src/assets/integration-icons/html.tsx create mode 100644 documentation/src/assets/integration-icons/java.tsx create mode 100644 documentation/src/assets/integration-icons/js.tsx create mode 100644 documentation/src/assets/integration-icons/py.tsx create mode 100644 documentation/src/pages/CodeVerse/index.tsx create mode 100644 documentation/src/prepverse-theme/codeverse/dsa/dsa-topics.tsx create mode 100644 documentation/src/prepverse-theme/codeverse/dsa/index.tsx diff --git a/documentation/docusaurus.config.js b/documentation/docusaurus.config.js index 05dadc96..5eb6a3cb 100644 --- a/documentation/docusaurus.config.js +++ b/documentation/docusaurus.config.js @@ -162,7 +162,7 @@ const siteConfig = { "./plugins/examples.js", "./plugins/featureRequests/FeatureRequestsPlugin.js", "./plugins/intercom.js", - // "./plugins/templates.js", + "./plugins/templates.js", "./plugins/tutorial-navigation.js", [ "@docusaurus/plugin-content-docs", diff --git a/documentation/plugins/templates.js b/documentation/plugins/templates.js index a5268c67..75a143b3 100644 --- a/documentation/plugins/templates.js +++ b/documentation/plugins/templates.js @@ -1,9 +1,9 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); -async function RefineTemplates() { +async function PrepVerseTemplates() { return { - name: "docusaurus-plugin-refine-templates", + name: "docusaurus-plugin-prepverse-templates", contentLoaded: async (args) => { const { content, actions } = args; const { addRoute, createData } = actions; @@ -16,7 +16,7 @@ async function RefineTemplates() { ); addRoute({ - path: `/templates/${data.slug}`, + path: `/CodeVerse/${data.slug}`, component: "@site/src/components/templates-detail-page/index", exact: true, @@ -32,14 +32,14 @@ async function RefineTemplates() { }, }; } -exports.default = RefineTemplates; +exports.default = PrepVerseTemplates; const templates = [ { - slug: "crm-application", - title: "CRM Application", + slug: "dsa", + title: "Data Structure and Algorithm", images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-refine-crm.jpg", + "https://miro.medium.com/v2/resize:fit:1358/1*4ZcW5tSdizlbtDQyVpRTuA.jpeg", ], runOnYourLocalPath: "app-crm", liveDemo: "https://example.crm.refine.dev/", @@ -48,51 +48,11 @@ const templates = [ uiFramework: "Ant Design", dataProvider: "Nestjs-query", authProvider: "Custom", - description: ` -This CRM app example, built with Refine, demonstrates a complete solution for enterprise-level CRM internal tool needs. It has a wide range of functionalities for real-use cases, which are extensively utilized by enterprise companies. - -The app connected to GraphQL API through Refine's Nestjs-query data provider, and its user interface is developed using Ant Design, which Refine offers built-in UI framework support. - -We built this template to demonstrate how the Refine framework simplifies and speeds up development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. - -The source code of the CRM app is also open-source; feel free to use or inspect it to discover how Refine works. Being production-ready, you can either build your own CRM internal tool using it as a code base or directly implement it as is. - - -### Key Features: - - -- **Dashboard**: Overview of CRM activities, key metrics, and customer interactions. -- **Calendar**: Manage appointments and events. -- **Scrumboard-Project Kanban**: Streamline project management and task tracking. -- **Sales Pipeline**: Visualize sales stages and track lead conversions. -- **Companies**: Organize business contacts with detailed profiles. -- **Contacts**: Efficient management of individual customer interactions. -- **Quotes**: Create, send, and manage customer quotes. -- **Administration**: Customize CRM settings, user roles, and permissions. - - -This CRM app template can be used in for various app requirements like B2B applications, internal tools, admin panel, dashboard and all CRUD applications, providing a comprehensive platform for: - -- Human Resource Management (HRM) Tools -- IT Service Management (ITSM) Tools -- Network Monitoring Tools -- Risk Management Tools -- Customer Support Tools -- Financial Planning Systems -- Customer Analytics Tools -- Inventory Management Systems -- Supply Chain Management Tools -- Retail Management Systems -- Business Intelligence Tools -- Electronic Health Record (EHR) Systems -- Patient Management Systems -- Health Information Exchange (HIE) Systems -- Pharmacy Management Systems -`, + description: ``, }, { - slug: "next-js-tailwind", - title: "E-Commerce Application Storefront", + slug: "cp", + title: "Competitive Programming", images: [ "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-storefront.jpg", ], @@ -103,353 +63,6 @@ This CRM app template can be used in for various app requirements like B2B appli uiFramework: "Headless", dataProvider: "Rest API", authProvider: "Custom", - description: ` -This is a template that can serve as an example for building React-based storefronts, admin panels, or internal tools using Refine. Implemented popular tools like Tailwind CSS and Next.js, which are highly demanded by the community. - -### Key Features: - -- With Refine's headless approach, we demonstrated how to apply a style of your choice, such as Tailwind CSS. -- SSR support with Next.js. Refine supports SSR with Next.js and Remix. You can use this template as a starter point for Next.js-powered Refine apps. -- REST API implementation - -The source code is also open-source; feel free to use or inspect it to discover how to Refine works with any custom designs & UI library and supports SSR with Next.js.`, - }, - { - slug: "react-admin-panel", - title: "B2B Admin Panel with Material UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-finefoods-material-ui.jpg", - ], - runOnYourLocalPath: "finefoods-material-ui", - liveDemo: "https://example.mui.admin.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/finefoods-material-ui", - reactPlatform: "Vite", - uiFramework: "Material UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This example of a React admin panel, built with Refine, provides a comprehensive solution for the needs of enterprise-level admin panels. It features a full range of functionalities typical in products used by enterprise companies. - -The admin panel connects to a REST API using a Simple REST data provider. Its user interface is developed with Material UI, which Refine offers built-in UI framework support. - -We built this template to showcase the efficiency and ease of using the Refine framework in development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. As it's ready for production, you can use this template as a foundation to build your own React admin panel or implement it as it is. - -The template is open-source, so you can freely use or examine it to understand how Refine works. - -### Key Features: - -- **Dashboard**: Get an overview of food ordering activities, track product performance, and view insightful charts. -- **Orders**: Manage, track, and filter all customer orders. -- **Users**: Administer customer and courier accounts and data. -- **Stores**: View and manage the list of participating stores. -- **Categories**: Categorize and organize menu items and store types. -- **Couriers**: Monitor and manage courier activity and interactions. -- **Reviews**: Handle customer feedback, review ratings, and respond to comments. - -This admin panel template can be used for various app requirements like B2B applications, internal tools, admin panel, dashboard, and all CRUD applications, providing a comprehensive platform for managing order interactions, restaurant management, and sales processes.`, - }, - { - slug: "react-admin-panel-ant-design", - title: "B2B Internal tool with Ant Design", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-finefoods-ant-design.jpg", - ], - runOnYourLocalPath: "finefoods-antd", - liveDemo: "https://example.admin.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/finefoods-antd", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This example of a B2B React admin panel, built with Refine, provides a comprehensive solution for the needs of enterprise-level internal tools. It features a full range of functionalities typical in products used by enterprise companies. - -The admin panel connects to a REST API using a Simple REST data provider. Its user interface is developed with Ant Design, which Refine offers built-in UI framework support. - -We built this template to showcase the efficiency and ease of using the Refine framework in development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. As it's ready for production, you can use this template as a foundation to build your own React admin panel or implement it as it is. - -The template is open-source, so you can freely use or examine it to understand how Refine works. - - -### Key Features: - -- **Dashboard**: Get an overview of food ordering activities, track product performance, and view insightful charts. -- **Orders**: Manage, track, and filter all customer orders. -- **Users**: Administer customer and courier accounts and data. -- **Stores**: View and manage the list of participating stores. -- **Categories**: Categorize and organize menu items and store types. -- **Couriers**: Monitor and manage courier activity and interactions. -- **Reviews**: Handle customer feedback, review ratings, and respond to comments. - -This admin panel template can be used in for various app requirements like B2B applications, internal tools, admin panel, dashboard and all CRUD applications, providing a comprehensive platform for managing order interactions, restaurant management, and sales processes.`, - }, - { - slug: "next-js-ecommerce-store", - title: "Swag Store", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-store.jpg", - ], - runOnYourLocalPath: "store", - liveDemo: "https://store.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/store", - reactPlatform: "Next.js", - uiFramework: "Ant Design", - dataProvider: "Medusa", - authProvider: "Medusa", - description: ` -This template is a comprehensive e-commerce storefront app created using Refine, Medusa.js, Next.js, and Stripe, encompassing all the necessary features for an e-commerce web application. Its source code is open-source, allowing you to freely use or explore it to gain a deeper understanding of how Refine integrates with Next.js and Tailwind CSS. - -The app interfaces with the Medusa API through Refine's Medusa data provider, and its user interface is crafted with Tailwind CSS. This template is designed to showcase the effectiveness of the Refine framework in streamlining and accelerating the development process for storefront apps, providing an optimal approach to using Refine in storefront app development. - -With its production-ready status, this template offers a solid foundation for building your own storefront, whether you choose to use it as a starting point or implement it directly as it is. - - -### Key Features: - -- **Authentication & Authorization**: Securely manages user logins and permissions. -- **Product Listing**: Displays a catalog of products available for purchase. -- **Account Information Pages**: Allows users to view and edit their account details. -- **Product Detail**: Provides detailed information about each product, including descriptions, prices, and images. -- **Shopping Cart**: Enables customers to add products to a virtual cart and manage their selections before checkout. -- **Payment with Stripe**: Offers a secure payment system through Stripe for processing transactions. -- **Gift Code Feature**: Allows gift codes for discounts or special offers during the checkout process. -- **Email Send and Verification**: Handles the sending of emails for purposes like account verification and marketing, and verifies email addresses. - `, - }, - { - slug: "supabase-crud-app", - title: "Pixels", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-pixels.jpg", - ], - runOnYourLocalPath: "pixels", - liveDemo: "https://pixels.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/pixels", - tutorial: "https://refine.dev/week-of-refine-supabase/", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Supabase", - authProvider: "Supabase", - description: ` -This example presents the RefineWeek series - a seven-part quickfire guide to help developers learn the ins and outs of Refine and Supabase's powerful capabilities and get going with Refine within a week. - -The source code for this CRUD app is open-source, providing an opportunity for you to use or examine it to gain a deeper understanding of how Refine operates. The CRM application featured in this series utilizes a Supabase API through Refine's Supabase data provider, and its user interface is crafted using Ant Design. - -This CRM application consumes a Supabase API through Refine's Supabase data provider, and its user interface is developed using Ant Design, which Refine offers built-in UI framework support. - -We built this template to demonstrate how the Refine framework simplifies and speeds up development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. - -### Key Features: - -- **Realtime Collaboration Features**: Implements real-time updates using Supabase's Realtime for collaborative canvas drawing. -- **Role-Based Authorization**: Incorporates user role-based authorization with different permissions for editors and admins. -- **Audit Logging**: Implements an audit log for tracking pixel drawing activities in both the client and admin apps. - `, - }, - { - slug: "react-pdf-invoice-generator", - title: "Invoice Generator - Internal Tool", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-invoice-generator.jpg", - ], - runOnYourLocalPath: "refine-week-invoice-generator", - liveDemo: "https://invoice-generator.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/refine-week-invoice-generator", - tutorial: "https://refine.dev/week-of-refine-strapi/", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Strapi", - authProvider: "Strapi", - description: ` -The Invoicer is a template for an internal tool created as part of the #RefineWeek series, integrating Refine, Strapi, and Ant Design technologies. It's designed for users to manage company registrations, client and contact additions, task creations, and invoice issuance. A standout feature of this app is its ability to generate PDF invoices, enabling the creation of professional documents. - -With its PDF generation feature, this open-source internal tool template is ideal for understanding Refine's capabilities. The app uses Strapi for data management, connecting through a Strapi data provider. Its interface is crafted using Ant Design, supported natively by Refine for a seamless UI experience. - -We built this template to showcase the efficiency and ease of using the Refine framework in development along with third-party API management tools. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. Being production-ready, this template can serve as a solid base for developing your own React-based internal tools, or it can be used as-is for immediate implementation. - - - -### Key Features - -- **Comprehensive CRUD Operations**: The app supports CRUD functionalities for companies, clients, contacts, missions, and invoices. -- **Authentication and Authorization**: Implements secure user authentication and role-based permissions using Refine's authProvider. -- **PDF Invoice Generation**: Includes the capability to generate and view PDF documents of invoices using the @react-pdf/renderer package. - `, - }, - { - slug: "win-95-style-admin-panel", - title: "Win95 Style Admin Panel", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-win95.jpg", - ], - runOnYourLocalPath: "blog-win95", - liveDemo: "https://win95.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/blog-win95", - tutorial: - "https://refine.dev/blog/awesome-react-windows95-ui-with-refine/", - reactPlatform: "Vite", - uiFramework: "Headless", - dataProvider: "Supabase", - authProvider: "Supabase", - description: ` -This Fun CRUD app example demonstrates how you can customize the Refine app design for specific needs. It is connected to a Supabase backend through Refine’s Supabase data provider and its user interface is developed using [React95](https://github.com/React95/React95). - -The source code of the CRUD app is also open-source; feel free to use or inspect it to discover how Refine works along with external UI packages. - `, - }, - { - slug: "react-crud-app", - title: "Realworld Example", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-realworld.jpg", - ], - runOnYourLocalPath: "real-world-example", - liveDemo: "https://refine-real-world.netlify.app/", - github: "https://github.com/refinedev/real-world-example", - reactPlatform: "Vite", - uiFramework: "Headless", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This RealWorld app template displays a comprehensive full-stack application created using Refine, including features like CRUD operations, user authentication, routing, and pagination, among others. - -The RealWorld example standard, often called the "Mother of All Demo Apps," is a specification for building full-stack applications that demonstrate real-world usage of various frontend and backend technologies. This standard provides consistent requirements for creating functionally equivalent applications across different technology stacks. - -This RealWorld example aims to demonstrate the practical use of Refine in building standards and real-world applications, providing a more authentic and useful example than the usual "to-do list" demonstrations. - -Since the source code of this RealWorld app is open-source, you have the freedom to use or explore it to gain insights into the workings of Refine and its integration with Next.js and Tailwind CSS. - - -### Key Features -- Authenticate users via JWT (login/register pages + logout button on settings page) -- CRUD users (sign up & settings page - no deleting required) -- CRUD Articles -- CRUD Comments on articles (no updating required) -- GET and display paginated lists of articles -- Favorite articles -- Follow other users -`, - }, - { - slug: "multitenancy-strapi", - title: "Multitenancy App with Strapi", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.jpg", - ], - runOnYourLocalPath: "multi-tenancy-strapi", - liveDemo: "https://multi-tenancy-strapi.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/multi-tenancy-strapi", - tutorial: - "https://refine.dev/docs/guides-concepts/multi-tenancy/#strapi", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Strapi", - authProvider: "Strapi", - description: ` -Multitenancy is a design approach where a single software instance on a server provides services to multiple clients at the same time. This CRUD app template is an excellent example of implementing multitenant architecture in Refine applications. It connects to a Strapi API using a Strapi data provider and features a user interface developed with Ant Design, which is natively supported by Refine. - -This template was developed to demonstrate how the Refine framework can simplify and expedite the development of apps with enterprise-level needs. It's a valuable resource that offers insights into Refine's best practices and modern development techniques. - -The source code of this multitenancy app is open-source, allowing you to use or inspect it to see how Refine can fulfill enterprise-grade application requirements. - `, - }, - { - slug: "multitenancy-appwrite", - title: "Multitenancy App with Appwrite", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-appwrite.jpg", - ], - runOnYourLocalPath: "multi-tenancy-appwrite", - liveDemo: "https://multi-tenancy-appwrite.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/multi-tenancy-appwrite", - tutorial: - "https://refine.dev/docs/guides-concepts/multi-tenancy/#appwrite", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Appwrite", - authProvider: "Appwrite", - description: ` -Multitenancy is a design approach where a single software instance on a server provides services to multiple clients at the same time. This CRUD app template is an excellent example of implementing multitenant architecture in Refine applications. It connects to a Appwrite API using a Appwrite data provider and features a user interface developed with Ant Design, which is natively supported by Refine. - -This template was developed to demonstrate how the Refine framework can simplify and expedite the development of apps with enterprise-level needs. It's a valuable resource that offers insights into Refine's best practices and modern development techniques. - -The source code of this multitenancy app is open-source, allowing you to use or inspect it to see how Refine can fulfill enterprise-grade application requirements. - `, - }, - { - slug: "ant-design-template", - title: "Internal tool template with Ant Design ", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-ant-design-template.jpg", - ], - runOnYourLocalPath: "auth-antd", - liveDemo: - "https://codesandbox.io/p/sandbox/github/refinedev/refine/tree/master/examples/auth-antd", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-antd", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Material UI. Features authentication and CRUD screens. - `, - }, - { - slug: "material-ui-template", - title: "Generic Internal Tool Template with Material UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-material-ui-template.jpg", - ], - runOnYourLocalPath: "auth-material-ui", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-material-ui", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-material-ui", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Material UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Material UI. Features authentication and CRUD screens. - `, - }, - { - slug: "mantine-template", - title: "Generic Internal Tool Template with Mantine", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-mantine-template.jpg", - ], - runOnYourLocalPath: "auth-mantine", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-mantine", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-mantine", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Mantine", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Mantine. Features authentication and CRUD screens. - `, - }, - { - slug: "chakra-ui-template", - title: "Generic Internal Tool Template with Chakra UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-chakra-ui-template.jpg", - ], - runOnYourLocalPath: "auth-chakra-ui", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-chakra-ui", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-chakra-ui", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Chakra UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete admin panel template built with Chakra UI. Features authentication and CRUD screens. - `, + description: ``, }, -]; +]; \ No newline at end of file diff --git a/documentation/plugins/templates.ts b/documentation/plugins/templates.ts index 3d5001e1..a2e2329f 100644 --- a/documentation/plugins/templates.ts +++ b/documentation/plugins/templates.ts @@ -1,8 +1,8 @@ import type { Plugin } from "@docusaurus/types"; -export default async function RefineTemplates(): Promise { +export default async function PrepVeeseTemplates(): Promise { return { - name: "docusaurus-plugin-refine-templates", + name: "docusaurus-plugin-prepverse-templates", contentLoaded: async (args) => { const { content, actions } = args; const { addRoute, createData } = actions; @@ -15,7 +15,7 @@ export default async function RefineTemplates(): Promise { ); addRoute({ - path: `/templates/${data.slug}`, + path: `/dsa/${data.slug}`, component: "@site/src/components/templates-detail-page/index", exact: true, @@ -34,8 +34,8 @@ export default async function RefineTemplates(): Promise { const templates = [ { - slug: "crm-application", - title: "CRM Application", + slug: "dsa", + title: "Data Structure and Algorithm", images: [ "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-refine-crm.jpg", ], @@ -46,52 +46,11 @@ const templates = [ uiFramework: "Ant Design", dataProvider: "Nestjs-query", authProvider: "Custom", - description: ` -This CRM app example, built with Refine, demonstrates a complete solution for enterprise-level CRM internal tool needs. It has a wide range of functionalities for real-use cases, which are extensively utilized by enterprise companies. - -The app connected to GraphQL API through Refine's Nestjs-query data provider, and its user interface is developed using Ant Design, which Refine offers built-in UI framework support. - -We built this template to demonstrate how the Refine framework simplifies and speeds up development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. - -The source code of the CRM app is also open-source; feel free to use or inspect it to discover how Refine works. Being production-ready, you can either build your own CRM internal tool using it as a code base or directly implement it as is. - - -### Key Features: - - -- **Dashboard**: Overview of CRM activities, key metrics, and customer interactions. -- **Calendar**: Manage appointments and events. -- **Scrumboard-Project Kanban**: Streamline project management and task tracking. -- **Sales Pipeline**: Visualize sales stages and track lead conversions. -- **Companies**: Organize business contacts with detailed profiles. -- **Contacts**: Efficient management of individual customer interactions. -- **Quotes**: Create, send, and manage customer quotes. -- **Administration**: Customize CRM settings, user roles, and permissions. - - -This CRM app template can be used in for various app requirements like B2B applications, internal tools, admin panel, dashboard. Such as: - -- Human Resource Management (HRM) Tools -- IT Service Management (ITSM) Tools -- Network Monitoring Tools -- Risk Management Tools -- Customer Support Tools -- Financial Planning Systems -- Customer Analytics Tools -- Inventory Management Systems, -- Sales and Marketing Tools, -- Supply Chain Management Tools -- Retail Management Systems -- Business Intelligence Tools -- Electronic Health Record (EHR) Systems -- Patient Management Systems -- Health Information Exchange (HIE) Systems -- Pharmacy Management Systems -`, + description: ``, }, { - slug: "next-js-tailwind", - title: "E-Commerce Application Storefront", + slug: "cp", + title: "Competitive Programming", images: [ "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-storefront.jpg", ], @@ -102,384 +61,6 @@ This CRM app template can be used in for various app requirements like B2B appli uiFramework: "Headless", dataProvider: "Rest API", authProvider: "Custom", - description: ` -This is a template that can serve as an example for building React-based storefronts, admin panels, or internal tools using Refine. Implemented popular tools like Tailwind CSS and Next.js, which are highly demanded by the community. - -### Key Features: - -- With Refine's headless approach, we demonstrated how to apply a style of your choice, such as Tailwind CSS. -- SSR support with Next.js. Refine supports SSR with Next.js and Remix. You can use this template as a starter point for Next.js-powered Refine apps. -- REST API implementation - -The source code is also open-source; feel free to use or inspect it to discover how to Refine works with any custom designs & UI library and supports SSR with Next.js.`, - }, - { - slug: "react-admin-panel", - title: "B2B Admin Panel with Material UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-finefoods-material-ui.jpg", - ], - runOnYourLocalPath: "finefoods-material-ui", - liveDemo: "https://example.mui.admin.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/finefoods-material-ui", - reactPlatform: "Vite", - uiFramework: "Material UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This example of a React admin panel, built with Refine, provides a comprehensive solution for the needs of enterprise-level admin panels. It features a full range of functionalities typical in products used by enterprise companies. - -The admin panel connects to a REST API using a Simple REST data provider. Its user interface is developed with Material UI, which Refine offers built-in UI framework support. - -We built this template to showcase the efficiency and ease of using the Refine framework in development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. As it's ready for production, you can use this template as a foundation to build your own React admin panel or implement it as it is. - -The template is open-source, so you can freely use or examine it to understand how Refine works. - -### Key Features: - -- **Dashboard**: Get an overview of food ordering activities, track product performance, and view insightful charts. -- **Orders**: Manage, track, and filter all customer orders. -- **Users**: Administer customer and courier accounts and data. -- **Stores**: View and manage the list of participating stores. -- **Categories**: Categorize and organize menu items and store types. -- **Couriers**: Monitor and manage courier activity and interactions. -- **Reviews**: Handle customer feedback, review ratings, and respond to comments. - -This admin panel template can be used in for various app requirements like B2B applications, internal tools, admin panel, dashboard. Such as: - -- Food Ordering Systems -- Restaurant management Systems -- Portfolio Management Software -- Data Integration Tools -- Healthcare Analytics Software -- Telemedicine Platforms -- Customer Support Tools -- Financial Planning Systems -- Customer Analytics Tools -- Inventory Management Systems -- Workforce Management Systems -- Electronic Health Record (EHR) Systems -- Patient Management Systems -`, - }, - { - slug: "react-admin-panel-ant-design", - title: "B2B Internal tool with Ant Design", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-finefoods-ant-design.jpg", - ], - runOnYourLocalPath: "finefoods-antd", - liveDemo: "https://example.admin.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/finefoods-antd", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This example of a B2B React admin panel, built with Refine, provides a comprehensive solution for the needs of enterprise-level internal tools. It features a full range of functionalities typical in products used by enterprise companies. - -The admin panel connects to a REST API using a Simple REST data provider. Its user interface is developed with Ant Design, which Refine offers built-in UI framework support. - -We built this template to showcase the efficiency and ease of using the Refine framework in development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. As it's ready for production, you can use this template as a foundation to build your own React admin panel or implement it as it is. - -The template is open-source, so you can freely use or examine it to understand how Refine works. - - -### Key Features: - -- **Dashboard**: Get an overview of food ordering activities, track product performance, and view insightful charts. -- **Orders**: Manage, track, and filter all customer orders. -- **Users**: Administer customer and courier accounts and data. -- **Stores**: View and manage the list of participating stores. -- **Categories**: Categorize and organize menu items and store types. -- **Couriers**: Monitor and manage courier activity and interactions. -- **Reviews**: Handle customer feedback, review ratings, and respond to comments. - -This admin panel template can be used in for various app requirements like B2B applications, internal tools, admin panel, dashboard. Such as: - -- Food Ordering Systems -- Restaurant management Systems -- Portfolio Management Software -- Data Integration Tools -- Healthcare Analytics Software -- Telemedicine Platforms -- Customer Support Tools -- Financial Planning Systems -- Customer Analytics Tools -- Inventory Management Systems -- Workforce Management Systems -- Electronic Health Record (EHR) Systems -- Patient Management Systems - -`, - }, - { - slug: "next-js-ecommerce-store", - title: "Swag Store", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-store.jpg", - ], - runOnYourLocalPath: "store", - liveDemo: "https://store.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/store", - reactPlatform: "Next.js", - uiFramework: "Ant Design", - dataProvider: "Medusa", - authProvider: "Medusa", - description: ` -This template is a comprehensive e-commerce storefront app created using Refine, Medusa.js, Next.js, and Stripe, encompassing all the necessary features for an e-commerce web application. Its source code is open-source, allowing you to freely use or explore it to gain a deeper understanding of how Refine integrates with Next.js and Tailwind CSS. - -The app interfaces with the Medusa API through Refine's Medusa data provider, and its user interface is crafted with Tailwind CSS. This template is designed to showcase the effectiveness of the Refine framework in streamlining and accelerating the development process for storefront apps, providing an optimal approach to using Refine in storefront app development. - -With its production-ready status, this template offers a solid foundation for building your own storefront, whether you choose to use it as a starting point or implement it directly as it is. - - -### Key Features: - -- **Authentication & Authorization**: Securely manages user logins and permissions. -- **Product Listing**: Displays a catalog of products available for purchase. -- **Account Information Pages**: Allows users to view and edit their account details. -- **Product Detail**: Provides detailed information about each product, including descriptions, prices, and images. -- **Shopping Cart**: Enables customers to add products to a virtual cart and manage their selections before checkout. -- **Payment with Stripe**: Offers a secure payment system through Stripe for processing transactions. -- **Gift Code Feature**: Allows gift codes for discounts or special offers during the checkout process. -- **Email Send and Verification**: Handles the sending of emails for purposes like account verification and marketing, and verifies email addresses. - `, - }, - { - slug: "supabase-crud-app", - title: "Pixels", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-pixels.jpg", - ], - runOnYourLocalPath: "pixels", - liveDemo: "https://pixels.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/pixels", - tutorial: "https://refine.dev/week-of-refine-supabase/", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Supabase", - authProvider: "Supabase", - description: ` -This example presents the RefineWeek series - a seven-part quickfire guide to help developers learn the ins and outs of Refine and Supabase's powerful capabilities and get going with Refine within a week. - -The source code for this CRUD app is open-source, providing an opportunity for you to use or examine it to gain a deeper understanding of how Refine operates. The CRM application featured in this series utilizes a Supabase API through Refine's Supabase data provider, and its user interface is crafted using Ant Design. - -This CRM application consumes a Supabase API through Refine's Supabase data provider, and its user interface is developed using Ant Design, which Refine offers built-in UI framework support. - -We built this template to demonstrate how the Refine framework simplifies and speeds up development. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. - -### Key Features: - -- **Realtime Collaboration Features**: Implements real-time updates using Supabase's Realtime for collaborative canvas drawing. -- **Role-Based Authorization**: Incorporates user role-based authorization with different permissions for editors and admins. -- **Audit Logging**: Implements an audit log for tracking pixel drawing activities in both the client and admin apps. - `, - }, - { - slug: "react-pdf-invoice-generator", - title: "Invoice Generator - Internal Tool", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-invoice-generator.jpg", - ], - runOnYourLocalPath: "refine-week-invoice-generator", - liveDemo: "https://invoice-generator.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/refine-week-invoice-generator", - tutorial: "https://refine.dev/week-of-refine-strapi/", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Strapi", - authProvider: "Strapi", - description: ` -The Invoicer is a template for an internal tool created as part of the #RefineWeek series, integrating Refine, Strapi, and Ant Design technologies. It's designed for users to manage company registrations, client and contact additions, task creations, and invoice issuance. A standout feature of this app is its ability to generate PDF invoices, enabling the creation of professional documents. - -With its PDF generation feature, this open-source internal tool template is ideal for understanding Refine's capabilities. The app uses Strapi for data management, connecting through a Strapi data provider. Its interface is crafted using Ant Design, supported natively by Refine for a seamless UI experience. - -We built this template to showcase the efficiency and ease of using the Refine framework in development along with third-party API management tools. It is a valuable resource, offering insights into Refine's best practices and modern development techniques. Being production-ready, this template can serve as a solid base for developing your own React-based internal tools, or it can be used as-is for immediate implementation. - - - -### Key Features - -- **Comprehensive CRUD Operations**: The app supports CRUD functionalities for companies, clients, contacts, missions, and invoices. -- **Authentication and Authorization**: Implements secure user authentication and role-based permissions using Refine's authProvider. -- **PDF Invoice Generation**: Includes the capability to generate and view PDF documents of invoices using the @react-pdf/renderer package. - `, - }, - { - slug: "win-95-style-admin-panel", - title: "Win95 Style Admin Panel", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-win95.jpg", - ], - runOnYourLocalPath: "blog-win95", - liveDemo: "https://win95.refine.dev/", - github: "https://github.com/refinedev/refine/tree/master/examples/blog-win95", - tutorial: - "https://refine.dev/blog/awesome-react-windows95-ui-with-refine/", - reactPlatform: "Vite", - uiFramework: "Headless", - dataProvider: "Supabase", - authProvider: "Supabase", - description: ` -This Fun CRUD app example demonstrates how you can customize the Refine app design for specific needs. It is connected to a Supabase backend through Refine’s Supabase data provider and its user interface is developed using [React95](https://github.com/React95/React95). - -The source code of the CRUD app is also open-source; feel free to use or inspect it to discover how Refine works along with external UI packages. - `, - }, - { - slug: "react-crud-app", - title: "Realworld Example", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-realworld.jpg", - ], - runOnYourLocalPath: "real-world-example", - liveDemo: "https://refine-real-world.netlify.app/", - github: "https://github.com/refinedev/real-world-example", - reactPlatform: "Vite", - uiFramework: "Headless", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -This RealWorld app template displays a comprehensive full-stack application created using Refine, including features like CRUD operations, user authentication, routing, and pagination, among others. - -The RealWorld example standard, often called the "Mother of All Demo Apps," is a specification for building full-stack applications that demonstrate real-world usage of various frontend and backend technologies. This standard provides consistent requirements for creating functionally equivalent applications across different technology stacks. - -This RealWorld example aims to demonstrate the practical use of Refine in building standards and real-world applications, providing a more authentic and useful example than the usual "to-do list" demonstrations. - -Since the source code of this RealWorld app is open-source, you have the freedom to use or explore it to gain insights into the workings of Refine and its integration with Next.js and Tailwind CSS. - - -### Key Features -- Authenticate users via JWT (login/register pages + logout button on settings page) -- CRUD users (sign up & settings page - no deleting required) -- CRUD Articles -- CRUD Comments on articles (no updating required) -- GET and display paginated lists of articles -- Favorite articles -- Follow other users -`, - }, - { - slug: "multitenancy-strapi", - title: "Multitenancy App with Strapi", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-strapi.jpg", - ], - runOnYourLocalPath: "multi-tenancy-strapi", - liveDemo: "https://multi-tenancy-strapi.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/multi-tenancy-strapi", - tutorial: - "https://refine.dev/docs/guides-concepts/multi-tenancy/#strapi", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Strapi", - authProvider: "Strapi", - description: ` -Multitenancy is a design approach where a single software instance on a server provides services to multiple clients at the same time. This CRUD app template is an excellent example of implementing multitenant architecture in Refine applications. It connects to a Strapi API using a Strapi data provider and features a user interface developed with Ant Design, which is natively supported by Refine. - -This template was developed to demonstrate how the Refine framework can simplify and expedite the development of apps with enterprise-level needs. It's a valuable resource that offers insights into Refine's best practices and modern development techniques. - -The source code of this multitenancy app is open-source, allowing you to use or inspect it to see how Refine can fulfill enterprise-grade application requirements. - `, - }, - { - slug: "multitenancy-appwrite", - title: "Multitenancy App with Appwrite", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-multitenancy-appwrite.jpg", - ], - runOnYourLocalPath: "multi-tenancy-appwrite", - liveDemo: "https://multi-tenancy-appwrite.refine.dev", - github: "https://github.com/refinedev/refine/tree/master/examples/multi-tenancy-appwrite", - tutorial: - "https://refine.dev/docs/guides-concepts/multi-tenancy/#appwrite", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Appwrite", - authProvider: "Appwrite", - description: ` -Multitenancy is a design approach where a single software instance on a server provides services to multiple clients at the same time. This CRUD app template is an excellent example of implementing multitenant architecture in Refine applications. It connects to a Appwrite API using a Appwrite data provider and features a user interface developed with Ant Design, which is natively supported by Refine. - -This template was developed to demonstrate how the Refine framework can simplify and expedite the development of apps with enterprise-level needs. It's a valuable resource that offers insights into Refine's best practices and modern development techniques. - -The source code of this multitenancy app is open-source, allowing you to use or inspect it to see how Refine can fulfill enterprise-grade application requirements. - `, - }, - { - slug: "ant-design-template", - title: "Internal tool template with Ant Design ", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-ant-design-template.jpg", - ], - runOnYourLocalPath: "auth-antd", - liveDemo: - "https://codesandbox.io/p/sandbox/github/refinedev/refine/tree/master/examples/auth-antd", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-antd", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Ant Design", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Material UI. Features authentication and CRUD screens. - `, - }, - { - slug: "material-ui-template", - title: "Generic Internal Tool Template with Material UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-material-ui-template.jpg", - ], - runOnYourLocalPath: "auth-material-ui", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-material-ui", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-material-ui", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Material UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Material UI. Features authentication and CRUD screens. - `, - }, - { - slug: "mantine-template", - title: "Generic Internal Tool Template with Mantine", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-mantine-template.jpg", - ], - runOnYourLocalPath: "auth-mantine", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-mantine", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-mantine", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Mantine", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete internal tool template built with Mantine. Features authentication and CRUD screens. - `, - }, - { - slug: "chakra-ui-template", - title: "Generic Internal Tool Template with Chakra UI", - images: [ - "https://refine.ams3.cdn.digitaloceanspaces.com/templates/detail-chakra-ui-template.jpg", - ], - runOnYourLocalPath: "auth-chakra-ui", - liveDemo: - "https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/auth-chakra-ui", - github: "https://github.com/refinedev/refine/tree/master/examples/auth-chakra-ui", - tutorial: "https://refine.dev/tutorial", - reactPlatform: "Vite", - uiFramework: "Chakra UI", - dataProvider: "Rest API", - authProvider: "Custom", - description: ` -Complete admin panel template built with Chakra UI. Features authentication and CRUD screens. - `, + description: ``, }, -]; +]; \ No newline at end of file diff --git a/documentation/src/assets/integration-icons/cpp.tsx b/documentation/src/assets/integration-icons/cpp.tsx new file mode 100644 index 00000000..284eff27 --- /dev/null +++ b/documentation/src/assets/integration-icons/cpp.tsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgCpp = (props: SVGProps) => ( + + + + + + + + + + + + + + +); + +export default SvgCpp; diff --git a/documentation/src/assets/integration-icons/css.tsx b/documentation/src/assets/integration-icons/css.tsx new file mode 100644 index 00000000..6bc0d8e3 --- /dev/null +++ b/documentation/src/assets/integration-icons/css.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgCSS = (props: SVGProps) => ( + + + + + + + + + + +); + +export default SvgCSS; diff --git a/documentation/src/assets/integration-icons/html.tsx b/documentation/src/assets/integration-icons/html.tsx new file mode 100644 index 00000000..992c1e02 --- /dev/null +++ b/documentation/src/assets/integration-icons/html.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgHTML = (props: SVGProps) => ( + + + + + + + + + + +); + +export default SvgHTML; diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts index 068a6083..5e84c3bb 100644 --- a/documentation/src/assets/integration-icons/index.ts +++ b/documentation/src/assets/integration-icons/index.ts @@ -54,3 +54,9 @@ export { default as Oracle } from "./oracle"; export { default as RestWithoutText } from "./rest-without-text"; export { default as CustomAuth } from "./custom-auth"; export { default as Vite } from "./vite"; +export { default as Cpp } from "./cpp"; +export { default as Python } from "./py"; +export { default as Java } from "./java"; +export { default as HTML } from "./html"; +export { default as CSS } from "./css"; +export { default as JavaScript } from "./js"; diff --git a/documentation/src/assets/integration-icons/java.tsx b/documentation/src/assets/integration-icons/java.tsx new file mode 100644 index 00000000..2ef45953 --- /dev/null +++ b/documentation/src/assets/integration-icons/java.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgJava = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + +); + +export default SvgJava; diff --git a/documentation/src/assets/integration-icons/js.tsx b/documentation/src/assets/integration-icons/js.tsx new file mode 100644 index 00000000..f404ab98 --- /dev/null +++ b/documentation/src/assets/integration-icons/js.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgJs = (props: SVGProps) => ( + + + + + + +); + +export default SvgJs; diff --git a/documentation/src/assets/integration-icons/py.tsx b/documentation/src/assets/integration-icons/py.tsx new file mode 100644 index 00000000..e0cafa50 --- /dev/null +++ b/documentation/src/assets/integration-icons/py.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SvgPy = (props: SVGProps) => ( + + + + + + +); + +export default SvgPy; diff --git a/documentation/src/components/templates-detail-page/index.js b/documentation/src/components/templates-detail-page/index.js index 65171df2..6dd08b6a 100644 --- a/documentation/src/components/templates-detail-page/index.js +++ b/documentation/src/components/templates-detail-page/index.js @@ -7,17 +7,17 @@ const TemplatesDetailPage = (props) => { return ( <> - - + + {content.title} { const [githubAvatarPageUrl, setGithubAvatarPageUrl] = useState([]); const [githubAvatarName, setGithubAvatarName] = useState([]); const [leetcodeBadgeImg, setLeetcodeBadgeImg] = useState([]); - const [leetcodeBadgeCount, setLeetcodeBadgesCount] = useState(73); - const [solvedProblem, setSolvedProblem] = useState(3031); - const [easySolved, setEasySolved] = useState(772); - const [mediumSolved, setMediumSolved] = useState(1589); - const [hardSolved, setHardSolved] = useState(670); - const [totalLCProblem, setTotalLCProblem] = useState(3103); - const [totalLCEasy, setTotalLCEasy] = useState(785); - const [totalLCMedium, setTotalLCMedium] = useState(1628); - const [totalLCHard, setTotalLCHard] = useState(690); - const [lcStreakCount, setLCStreakCount] = useState(1000); + const [leetcodeBadgeCount, setLeetcodeBadgesCount] = useState(74); + const [solvedProblem, setSolvedProblem] = useState(3047); + const [easySolved, setEasySolved] = useState(776); + const [mediumSolved, setMediumSolved] = useState(1596); + const [hardSolved, setHardSolved] = useState(675); + const [totalLCProblem, setTotalLCProblem] = useState(3125); + const [totalLCEasy, setTotalLCEasy] = useState(788); + const [totalLCMedium, setTotalLCMedium] = useState(1641); + const [totalLCHard, setTotalLCHard] = useState(696); + const [lcStreakCount, setLCStreakCount] = useState(1010); const fetchData = useCallback(async () => { try { diff --git a/documentation/src/pages/AkashSingh3031/index.tsx b/documentation/src/pages/AkashSingh3031/index.tsx index 966e8b7f..402c24df 100644 --- a/documentation/src/pages/AkashSingh3031/index.tsx +++ b/documentation/src/pages/AkashSingh3031/index.tsx @@ -8,11 +8,8 @@ import { CommonHeader } from "@site/src/prepverse-theme/common-header"; import { CommonLayout } from "@site/src/prepverse-theme/common-layout"; import { useColorMode } from "@docusaurus/theme-common"; import { CommonThemedImage } from "@site/src/prepverse-theme/common-themed-image"; -import { EnterpriseHeroSection } from "@site/src/prepverse-theme/enterprise-hero-section"; import { AboutMeProfile } from "@site/src/prepverse-theme/about-me-profile"; import BackToTopButton from '@theme/BackToTopButton'; -import { EnterpriseFaq } from "@site/src/prepverse-theme/enterprise-faq"; -import ProjectList from "@site/src/components/project-list"; const About: React.FC = () => { const { colorMode } = useColorMode(); @@ -41,13 +38,6 @@ const About: React.FC = () => { "landing-lg:pr-12", )} /> - {/* */} - {/* */} diff --git a/documentation/src/pages/CodeVerse/index.tsx b/documentation/src/pages/CodeVerse/index.tsx new file mode 100644 index 00000000..1d13a5c3 --- /dev/null +++ b/documentation/src/pages/CodeVerse/index.tsx @@ -0,0 +1,328 @@ +import Head from "@docusaurus/Head"; +import React, { SVGProps } from "react"; +import { CommonHeader } from "@site/src/prepverse-theme/common-header"; +import { CommonLayout } from "@site/src/prepverse-theme/common-layout"; +import { LandingFooter } from "@site/src/prepverse-theme/landing-footer"; +import clsx from "clsx"; +import { TemplatesHero } from "@site/src/prepverse-theme/templates-hero"; +import { + Headless, + Cpp, + Python, + Java, + HTML, + CSS, + JavaScript, +} from "@site/src/assets/integration-icons"; +import { TemplatesList } from "@site/src/prepverse-theme/templates-list"; +import { TemplatesFilters } from "@site/src/prepverse-theme/templates-filters"; +import { TemplatesFilterButton } from "@site/src/prepverse-theme/templates-filter-button"; +import { CommonDrawer } from "@site/src/prepverse-theme/common-drawer"; + +const Templates: React.FC = () => { + const title = "PrepVerse | DSA+CP Practice"; + + const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false); + + const [filters, setFilters] = React.useState<{ + topicFilters: string[]; + languageFilters: string[]; + }>({ + topicFilters: [], + languageFilters: [], + }); + + const dataFiltered = React.useMemo(() => { + if (!filters.topicFilters.length && !filters.languageFilters.length) { + return dataTemplates; + } + + return dataTemplates.filter((item) => { + return item.integrations.some((integration) => { + return ( + filters.topicFilters.includes(integration.label) || + filters.languageFilters.includes(integration.label) + ); + }); + }); + }, [filters]); + + const handleFilterChange = (filter: string, field: keyof typeof filters) => { + setFilters((prev) => { + const hasFilter = prev[field].includes(filter); + if (hasFilter) { + return { + ...prev, + [field]: prev[field].filter((item) => item !== filter), + }; + } + + return { + ...prev, + [field]: [...prev[field], filter], + }; + }); + }; + + return ( + <> + + + {title} + + + + +
+ +
+
+ + { + setIsFilterDrawerOpen(true); + }} + /> +
+
+
+

+ Filter CodeVerse +

+ { + handleFilterChange(languageFilters, "languageFilters"); + }} + onTopicFiltersChange={(topicFilters) => { + handleFilterChange(topicFilters, "topicFilters"); + }} + className={clsx("min-w-[180px]", "mt-10")} + selected={filters} + data={dataFilters} + /> +
+ +
+
+ +
+ setIsFilterDrawerOpen(false)} + open={isFilterDrawerOpen} + title="Filter Templates" + variant="templates" + > +
+ { + handleFilterChange(languageFilters, "languageFilters"); + }} + onTopicFiltersChange={(topicFilters) => { + handleFilterChange(topicFilters, "topicFilters"); + }} + className={clsx("min-w-[180px]")} + selected={filters} + data={dataFilters} + /> +
+ + + + ); +}; + +type Integration = { + topicFilters: { + label: + | "Data Structures" + | "Algorithms" + | "Competitive Programming"; + icon: (props: SVGProps) => JSX.Element; + }; + languageFilters: { + label: + | "C++" + | "Python" + | "Java" + | "HTML" + | "CSS" + | "JavaScript"; + icon: (props: SVGProps) => JSX.Element; + }; +}; + +const dataFilters = { + topicFilters: [ + { + label: "Data Structures", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Algorithms", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Competitive Programming", + icon: (props: SVGProps) => ( + + ), + }, + ], + languageFilters: [ + { + label: "C++", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Python", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Java", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "HTML", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "CSS", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "JavaScript", + icon: (props: SVGProps) => ( + + ), + }, + ], +}; + +const dataTemplates: { + title: string; + description: string; + image: string; + to: string; + integrations: (Integration["topicFilters"] | Integration["languageFilters"])[]; +}[] = [ + { + to: "/CodeVerse/dsa", + title: "Data Structure and Algorithm", + description: + "Solving complex computational tasks efficiently through organized data representation and strategic problem-solving methodologies.", + image: + "https://miro.medium.com/v2/resize:fit:1358/1*4ZcW5tSdizlbtDQyVpRTuA.jpeg", + integrations: [ + { + label: "C++", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Python", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Data Structures", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Algorithms", + icon: (props: SVGProps) => ( + + ), + }, + ], + }, + { + to: "/CodeVerse/cp", + title: "Competitive Programming", + description: + "Solve algorithmic puzzles under time constraints to optimize problem-solving skills and code efficiency.", + image: + "https://www.andreafiori.net/img/social/og/competitive-programming.gif", + integrations: [ + { + label: "C++", + icon: (props: SVGProps) => ( + + ), + }, + { + label: "Competitive Programming", + icon: (props: SVGProps) => ( + + ), + }, + ], + }, + ]; + +export default Templates; \ No newline at end of file diff --git a/documentation/src/prepverse-theme/about-me-profile.tsx b/documentation/src/prepverse-theme/about-me-profile.tsx index 54cba302..b3d5f9e7 100644 --- a/documentation/src/prepverse-theme/about-me-profile.tsx +++ b/documentation/src/prepverse-theme/about-me-profile.tsx @@ -151,7 +151,7 @@ export const AboutMeProfile = ({ className }: { className?: string }) => { "dark:text-gray-400 text-gray-600", )} > - 👨‍💻 Software Developer Engineer🔸||🔸TA at Coding Ninjas🔸||🔸6354 Rating 📈 Points on Coding Ninjas Studio + 👨‍💻 Software Developer Engineer🔸||🔸TA at Coding Ninjas🔸||🔸6306 Rating 📈 Points on Coding Ninjas Studio

{ const { lcStreakCount, totalLCProblem, totalLCEasy, totalLCMedium, totalLCHard, solvedProblem, easySolved, mediumSolved, hardSolved, loading } = useCommunityStatsContext(); return (
- -
- Total Solved Problem:  - {loading ? ( - - ) : ( - - {solvedProblem} - + - - {/*
- -
- Longest Streak:  - {loading ? ( - - ) : ( - - {lcStreakCount} - + > +
+ Total Solved Problem:  + {loading ? ( + + ) : ( + + {solvedProblem} + + )} +
+ + {/*
-
*/} + > + +
+ Longest Streak:  + {loading ? ( + + ) : ( + + {lcStreakCount} + + )} +
+
*/} +
{loading ? ( { + return ( +
+
+ + {[...list, ...list].map(({ icon: Icon, label, tooltip }, index) => ( + } + /> + ))} + +

+ + {[...algolist, ...algolist].map(({ icon: Icon, label, tooltip }, index) => ( + } + /> + ))} + +
+
+ ); +}; + +const PackagesContainer = ({ + children, + className, + animDirection, + ...props +}: DetailedHTMLProps, HTMLDivElement> & { + animDirection: "left" | "right"; +}) => { + const ref = useRef(null); + const inView = useInView(ref); + + return ( +
+
+ {children} +
+
+ ); +}; + +const PackageItem = (props: { + icon: ReactNode; + label: string; + tooltip: string | null; +}) => { + const { tooltip, icon, label } = props; + + return ( +
+ {/*
{icon}
*/} +
+ {label} +
+ + {tooltip && ( +
+
+ {tooltip} +
+ + + + +
+ )} +
+ ); +}; + +const list = [ + { + icon: (props: SVGProps) => , + label: "Array", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Linked List", + tooltip: null, + }, + { + icon: (props: SVGProps) => ( + + ), + label: "Stack", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Queue", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Tree", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Graph", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Time Complexity", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Space Complexity", + tooltip: null, + }, +] as const; + +const algolist = [ + { + icon: (props: SVGProps) => , + label: "Time Complexity", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Space Complexity", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Searching", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Sorting", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Mathematical Algorithms", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Bitwise Algorithms", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Dynamic Programming", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Recursion", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Backtracking Algorithm", + tooltip: null, + }, + { + icon: (props: SVGProps) => , + label: "Greedy Algorithms", + tooltip: null, + }, +] as const; \ No newline at end of file diff --git a/documentation/src/prepverse-theme/codeverse/dsa/index.tsx b/documentation/src/prepverse-theme/codeverse/dsa/index.tsx new file mode 100644 index 00000000..aeb341b3 --- /dev/null +++ b/documentation/src/prepverse-theme/codeverse/dsa/index.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import clsx from "clsx"; + +export const ProblemsTable: React.FC = () => { + return ( +
+ {/* + + + + + + + + + + {problems.map((problem) => ( + + + + + + + ))} + +
ProblemStatusPriorityAssigned To
{problem.problem}{problem.status}{problem.priority}{problem.assignedTo}
*/} +
+ ); +}; + +const problems = [ + { + id: 1, + problem: "Two Sum", + status: "Solved", + priority: "Easy", + assignedTo: "Leetcode", + }, + { + id: 2, + problem: "Three Sum", + status: "Solved", + priority: "Medium", + assignedTo: "Leetcode", + }, + { + id: 3, + problem: "Four Sum", + status: "Solved", + priority: "Hard", + assignedTo: "Leetcode", + }, +]; \ No newline at end of file diff --git a/documentation/src/prepverse-theme/common-drawer.tsx b/documentation/src/prepverse-theme/common-drawer.tsx index 083cf445..102c6c53 100644 --- a/documentation/src/prepverse-theme/common-drawer.tsx +++ b/documentation/src/prepverse-theme/common-drawer.tsx @@ -90,7 +90,7 @@ const DrawerComponent: FC> = ({ "w-[240px] h-full", "ml-auto", "p-4", - // variant === "templates" && "bg-gray-0 dark:bg-gray-900 ", + variant === "templates" && "bg-gray-0 dark:bg-gray-900", variant === "blog" && "bg-white dark:bg-refine-react-7", "border-l dark:border-gray-800", "dark:shadow-[0_0_72px_24px_#14141F]", diff --git a/documentation/src/prepverse-theme/icons/popover/instagram.tsx b/documentation/src/prepverse-theme/icons/popover/instagram.tsx index 7032df90..4289f752 100644 --- a/documentation/src/prepverse-theme/icons/popover/instagram.tsx +++ b/documentation/src/prepverse-theme/icons/popover/instagram.tsx @@ -15,9 +15,9 @@ export const InstagramIcon = (props: SVGProps) => ( /> - + - + ); diff --git a/documentation/src/prepverse-theme/icons/social-tech/instagram-color.tsx b/documentation/src/prepverse-theme/icons/social-tech/instagram-color.tsx index f796d6e5..5193da71 100644 --- a/documentation/src/prepverse-theme/icons/social-tech/instagram-color.tsx +++ b/documentation/src/prepverse-theme/icons/social-tech/instagram-color.tsx @@ -15,9 +15,9 @@ export const InstagramIconColor = (props: SVGProps) => ( /> - + - + ); diff --git a/documentation/src/prepverse-theme/template-detail.tsx b/documentation/src/prepverse-theme/template-detail.tsx index 48ccf72c..b2bae9b2 100644 --- a/documentation/src/prepverse-theme/template-detail.tsx +++ b/documentation/src/prepverse-theme/template-detail.tsx @@ -5,14 +5,10 @@ import { CommonLayout } from "@site/src/prepverse-theme/common-layout"; import { CommonHeader } from "@site/src/prepverse-theme/common-header"; import { LandingFooter } from "@site/src/prepverse-theme/landing-footer"; import { CommonCircleChevronLeft } from "./common-circle-chevron-left"; -import { ShareIcon } from "./icons/share"; import * as Icons from "@site/src/assets/integration-icons"; -import ReactMarkdown from "react-markdown"; -import remarkGfm from "remark-gfm"; -import remarkRehype from "remark-rehype"; -import { CommonRunLocalPrompt } from "./common-run-local-prompt"; -import { GithubIcon } from "./icons/github"; -import { TutorialIcon } from "./icons/tutorial"; +import { ProblemsTable } from "./codeverse/dsa"; +import { DSATopics } from "./codeverse/dsa/dsa-topics"; +import ProjectList from "@site/src/components/project-list"; type Props = { data: { @@ -43,14 +39,14 @@ export const TemplatesDetail: FC = ({ data }) => { "mx-auto", "flex flex-col", "not-prose", - "mt-8 landing-lg:mt-20", + "mt-8 landing-lg:mt-10", "px-6 landing-sm:px-0", - "pb-8 landing-sm:pb-12 landing-md:pb-16 landing-lg:pb-40", + "pb-8 landing-sm:pb-12 landing-md:pb-16 landing-lg:pb-20", )} >
= ({ data }) => { )} > - Back to templates + Back to CodeVerse + {data.slug === "dsa" && } + {data.slug === "cp" && }

= ({ data }) => {
- {data.title} -
- -
-
-
- {data.liveDemo && ( - - - - Live demo - - - )} - {data.tutorial && ( - - - - Tutorial - - - )} - {data.github && ( - - - - Source code - - - )} -
- -
-
- -
-
-

- Description -

-
- - {data.description} - -
-
- + {data.slug === "dsa" && } + {data.slug === "cp" && }

diff --git a/documentation/src/prepverse-theme/templates-filters.tsx b/documentation/src/prepverse-theme/templates-filters.tsx index 0e6182df..145e27ec 100644 --- a/documentation/src/prepverse-theme/templates-filters.tsx +++ b/documentation/src/prepverse-theme/templates-filters.tsx @@ -5,21 +5,21 @@ type Props = { svgId?: string; className?: string; selected: { - uiFramework: string[]; - backend: string[]; + topicFilters: string[]; + languageFilters: string[]; }; data: { - uiFrameworks: { + topicFilters: { label: string; icon: (props: SVGProps) => JSX.Element; }[]; - backends: { + languageFilters: { label: string; icon: (props: SVGProps) => JSX.Element; }[]; }; - onBackendChange: (backend: string) => void; - onUIFrameworkChange: (framework: string) => void; + onLanguageFiltersChange: (languageFilters: string) => void; + onTopicFiltersChange: (topicFilters: string) => void; }; export const TemplatesFilters: FC = ({ @@ -27,8 +27,8 @@ export const TemplatesFilters: FC = ({ className, data, selected, - onBackendChange, - onUIFrameworkChange, + onLanguageFiltersChange, + onTopicFiltersChange, }) => { return (
@@ -36,30 +36,29 @@ export const TemplatesFilters: FC = ({ className={clsx( "pl-4", "text-sm", - "dark:text-gray-500 text-gray-700", + "font-semibold", + "dark:text-gray-400 text-gray-700", )} > - UI Frameworks + Languages
- {data.uiFrameworks.map((item) => { - const isSelected = selected.uiFramework.includes( - item.label, - ); + {data.languageFilters.map((item) => { + const isSelected = selected.languageFilters.includes(item.label); const Icon = item.icon; return (
onUIFrameworkChange(item.label)} + onClick={() => onLanguageFiltersChange(item.label)} role="button" className={clsx( "flex", @@ -93,29 +92,32 @@ export const TemplatesFilters: FC = ({ className={clsx( "pl-4", "text-sm", - "dark:text-gray-500 text-gray-700", + "font-semibold", + "dark:text-gray-400 text-gray-700", "mt-10", )} > - Backends + Topics
- {data.backends.map((item) => { - const isSelected = selected.backend.includes(item.label); + {data.topicFilters.map((item) => { + const isSelected = selected.topicFilters.includes( + item.label, + ); const Icon = item.icon; return (
onBackendChange(item.label)} + onClick={() => onTopicFiltersChange(item.label)} role="button" className={clsx( "flex", @@ -126,6 +128,7 @@ export const TemplatesFilters: FC = ({ "cursor-pointer", "border dark:border-gray-700 border-gray-200", isSelected && "dark:bg-gray-700 bg-gray-50", + // "transition-colors duration-200 ease-in-out", )} > diff --git a/documentation/src/prepverse-theme/templates-hero.tsx b/documentation/src/prepverse-theme/templates-hero.tsx index a56eb2fa..7db8852c 100644 --- a/documentation/src/prepverse-theme/templates-hero.tsx +++ b/documentation/src/prepverse-theme/templates-hero.tsx @@ -30,7 +30,7 @@ export const TemplatesHero: FC = ({ className }) => { )} srcDark="https://refine.ams3.cdn.digitaloceanspaces.com/templates/templates-hero-dark.png" srcLight="https://refine.ams3.cdn.digitaloceanspaces.com/templates/templates-hero-light.png" - alt="Refine Templates" + alt="CodeVerse" />

= ({ className }) => { )} > - Refine{" "} + Practice{" "} = ({ className }) => { "text-refine-blue drop-shadow-[0_0_30px_rgba(51,51,255,0.3)]", )} > - Templates + DSA & CP

= ({ className }) => { "dark:text-gray-400 text-gray-600", )} > - Explore a range of pre-designed Refine templates, perfect for - everything from admin panels to dashboards and CRMs. Easily - integrate these templates with your data sources and begin - customizing to jumpstart your projects. + Practice Data-Structures and Algorithms & Competitive Programming Problems with LeetCode

);