{"id":25918255,"url":"https://github.com/zeeshandev15/echoshop","last_synced_at":"2026-04-11T15:39:28.249Z","repository":{"id":275023949,"uuid":"915552834","full_name":"zeeshandev15/EchoShop","owner":"zeeshandev15","description":"Welcome to Echo-Shop, a fully responsive and feature-rich e-commerce website. This platform showcases  shopping experience with modern UI/UX, and accessibility ,features.","archived":false,"fork":false,"pushed_at":"2025-07-20T18:05:21.000Z","size":20080,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-30T21:01:38.951Z","etag":null,"topics":["nextjs","reacthookform","shadcn-ui","tailwindcss","typescript","zod-validation"],"latest_commit_sha":null,"homepage":"https://echo-shop.vercel.app","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/zeeshandev15.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-12T06:39:25.000Z","updated_at":"2025-09-26T16:38:54.000Z","dependencies_parsed_at":"2025-07-20T20:27:16.901Z","dependency_job_id":null,"html_url":"https://github.com/zeeshandev15/EchoShop","commit_stats":null,"previous_names":["hi-dear-486/echoshop","zeeshan-develop/echoshop","zeeshandev15/echoshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zeeshandev15/EchoShop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FEchoShop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FEchoShop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FEchoShop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FEchoShop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeeshandev15","download_url":"https://codeload.github.com/zeeshandev15/EchoShop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FEchoShop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31686141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","reacthookform","shadcn-ui","tailwindcss","typescript","zod-validation"],"created_at":"2025-03-03T14:18:21.680Z","updated_at":"2026-04-11T15:39:28.228Z","avatar_url":"https://github.com/zeeshandev15.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://github.com/zeeshandev15/EchoShop\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://github.com/zeeshandev15/EchoShop/blob/master/Echo-shop%20-design.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n   \u003cimg\n  src=\"https://img.shields.io/badge/Next.js-0070F3?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\"\n  alt=\"Next.js\"\n/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-JavaScript-green?style=for-the-badge\u0026logoColor=white\u0026logo=javascript\u0026color=28A745\" alt=\"javascript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Redux_Toolkit-764ABC?style=for-the-badge\u0026logo=redux\u0026logoColor=white\" alt=\"reduxtoolkit\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eA Movie flix App\u003c/h3\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets (Code to Copy)](#snippets)\n6. 🔗 [Assets](#links)\n7. 🚀 [More](#more)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nDeveloped a high-performance, responsive e-commerce website with a modern, intuitive user interface and enhanced accessibility.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community with over **34k+** members. It's a place where people help each other out.\n\n\u003ca href=\"https://discord.com/invite/n6EdbFJ\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e\" /\u003e\u003c/a\u003e\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Next.js\n- JavaScript\n- TailwindCSS\n- Redux Toolkit\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Movie Listings**: Display a list of movies with details like title, poster, release year, rating, and genre.\n\n👉 **Trailer Display**: When a user clicks on a movie, a modal or separate section should show the movie trailer.\n\n👉 **Skeleton Loading**: Implement skeleton loading screens (placeholders) while the movie data is being fetched.\n\n👉 **Complete Responsiveness**: The application works seamlessly on all device types and screen sizes.\n\n\nand many more, including code architecture and reusability\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [Yarn](https://www.yarnpkg.com/) (Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/zeeshandev15/EchoShop.git\ncd  ./\n```\n\n**Installation**\n\nInstall the project dependencies using yarn:\n\n```bash\nyarn add\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env.local` in the root of your project and add the following content:\n\n```env\n#Firebase\nVITE_APP_TMDB_TOKEN=\n```\n\nReplace the placeholder values with your actual TMDB credentials. You can obtain these credentials by signing up on the [TMDB Website](https://www.themoviedb.org/)\n\n\n**Running the Project**\n\n```bash\nyarn run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {\n      backgroundImage: {\n        \"gradient-radial\": \"radial-gradient(var(--tw-gradient-stops))\",\n        \"gradient-conic\":\n          \"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))\",\n      },\n    },\n  },\n  plugins: [],\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003esrc/app/globals.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* ========================================== TAILWIND STYLES */\n\n:root {\n  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;\n  font-size: 16px;\n  line-height: 1;\n  font-weight: 500;\n\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n\n  --black: #04152d;\n  --black2: #041226;\n  --black3: #020c1b;\n  --black-lighter: #1c4b91;\n  --black-light: #173d77;\n  --pink: #da2f68;\n  --orange: #f89e00;\n  --gradient: linear-gradient(98.37deg, #f89e00 0.99%, #da2f68 100%);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: var(--black);\n}\n\n::-webkit-scrollbar {\n  display: none;\n}\n\n.skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: #0a2955;\n  \u0026::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      rgba(#193763, 0) 0,\n      rgba(#193763, 0.2) 20%,\n      rgba(#193763, 0.5) 60%,\n      rgba(#193763, 0)\n    );\n    animation: shimmer 2s infinite;\n    content: \"\";\n  }\n\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n}```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003esrc/utils/page.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\n\"use client \";\nimport axios from \"axios\";\n\n// this url base key when we will search then it will be provide BASE_URL\n// search example api request\nconst BASE_URL = \"https://api.themoviedb.org/3\";\n\nconst TMDB_TOKEN =\n  \"eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmNzI0MzkxZGQ2ZjEzMjIxZDZhMzZkYmQwOGUwYTk5ZCIsInN1YiI6IjY1ZTc0Mjk1NTY4NDYzMDE4NmE4ZmYyNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.jIEuSlvLAODr3bGtkU-vWyvuOPQFqwv3g4fgCA4h6pc\";\n\nconst headers = {\n  // dont forget space in 'bearer '\n  Authorization: \"bearer \" + TMDB_TOKEN,\n};\n\n// fetch data from api\nexport const fetchDatafromApi = async (url, params) =\u003e {\n  try {\n    const { data } = await axios.get(BASE_URL + url, {\n      headers,\n      params,\n    });\n    return data;\n  } catch (error) {\n    return error;\n  }\n};\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003esrc/store/Homeslice.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\n\"use client\";\nimport { createSlice } from \"@reduxjs/toolkit\";\n\nconst Homeslice = createSlice({\n  name: \"counter\",\n  initialState: {\n    url: {},\n    genres: {},\n  },\n  reducers: {\n    getApiConfiguration: (state, action) =\u003e {\n      state.url = action.payload;\n    },\n    getGenres: (state, action) =\u003e {\n      state.genres = action.payload;\n    },\n  },\n});\n\nexport const { getApiConfiguration, getGenres } = Homeslice.actions;\nexport default Homeslice.reducer;\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003esrc/hooks/page.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\nimport { useEffect, useState } from \"react\";\nimport { fetchDatafromApi } from \"@/utils/page\";\nconst useFetch = (url) =\u003e {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(null);\n  const [error, setError] = useState(null);\n\n  useEffect(() =\u003e {\n    setLoading(\"loading...\");\n    setData(null);\n    setError(null);\n\n    fetchDatafromApi(url)\n      .then((res) =\u003e {\n        setLoading(false);\n        setData(res);\n      })\n      .catch((err) =\u003e {\n        setLoading(false);\n        setError(\"Something went wrong!\");\n      });\n  }, [url]);\n\n  return { data, loading, error };\n};\n\nexport default useFetch;\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"links\"\u003e🔗 Assets\u003c/a\u003e\n\nPublic assets used in the project can be found [here](https://github.com/Hi-Dear-486/Movie-flix-App/tree/master/public/assets)\n\n## \u003ca name=\"more\"\u003e🚀 More\u003c/a\u003e\n\n**Advance your skills with Next.js**\n\nEnjoyed creating this project? Dive deeper  for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!\n\n\u003ca href=\"https://github.com/Hi-Dear-486/Projects-Gallery-Tool\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/Hi-Dear-486/Projects-Gallery-Tool/blob/master/Untitled%20design.png\" alt=\"Project Banner\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n#\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Fechoshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeeshandev15%2Fechoshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Fechoshop/lists"}