BrowseAi - Product Engineer Frontend Assignment

This project developed and designed by Masud Afsar base on the given repository and the guide note.

How to run the project

We can run the project on development or production mode. First you need to install the dependencies with command below:

npm install

Then with this command we can start the project in development mode:

npm run dev

After running development server open it in your browser localhost:5173.

And for run the project in production mode you need to build it first and after that use preview script to run a server:

npm run build
npm run preview

The production web server runs on port 4173, so you can see it in localhost:4173.

At the end for opening the documentation on storybook use command below:

npm run storybook

Installed packages

Here I list packages I have installed in the project with description about them.

Package	Environment	Description
@tanstack/react-query	Production	Hooks for fetching, caching and updating asynchronous data
@tanstack/react-query-devtools	Production	Dev Tools of react-query
react-router-dom	Production	A package for handling navigating and routing between pages
react-window	Production	A package for implementing virtualized table
react-virtualized-auto-sizer	Production	A package for auto sizing virtualized table
sass	Development	SCSS file compiler
storybook	Development	A package for documenting component
@storybook/*	Development	Addons for storybook

My development explanation

• Developed component with TailwindCSS and SCSS module
• Implemented several component with different variants base on design
• Implemented button and badge component in different color, size and variant (visit storybook)
• Used compound pattern for card and table component
• Implemented virtualized tables to show huge data on it
• Documented button component in Storybook
• Implemented api calling with react-query
• Set alias for paths in tsconfig.json
• Write unit tests for components
• Implement to call search api in parallel

My develop challenges

• Design base on Figma file (design system and color palette in design was missed)
• Develop a virtualized table
• Validate user entry in bulk insertion for over 1k row (now it's work with 1M row)
• Parallell api calls
• Documentation of GitHub api