{"id":25761148,"url":"https://github.com/saivenkat420/shopping-app","last_synced_at":"2026-06-18T14:32:14.930Z","repository":{"id":273504121,"uuid":"919889522","full_name":"saivenkat420/shopping-app","owner":"saivenkat420","description":"Created a modern e-commerce experience with a design inspired by Amazon and Flipkart.","archived":false,"fork":false,"pushed_at":"2026-02-17T14:54:06.000Z","size":772,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-17T18:57:43.914Z","etag":null,"topics":["authentication","authorization","bootstrap","css","flexbox-css","javascript","jwt-token","localstorage","reactjs","restapi","routing"],"latest_commit_sha":null,"homepage":"https://shopping-app-five-nu.vercel.app/","language":"JavaScript","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/saivenkat420.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-21T07:42:37.000Z","updated_at":"2026-02-17T15:26:03.000Z","dependencies_parsed_at":"2025-02-26T18:43:22.650Z","dependency_job_id":null,"html_url":"https://github.com/saivenkat420/shopping-app","commit_stats":null,"previous_names":["saivenkat420/shopping-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/saivenkat420/shopping-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivenkat420%2Fshopping-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivenkat420%2Fshopping-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivenkat420%2Fshopping-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivenkat420%2Fshopping-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saivenkat420","download_url":"https://codeload.github.com/saivenkat420/shopping-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivenkat420%2Fshopping-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34495377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"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":["authentication","authorization","bootstrap","css","flexbox-css","javascript","jwt-token","localstorage","reactjs","restapi","routing"],"created_at":"2025-02-26T18:28:57.796Z","updated_at":"2026-06-18T14:32:14.922Z","avatar_url":"https://github.com/saivenkat420.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopping App\n\n## Introduction\n\nThe **Shopping App** is a modern e-commerce web application built with React. Users can browse products, add items to their cart, and manage their shopping experience. The app uses **Neon PostgreSQL** for authentication and fetches product data from CCBP APIs via a secure backend proxy.\n\n---\n\n## What the App Can Do\n\n- **Home Page**:\n  - Displays prime deals and a full product catalog.\n  - Search by name, filter by category and rating, sort by price.\n  - Responsive filters sidebar (mobile-friendly).\n\n- **Product Details Page**:\n  - Full product information, reviews, and specifications.\n  - Add products to cart with quantity selection.\n  - Similar products section.\n  - Back button for easy navigation.\n\n- **Shopping Cart**:\n  - View selected products.\n  - Update quantities or remove items.\n  - Cart summary with total.\n\n- **User Authentication**:\n  - Sign up (username, phone, email, password).\n  - Sign in (email, password).\n  - JWT stored in cookies; protected routes for products and cart.\n\n- **Performance**:\n  - Skeleton loading for products list and product details.\n  - Server-side caching (Neon) for CCBP token and API responses.\n  - Browser cache headers for faster repeat loads.\n  - Prefetch product details on hover for instant navigation.\n\n- **Error Handling**:\n  - Error views with retry options when the API fails.\n\n---\n\n## How the Project is Organized\n\n```\nshopping-app/\n├── api/                      # Vercel serverless API routes\n│   ├── auth/                 # Signup, login (Neon)\n│   ├── lib/                  # CCBP client, API cache helpers\n│   ├── products/             # Products list proxy\n│   ├── prime-deals/          # Prime deals proxy\n│   └── product-details.js    # Product details proxy\n├── public/                   # Static assets\n├── src/\n│   ├── components/\n│   │   ├── AllProductsSection/   # Products grid, filters, skeletons\n│   │   ├── ProductCard/          # Product preview (with prefetch)\n│   │   ├── ProductCardSkeleton/  # Product list loading skeleton\n│   │   ├── ProductItemDetails/   # Product detail page\n│   │   ├── ProductDetailsSkeleton/ # Product detail loading skeleton\n│   │   ├── PrimeDealsSection/    # Prime deals carousel\n│   │   ├── FiltersGroup/         # Category, rating, search filters\n│   │   ├── Header/               # Nav, cart icon\n│   │   ├── Cart/                 # Cart dropdown, CartListView\n│   │   ├── LoginForm/            # Sign in form\n│   │   ├── SignUpForm/           # Registration form\n│   │   ├── ProtectedRoute/       # Auth guard\n│   │   └── ...\n│   ├── context/\n│   │   └── CartContext.js        # Cart state (Context API)\n│   ├── utils/\n│   │   └── productsCache.js      # Frontend cache for products\n│   ├── App.js\n│   └── index.js\n├── .env                       # DATABASE_URL, JWT_SECRET\n├── vercel.json                # API rewrites\n└── package.json\n```\n\n---\n\n## How to Install\n\n1. Clone the project:\n   ```sh\n   git clone https://github.com/your-username/shopping-app.git\n   cd shopping-app\n   ```\n\n2. Install dependencies:\n   ```sh\n   npm install\n   ```\n\n3. Set up environment variables:\n   - Create a `.env` file in the project root.\n   - Add:\n     ```\n     DATABASE_URL=postgresql://...   # Neon connection string\n     JWT_SECRET=your-secret-key     # Strong random string\n     ```\n\n4. Run the app:\n   - **Full-stack** (frontend + API with auth):\n     ```sh\n     npm run dev:full\n     ```\n   - **Frontend only**: `npm start` (auth API will 404; use `dev:full` for signup/login)\n\n---\n\n## How to Use\n\n1. **Sign up** at `/signup` or **sign in** at `/login`.\n2. **Browse products** on the home page; use filters and search.\n3. **Click a product** to view details; hover to prefetch for faster loading.\n4. **Add to cart** from the product details page.\n5. **View cart** via the header icon; adjust quantities or remove items.\n\n---\n\n## API Information\n\n### Authentication (Neon)\n- **Sign Up**: `POST /api/auth/signup` — Body: `{ username, phone, email, password }`\n- **Sign In**: `POST /api/auth/login` — Body: `{ email, password }`\n- Users stored in Neon PostgreSQL; JWT returned in cookies.\n\n### Product Data (CCBP Proxy)\nProduct data is fetched from CCBP APIs via a backend proxy. Proxy credentials (raja/raja@2021) are used server-side only and are never exposed to the frontend.\n\n- **Products**: `GET /api/products?sort_by=\u0026category=\u0026title_search=\u0026rating=`\n- **Product Details**: `GET /api/products/:id`\n- **Prime Deals**: `GET /api/prime-deals`\n\nAll product endpoints require a valid JWT cookie (user must be signed in).\n\n### Caching\n- **CCBP token**: Stored in Neon (`ccbp_token` table) to avoid re-login on cold starts.\n- **API responses**: Cached in Neon (`api_cache` table) — 5 min for products/prime deals, 10 min for product details.\n- **Browser**: `Cache-Control` headers for 2–5 min client-side caching.\n\n---\n\n## Vercel Deployment\n\n1. Connect the repo to Vercel.\n2. Set environment variables:\n   - `DATABASE_URL` — Neon connection string\n   - `JWT_SECRET` — Strong random string for JWT signing\n3. Deploy; the `api/` folder is used as serverless functions.\n\n---\n\n## Tech Stack\n\n- **React 18** — UI\n- **React Router 5** — Routing\n- **Context API** — Cart state\n- **Neon PostgreSQL** — User auth, CCBP token cache, API response cache\n- **Vercel** — Hosting and serverless API\n- **CCBP APIs** — Product data (via proxy)\n- **react-icons** — Icons\n- **react-loader-spinner** — Loading (PrimeDealsSection)\n\n---\n\n## Future Ideas\n\n- User reviews and ratings\n- Wishlist\n- Order history\n- Improved mobile UI\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaivenkat420%2Fshopping-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaivenkat420%2Fshopping-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaivenkat420%2Fshopping-app/lists"}