{"id":27969016,"url":"https://github.com/ankit-nautiyal/shopeasy-react","last_synced_at":"2025-05-07T21:08:10.747Z","repository":{"id":287569428,"uuid":"965105064","full_name":"ankit-nautiyal/ShopEasy-React","owner":"ankit-nautiyal","description":"ShopEasy is a responsive e-commerce website that uses React with the Fake Store API to provide a seamless shopping experience, including user authentication, product browsing, cart management, and a checkout process. The application features a clean UI, a mobile-first design, and global state management for the cart.","archived":false,"fork":false,"pushed_at":"2025-04-14T12:57:16.000Z","size":133,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T21:08:07.328Z","etag":null,"topics":["api","axios","css","css-grid","fake-store-api","git","github","html5","javascript","react-icons","react-router","reactjs","responsive-design","toast-notifications"],"latest_commit_sha":null,"homepage":"https://shopeasy-ankit.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/ankit-nautiyal.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-04-12T12:26:00.000Z","updated_at":"2025-04-14T12:57:19.000Z","dependencies_parsed_at":"2025-04-12T15:40:02.319Z","dependency_job_id":"2e4877dd-1e29-4deb-9de8-9a8efee7ec37","html_url":"https://github.com/ankit-nautiyal/ShopEasy-React","commit_stats":null,"previous_names":["ankit-nautiyal/shopping-site-react","ankit-nautiyal/shopeasy-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FShopEasy-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FShopEasy-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FShopEasy-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FShopEasy-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankit-nautiyal","download_url":"https://codeload.github.com/ankit-nautiyal/ShopEasy-React/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954410,"owners_count":21830905,"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":["api","axios","css","css-grid","fake-store-api","git","github","html5","javascript","react-icons","react-router","reactjs","responsive-design","toast-notifications"],"created_at":"2025-05-07T21:08:10.114Z","updated_at":"2025-05-07T21:08:10.724Z","avatar_url":"https://github.com/ankit-nautiyal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ShopEasy - Shopping Website\n\nShopEasy is a responsive e-commerce website that uses React with the Fake Store API to provide a seamless shopping experience, including user authentication, product browsing, cart management, and a checkout process. The application features a clean UI, a mobile-first design, and global state management for the cart.\n\n\n---\n\n## Tech Stack\n\n- **Frontend**: React.js (Vite)\n- **Routing**: React Router v6\n- **State Management**: React Context API (for cart)\n- **HTTP Client**: Axios (for API calls)\n- **Styling**: Plain CSS (mobile-first)\n- **API**: [Fake Store API](https://fakestoreapi.com/docs)\n- **Build Tool**: Vite\n\n---\n\n## Project Screenshots:\n![image](https://github.com/user-attachments/assets/d3ec9b9d-fba4-4afd-b86b-6f996f89ab98)\n![image](https://github.com/user-attachments/assets/450ac38d-b679-4509-b156-205f88b9a7ef)\n![image](https://github.com/user-attachments/assets/80d6c95c-fc5a-4a7d-ad26-5b523f347767)\n![image](https://github.com/user-attachments/assets/e237e402-d302-462c-9242-79086be89263)\n![image](https://github.com/user-attachments/assets/51a5abc8-1480-403b-99ee-224bbd8a420d)\n![image](https://github.com/user-attachments/assets/935320d6-90aa-4dca-b888-05342cd4a41e)\n![image](https://github.com/user-attachments/assets/377a9d0f-6b98-4dc7-83b9-cd62929b0f5f)\n![image](https://github.com/user-attachments/assets/2eab3a71-63ac-4a63-a2e2-04096d36da44)\n![image](https://github.com/user-attachments/assets/6ec60a36-0605-4c60-b0c9-a980089aa47d)\n![image](https://github.com/user-attachments/assets/82e6f4aa-b662-4ad6-818f-380ec9bf751f)\n![image](https://github.com/user-attachments/assets/c30f30f6-e06f-4ecf-a144-1743c77bfe6c)\n![image](https://github.com/user-attachments/assets/d4301588-97c2-4d8a-9d26-7d6b0724a870)\n![image](https://github.com/user-attachments/assets/cdbc764d-ebfa-4b72-b6cc-2b577a8a77c9)\n![image](https://github.com/user-attachments/assets/11509700-60de-43fb-bf09-e7c16867ddd7)\n![image](https://github.com/user-attachments/assets/fd9416c3-8c83-4ee8-a647-5f2e87b50106)\n\n\n\n## Features\n\n- **Login Page**:\n  - Authenticate users via Fake Store API's `/auth/login` endpoint.\n  - Store JWT token in `localStorage`.\n  - Redirect to the home page on successful login.\n- **Product Listing (Home)**:\n  - Fetch and display products in a responsive grid.\n  - Filter products by category using `/products/category/:category`.\n  - Search bar to filter products by title.\n- **Product Detail Page**:\n  - Display detailed product info (image, title, description, price).\n  - \"Add to Cart\" functionality.\n- **Cart Page**:\n  - View cart items with quantity controls and removal options.\n  - Calculate total price dynamically.\n  - Checkout clears the cart and shows a confirmation popup (auto-closes after 4 seconds).\n- **Header**:\n  - Navigation links to Home, Cart, and Logout.\n  - Displays real-time cart item count.\n  - Logout clears JWT and redirects to Login.\n- **Footer**:\n  - Includes brand info, contact details, and social media links.\n  - Responsive design with a dynamic copyright year.\n- **Responsive Design**:\n  - Mobile-first approach using plain CSS.\n  - It adapts seamlessly to desktop and mobile devices.\n\n\n\n## Directory Structure\n\n```\nshopping-website/\n├── public/                    # Static assets\n├── src/\n│   ├── assets/               # Images, fonts (if any)\n│   ├── components/           # Reusable components\n│   │   ├── Header.jsx\n│   │   ├── Footer.jsx\n│   │   ├── ProductCard.jsx\n│   │   ├── Popup.jsx\n│   ├── pages/                # Page components\n│   │   ├── Login.jsx\n│   │   ├── Home.jsx\n│   │   ├── ProductDetail.jsx\n│   │   ├── Cart.jsx\n│   ├── context/              # Context API\n│   │   ├── CartContext.jsx\n│   ├── styles/               # CSS files\n│   │   ├── Login.css\n│   │   ├── Home.css\n│   │   ├── ProductDetail.css\n│   │   ├── Cart.css\n│   │   ├── Header.css\n│   │   ├── Footer.css\n│   │   ├── ProductCard.css\n│   │   ├── Popup.css\n│   ├── App.jsx               # Main app with routes\n│   ├── main.jsx              # Entry point\n│   ├── index.css             # Global styles\n├── .gitignore                # Git ignore file\n├── package.json              # Project dependencies\n├── README.md                 # This file\n├── vite.config.js            # Vite configuration\n```\n\n## Prerequisites\n\n- **Node.js** (v16 or higher)\n- **npm** (v8 or higher)\n- A modern web browser\n\n## Setup Instructions\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/ankit-nautiyal/ShopEasy-React.git\n   cd shopping-website\n   ```\n\n2. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Run the Development Server**:\n   ```bash\n   npm run dev\n   ```\n   Open `http://localhost:5173` in your browser (port may vary).\n\n4. **Build for Production** (Optional):\n   ```bash\n   npm run build\n   ```\n   The production-ready files will be in the `dist/` folder.\n\n## Usage\n\n1. **Login**:\n   - Use Fake Store API credentials (e.g., `username: \"mor_2314\"`, `password: \"83r5^_\"`).\n   - On success, you’ll be redirected to the home page.\n2. **Browse Products**:\n   - Filter by category or search by product name.\n   - Click a product to view details.\n3. **Manage Cart**:\n   - Add products to the cart from the product detail page.\n   - Update quantities or remove items in the cart.\n   - Click \"Checkout\" to place an order (cart clears, popup appears).\n4. **Logout**:\n   - Click \"Logout\" in the header to clear the JWT and return to the login page.\n\n## Testing\n\n- **API Testing**:\n  - Ensure the Fake Store API (`https://fakestoreapi.com`) is accessible.\n  - Test login with provided credentials.\n- **UI Testing**:\n  - Verify responsiveness on mobile (\u003c600px) and desktop.\n  - Check navigation, cart updates, and popup behavior.\n- **Functionality**:\n  - Confirm cart state persists across pages.\n  - Test checkout clears the cart and shows the confirmation.\n\n## Future Improvements\n\n- **Error Handling**: Display user-friendly messages for API failures.\n- **Styling**: Add animations or use a CSS framework like Tailwind.\n- **Local Storage for Cart**: Persist cart state across sessions.\n\n## Contributing\n\n1. Fork the repository.\n2. Create a feature branch (`git checkout -b feature/your-feature`).\n3. Commit changes (`git commit -m \"Add your feature\"`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Open a pull request.\n\n\n## Acknowledgments\n\n- [Fake Store API](https://fakestoreapi.com) for providing a free e-commerce API.\n- [Vite](https://vitejs.dev) for a fast development environment.\n- [React](https://reactjs.org) for a powerful UI library.\n\n---\n\n### Notes for Customization\n- **Repository URL**: Replace `https://github.com/ankit-nautiyal/ShopEasy-React.git` with your actual repo URL.\n- **Screenshots**: You can add screenshots by placing them in a `screenshots/` folder and linking them in the README (e.g., `![Login Page](screenshots/login.png)`).\n- **Deployed Link**: If you deploy the app (e.g., on Vercel), add a \"Live Demo\" section with the URL.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankit-nautiyal%2Fshopeasy-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankit-nautiyal%2Fshopeasy-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankit-nautiyal%2Fshopeasy-react/lists"}