{"id":25217837,"url":"https://github.com/vluv99/simple-product-lister","last_synced_at":"2026-04-12T17:53:34.063Z","repository":{"id":275461300,"uuid":"925341111","full_name":"vluv99/simple-product-lister","owner":"vluv99","description":"A simple product catalog app with React, TypeScript, and TailwindCSS for the frontend, and a customizable backend using Next.js.","archived":false,"fork":false,"pushed_at":"2025-02-03T19:21:48.000Z","size":3225,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T09:43:08.859Z","etag":null,"topics":["nextjs","react","rest-api","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vluv99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-31T17:36:34.000Z","updated_at":"2025-02-03T19:21:51.000Z","dependencies_parsed_at":"2025-02-02T18:29:46.361Z","dependency_job_id":null,"html_url":"https://github.com/vluv99/simple-product-lister","commit_stats":null,"previous_names":["vluv99/simple-product-lister"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vluv99/simple-product-lister","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vluv99%2Fsimple-product-lister","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vluv99%2Fsimple-product-lister/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vluv99%2Fsimple-product-lister/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vluv99%2Fsimple-product-lister/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vluv99","download_url":"https://codeload.github.com/vluv99/simple-product-lister/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vluv99%2Fsimple-product-lister/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269956171,"owners_count":24503113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","rest-api","tailwindcss","typescript"],"created_at":"2025-02-10T20:52:36.166Z","updated_at":"2026-04-12T17:53:33.983Z","avatar_url":"https://github.com/vluv99.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![simple-product-lister](https://img.shields.io/badge/simple-product-lister?style=flat\u0026logo=github\u0026logoColor=white\u0026label=build\u0026link=https%3A%2F%2Fgithub.com%2Fvluv99%2Fsimple-product-lister\n)\n\n# Product Catalog\n\nA simple product catalog to list and display detailed info about products.\n\n## Features\n- Optimized for multiple screen sizes using TailwindCSS.\n- Dynamically loads more products as the user scrolls.\n- Displays product summaries in a grid format, with 4 items per row.\n- A dedicated page showcasing full product details, including images, pricing, discount, stock, brand, category, and rating.\n- REST API Integration - backend service providing structured product data via API.\n- Pagination Support – use skip and limit query parameters for efficient data fetching (default limit set to 10).\n- Database Seeding – script to prepopulate the database with 100 sample products.\n\n## Tech Stack\n- **Next.js**: Framework for building React applications with server-side rendering and static site generation.\n- **React**: Library for building user interfaces.\n- **Tailwind**: For styling the application.\n- **PostgreSQL**: Object-relational database system.\n- **Prisma ORM**: Simplified database query helper\n\n## Initial designs\nAll products page:\n![All Products.png](.github/imgs/All%20Products.png)\n\nOne product page:\n![One Product.png](.github/imgs/One%20Product.png)\n\n##Getting started\n1. Make sure **npm**, **Git**, **NodeJS** and **Podman** (or docker) are installed on your computer.\n2. Clone this project to your local computer.\n3. Run `npm install` in the project directory to install packages.\n4. Run `podman compose up` (replace podman with docker if needed) to start database.\n5. Run `npm run dev` to start up local dev version.\n6. Go to url 'http://localhost:300/api/init-mock-data' to fill up database with mock values.\n7. Open application at 'http://localhost:3000' and you can start browsing!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvluv99%2Fsimple-product-lister","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvluv99%2Fsimple-product-lister","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvluv99%2Fsimple-product-lister/lists"}