Link to the application: AiHub
This is a simple web application that allows users to browse and search for AI/LLM models.
The application is built using React and Tailwind CSS.
- React.js
- Next.js
- Tailwind CSS
The data for the application is being fetched by making an api call to the pastebin, Katbin. This data is fetched in the context of the application(src/context/AIModelContext) and is used to display the models on the home page. The data is fetched using the useEffect hook and is stored in the state using the useState hook.
The data is fetched from the following url: https://katb.in/atlan-fe-task/raw
The data is also stored in test-json in case someeone wants to host the data on their own server.
- Users can browse through the models on the home page.
- Users can search for models using the search bar.
- Users can view the details of a model by clicking on the model card.
- Users can sort the models based on various parameters.
- Users can filter the models based on the category of the model.
- Displays featured models on the home page.
- Users can add a model to their favourites.
- Users can create a new model and add it to the list of models.
Since the application is using context to manage the state after fetching the data, the data is being fetched only once and is being used throughout the application. This is done to avoid making multiple api calls to the server thereby increasing the performance of the application.
To run the application on your local machine, follow the steps below:
-
Clone the repository to your local machine:
git clone https://github.com/amaan14999/AIHub.git
-
Navigate to the project directory:
cd AIHub -
Install the dependencies:
npm install
-
Run the application:
npm run dev
-
Open your browser and navigate to
http://localhost:3000/to view the application.
To evaluate the performance of this web application, I utilized Google Lighthouse, a comprehensive tool for auditing the quality of web pages. This tool was instrumental in providing insights into the page speed and load times of this application. The analysis included measurements of key performance indicators such as
- First Contentful Paint,
- Largest Contentful Paint,
- Total Blocking Time,
- Cumulative Layout Shift, and
- Speed Index.
For page loading time of this application, I have used the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics. These two are the most directly relevant to how quickly the page's content becomes visible to the user, which is what most people consider as "loading time".
The results of the analysis are as follows:
- Homepage load time and performance
FCP: 0.3s,LCP: 0.4s:
The application is deployed on Vercel which is considered to be one of the fastest hosting platforms.
 Amaan |