PLP Application App

This project was created for the Azki-vam code challenge. In this project, we implemented a proudcts list page with some filters. You can see the live demo, which is powered by Vercel.
I store the query params in the URL and sync them with filters. All API calls are server-side rendered with fallback error messages displayed.
You can improve this project by adding an application page and other features! To use this project, you can run development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Features:

• Load a list of products on the home page with a infinite load by scrolling
• Include category filters and merchants filter
• Include a skeleton card loading animation until the data is fully loaded
• Design and implement responsive design using SCSS.
• Filter section have reset button and with click on title, section collapsed
• Implement an error page and a not found message with a link to return to the home page.

Used packages:

• React
• NextJs
• TypeScript
• SASS
• iconssax

Additonl thing:

• Server: I used this Api Document for fetching data.

Project folder structure:

.
├── public                  # Public Assets
├── src                     # Source files 
│   ├── assets              # Styles and other assets that needs to be transpiled at the build time
│   ├── components          # All Major and Minor Components will place here
│   ├── hooks               # custom hoom
│   ├── pages(app)          # Next.js File routings/App Directory
|   ├── types               # Global types
├── config files            # .env files, docker files, bundler configs, .eslintrc, package.json, tsconfig.json, etc. 
└── README.md

Component folder structure:

.
│   ├── ...
│   └── components                      
|           ├── ExampleComponent                   # ExampleComponent Folder
|           |       ├── components                 # Sub Components of Example Component
|           |       ├── componentName.module.scss  # Modular Styles
|           |       └── index.tsx                  # Main File (only contains imports, hook calls and jsx codes)
│           ├── ...

Snapshots:

• Home Page
  
  
  
  
• Skeleton Loading
  
  
  
  
• Search Result
  
  
  
  
• Mobile View
  
  
  
  
• Not Found Result
  
  
  
  
• Error Page