Kong is a platform that serves as a language model hub (LLM). With the tagline "Building the Future," Kong aims to connect AI enthusiasts and professionals worldwide. Explore a wide array of LLMs, contribute your models, and engage with the AI community in Kong.
| Route | Description |
|---|---|
| / | Explore the page showcasing the most loved models. |
| /models | Displays various available models. |
| /[user] | Displays user information. |
| /[user]/[modelID] | Shows details of a particular model. |
| /login | Login page. |
| /register | Sign up page. |
| /models/new | Allows logged-in users to post new models. |
Email:dummyKong@gmail.com
- Next.js: Utilized for efficient and scalable web development.
- Tailwind CSS: Used for responsive and sleek UI design.
- MongoDB: Chosen for its flexibility and scalability in handling data storage.
- shadcn, gsap, aos: UI component and animation libraries enhancing user experience.
- next-seo: Implemented to enhance the application's SEO capabilities.
- react-hook-form: Used for efficient form handling.
- react-markdown, rehype-raw, remark-gfm, markdown-yaml-metadata-parser: Rendering markdown descriptions for models.
- Recoil: Employed for efficient state management within the application.
To evaluate the application's performance, I relied on industry-standard metrics provided by Google Lighthouse. Google Lighthouse offers a comprehensive set of metrics that align with today's web standards, including key indicators such as Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Cumulative Layout Shift (CLS). These metrics offer valuable insights into page loading and user experience.
In addition to Google Lighthouse, I utilized Performance Insights in the browser's Developer Tools to measure page load time directly. Performance Insights provides detailed reports on page load times, allowing for precise measurement and analysis of performance metrics. By leveraging both Google Lighthouse and Performance Insights, I obtained a comprehensive understanding of the application's performance and identified opportunities for optimization.
- Utilized
next-seoto enhance the SEO of the entire application. - Implemented custom metadata for different routes to optimize search engine visibility and ranking.
- Leveraged SSR to render a particular model description. This approach greatly benefits SEO as search engines can crawl and index the content more efficiently.
-
Employed
next/dynamicimport to speed up the site. This optimizes the loading time by dynamically importing components only when needed, reducing initial page load time. -
Used Next Bundle Analyzer to analyze and add dynamic imports wherever necessary, decreasing the first load size.
Before:After:
- Integrated
next/imagecomponent to optimize image presentation. - It automatically serves correctly sized images for each device, using modern image formats like WebP and AVIF.
- Every search performed on the platform is debounced, ensuring that the functionality responds efficiently and optimally, providing users with a smooth search experience.
- Users can explore various models uploaded by organizations and other users.
- Users can categorize models based on parameters like tasks, libraries used, datasets, and languages.
- Models can be filtered based on their names for easy access.
- Users can sort models based on criteria such as most likes, downloads, and trending, facilitating the efficient discovery of popular models.
- The entire site is fully responsive, ensuring seamless user experience across different devices and screen sizes.
- Users can post their models, leveraging markdown rendering libraries like
react-markdown,rehype-raw,remark-gfm, andmarkdown-yaml-metadata-parserfor beautiful and informative descriptions. - HTML can be used within markdown descriptions for enhanced formatting, including code snippets, images, and tables.
- Users who create a model repository can edit its description, allowing them to update and refine information about their models as needed.
- Users can engage with models by downloading, liking, and loving them, contributing to model rankings and visibility.
- Utilized GSAP and AOS for scroll-based animations on the explore page (home page), captivating users with engaging visuals and enhancing user experience.
- Utilized
next-themeto add a dark theme switch to the whole application, allowing users to switch between light and dark themes for improved readability and reduced eye strain.
