{"id":29148689,"url":"https://github.com/siddami/my-coffee-app","last_synced_at":"2025-06-30T22:06:28.649Z","repository":{"id":301151406,"uuid":"1008217587","full_name":"Siddami/my-coffee-app","owner":"Siddami","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-25T11:46:45.000Z","size":4705,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T12:24:16.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Siddami.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,"zenodo":null}},"created_at":"2025-06-25T07:54:33.000Z","updated_at":"2025-06-25T11:46:48.000Z","dependencies_parsed_at":"2025-06-25T12:35:40.946Z","dependency_job_id":null,"html_url":"https://github.com/Siddami/my-coffee-app","commit_stats":null,"previous_names":["siddami/my-coffee-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Siddami/my-coffee-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmy-coffee-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmy-coffee-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmy-coffee-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmy-coffee-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siddami","download_url":"https://codeload.github.com/Siddami/my-coffee-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmy-coffee-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262857289,"owners_count":23375492,"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","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":[],"created_at":"2025-06-30T22:06:24.360Z","updated_at":"2025-06-30T22:06:28.573Z","avatar_url":"https://github.com/Siddami.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Coffee Store E-Commerce Application\n This project is a responsive web application designed to showcase and manage coffee-related products, featuring a product listing page with filters, a product card display, and an accessible user interface.\n\n## Project Overview\nThis application is built to provide an intuitive shopping experience for coffee enthusiasts, allowing users to browse products, apply filters, and view details in a responsive layout. The project leverages modern web technologies to ensure compatibility across devices and accessibility for all users.\n\nDeveloped By: [siddami](https://github.com/siddami)\n\n## Features\nResponsive Product Listing: Displays products in a grid layout with 1 column on small screens, 2 columns on medium screens, and up to 3 columns on large screens.\n1. Filter Sidebar: Includes a toggleable sidebar on small screens and a static sidebar on larger screens for filtering by search, category, and dietary options.\n2. Product Card Display: Shows product details (name, brand, price) with a favorite toggle, optimized for responsiveness and accessibility.\n3. Top Filters: Allows sorting by \"Bestselling\" and toggling image-only views, with a responsive design.\n4. Accessibility: Implements ARIA labels, keyboard navigation, and sufficient color contrast for an inclusive experience.\n5. Overlay Sidebar: On small screens, the filter sidebar overlays the product list, auto-closing after filter application or manual closure.\nTools and Technologies\n6. Loader: displays before data pops up.\n\nFramework: Next.js - For server-side rendering and static site generation.\nLanguage: TypeScript - For type safety and improved development experience.\nStyling: Tailwind CSS - For utility-first responsive design.\n\nImage Optimization: I used the Next.js Image Component - For optimized and responsive images.\nState Management: React Hooks (useState, useEffect) - For managing component state and side effects.\nBuild Tool: npm - For package management and building the project.\nFile System: Node.js fs module - Used for file-based data handling where fetch was not viable.\n\n## Usage\n - Access the application at [https://my-coffee-app-beta.vercel.app/] during development.\n - Use the toggle button on small screens to open the filter sidebar, which overlays the product list.\n - Apply filters (search, category, dietary) to refine the product list, which will auto-close the sidebar.\n - Click the \"Close\" button in the sidebar to manually close it.\n - Browse products, toggle favorites, and sort using the top filters.\n\n## Challenges Faced During Development\nDuring the development process, several challenges were encountered and resolved:\n\n 1. Fetch Issue with Data Loading: Initially, the fetch API was used to load product data, but it caused runtime errors due to server-side rendering constraints. To resolve this, the fs module was integrated to read product data from local files, ensuring consistent data availability during builds and runtime.\n\n 2. TypeScript Module Resolution: Encountered errors with missing type declarations for custom modules (e.g., Product, ProductCard). This was fixed by ensuring all TypeScript files had proper import paths and type definitions.\n\n 3. Sidebar Toggle Behavior: The sidebar toggle initially stacked elements or failed to overlay the product list. This was addressed by restructuring the layout to use a fixed overlay with proper z-index and transition effects.\n \n 4. ESLint Build Errors: Unused variables (setProducts, dietArray, Product) caused build failures. These were resolved by removing unused state setters and imports, aligning with ESLint rules.\n\n 3. Responsiveness Across Breakpoints: Ensuring the grid and sidebar adapted smoothly across all screen sizes required iterative adjustments to Tailwind CSS breakpoints and gap spacing.\n\n## Future Improvements\n1. Add dynamic product data fetching with API integration.\n2. Implement a backend to persist favorite selections.\n3. Enhance filter options with more sorting criteria.\n4. Optimize performance for large product catalogs.\n\n## Screenshot\n![screenshot](/public/images/coffee.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fmy-coffee-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddami%2Fmy-coffee-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fmy-coffee-app/lists"}