https://github.com/woldreamz/product-list

This project is a responsive and dynamic product listing application built with Next.js. It features fetching product data from an API, sorting, searching, and displaying the products in an interactive and visually appealing way. The application showcases creativity and attention to detail through its design and functionality.
https://github.com/woldreamz/product-list

axios framer-motion nextjs tailwindcss

Last synced: about 2 months ago
JSON representation

This project is a responsive and dynamic product listing application built with Next.js. It features fetching product data from an API, sorting, searching, and displaying the products in an interactive and visually appealing way. The application showcases creativity and attention to detail through its design and functionality.

• Host: GitHub
• URL: https://github.com/woldreamz/product-list
• Owner: Woldreamz
• Created: 2024-06-20T22:22:47.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T02:55:05.000Z (7 months ago)
• Last Synced: 2024-06-22T17:28:50.229Z (7 months ago)
• Topics: axios, framer-motion, nextjs, tailwindcss
• Language: TypeScript
• Homepage: https://product-list-beige-five.vercel.app
• Size: 2.36 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Product Listing Application

## Project Description

This project is a responsive and dynamic product listing application built with Next.js. It features fetching product data from an API, sorting, searching, and displaying the products in an interactive and visually appealing way. The application showcases creativity and attention to detail through its design and functionality.

## Installation Instructions

Prerequisites

Node.js 

npm 

### Steps

Clone the repository

git clone [https://github.com/Woldreamz/Product-list.git] 


cd my-product-list 


### Install dependencies

npm install 


### Run the development server

npm run dev 


Open http://localhost:3000 to view it in your browser. 


### Build for production

npm run build 


Start the production server

npm start

## Features

Responsive Design: The application is fully responsive and works seamlessly on different devices.

Product Listing: Displays a list of products fetched from an API.

Sorting: Allows sorting products by price (ascending and descending).

Search: Enables searching for products by name.

Animations: Smooth animations using Framer Motion.

Error Handling: Gracefully handles loading and error states.

## Deployment

The application is deployed on Vercel. You can access it at the following link:

Product Listing Application on Vercel

## Screenshots

Home Page

Sorting and Search

# Getting Started

## Project Structure

/components 


  └── Header.js 


  └── ProductCard.js 


  └── ProductList.js 


  └── SortFilter.js 


/services 


  └── productService.js 


/styles 


  └── Home.module.css 


  └── globals.css 


  └── ProductCard.module.css 


  └── ProductList.module.css 


/pages 


  └── index.js 


## Code Examples

Fetching Products

services/productService.js:

javascript

Copy code

import axios from 'axios';

const API_URL = ['https://dummyjson.com/products'];

export const fetchProducts = async () => {

  const response = await axios.get(API_URL);

  return response.data.products;

};

Contributing

Feel free to fork this project and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.

## License

# MIT