Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

The command above will make the following changes to your local environment:

📦 Install the required dependencies. 🛠 Setup the necessary scripts to run and build Storybook. 🛠 Add the default Storybook configuration. 📝 Add some boilerplate stories to get you started. Depending on your framework, first build your app and then check that everything worked by running:

NPM YARN

Starts Storybook in development mode

npm storybook

Functionality covered

Hero only

• Implemented two components such as mobile and desktop to test lower resolution devices, and also higher resolution devices
• Created two dynamic buttons (Primary, Secondary) • Different design for mobile and hero banner

Search results only

• Implemented 3 stories such as Product with Image, Pagination and product details navigation
• Product with image displays product list with collection of products cards • Product with pagination have pagination limited to 10 pages • Page click renders new list of products dynamically • Product details – Product cards can be clickable that loads the product detail page • Product details renders with basic styles

Hero and search results (Page)

This renders Hero and product list as a page Technical Implementation • Typescript features and best practices • React functional component, hooks, custom hooks • Well defined project structure • BEM structure • Module scss • Partial responsive

Things to Implement

• Unit test/ Visual regression test • Content caching using JSON:API • Utilise component into application • Use decorator and action from storybook • Use mock data in story • Global variables, mixins and styles • Few typescript error fix • Routing • Fully responsive

Future Reference

https://www.npmjs.com/package/jsonapi-react https://colinhacks.com/essays/building-a-spa-with-nextjs