{"id":26097716,"url":"https://github.com/orhunyildiz/react-ecommerce-app","last_synced_at":"2026-04-10T07:03:33.903Z","repository":{"id":281491534,"uuid":"945436950","full_name":"orhunyildiz/react-ecommerce-app","owner":"orhunyildiz","description":"A demo e-commerce application built with React that features category filtering, product listings, shopping cart management, and interactive form demos.","archived":false,"fork":false,"pushed_at":"2025-03-09T13:31:21.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T13:34:33.480Z","etag":null,"topics":["alertifyjs","bootstrap5","javascript","react","reactstrap"],"latest_commit_sha":null,"homepage":"https://react-ecommerce-app-delta-nine.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/orhunyildiz.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-03-09T12:25:35.000Z","updated_at":"2025-03-09T13:31:25.000Z","dependencies_parsed_at":"2025-03-09T13:34:36.191Z","dependency_job_id":"018353c6-3da1-44d2-929a-6f66eacd4089","html_url":"https://github.com/orhunyildiz/react-ecommerce-app","commit_stats":null,"previous_names":["orhunyildiz/react-ecommerce-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orhunyildiz%2Freact-ecommerce-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orhunyildiz%2Freact-ecommerce-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orhunyildiz%2Freact-ecommerce-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orhunyildiz%2Freact-ecommerce-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orhunyildiz","download_url":"https://codeload.github.com/orhunyildiz/react-ecommerce-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242713356,"owners_count":20173575,"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":["alertifyjs","bootstrap5","javascript","react","reactstrap"],"created_at":"2025-03-09T15:34:17.920Z","updated_at":"2026-04-10T07:03:33.898Z","avatar_url":"https://github.com/orhunyildiz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React E-commerce Application\n\nReact E-commerce Application is a React application that demonstrates a complete e-commerce style interface with category filtering, product listing, a shopping cart, and form demos. The project uses React, React Router, Reactstrap, and AlertifyJS to showcase component-based design and state management with class components. I developed this project to further my understanding and mastery of React.\n\n## Table of Contents\n\n-   [React E-commerce Application](#react-e-commerce-application)\n    -   [Table of Contents](#table-of-contents)\n    -   [Features](#features)\n    -   [Installation](#installation)\n    -   [Local Development](#local-development)\n    -   [Usage](#usage)\n    -   [Deployment](#deployment)\n        -   [React Application (Vercel)](#react-application-vercel)\n        -   [JSON Server (Render)](#json-server-render)\n    -   [Project Structure](#project-structure)\n    -   [Technologies](#technologies)\n    -   [Contributing](#contributing)\n    -   [Screenshots](#screenshots)\n        -   [Home](#home)\n        -   [Filtering and Add Cart Function](#filtering-and-add-cart-function)\n        -   [Cart and Remove Function](#cart-and-remove-function)\n        -   [Form Demo 1](#form-demo-1)\n        -   [Form Demo 2](#form-demo-2)\n    -   [License](#license)\n    -   [Author](#author)\n\n## Features\n\n-   **Category Filtering:** Browse and filter products by category.\n-   **Product Listing:** Display a list of products with details such as product name, price, and stock.\n-   **Shopping Cart:** Add products to a shopping cart with options to remove items.\n-   **Form Demos:** Includes two form demo pages showcasing form handling and validations.\n-   **Responsive Navigation:** Uses Reactstrap for responsive UI components including navbar, dropdowns, and tables.\n-   **Alert Notifications:** Uses AlertifyJS for notifications when items are added or removed from the cart.\n\n## Installation\n\n1. **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/orhunyildiz/react-ecommerce-app.git\n    ```\n\n2. **Navigate to the project directory:**\n\n    ```bash\n    cd react-ecommerce-app\n    ```\n\n3. **Install dependencies:**\n\n    ```bash\n    npm install\n    ```\n\n4. **Configuration:**\n    - Ensure you have a valid `db.json` file inside the `api/` directory with your categories and products data.\n    - If needed, update API endpoints in the code to point to your deployed JSON Server service.\n\n## Local Development\n\nFor local development, run both the React application and the JSON Server concurrently by executing:\n\n```bash\nnpm run dev\n```\n\n-   **React Application:** Accessible at [http://localhost:3000](http://localhost:3000)\n-   **JSON Server:** Accessible at [http://localhost:3001](http://localhost:3001)\n\n## Usage\n\n1. **Run the development environment:**\n\n    - Execute `npm run dev` and open your browser to [http://localhost:3000](http://localhost:3000).\n\n2. **Routes:**\n    - `/` – Displays the Product List along with the Category List.\n    - `/cart` – Shows the Cart List with added products.\n    - `/form1/` – Displays Form Demo 1.\n    - `/form2/` – Displays Form Demo 2.\n    - Any other path will render a \"Not Found\" page.\n\n## Deployment\n\n### React Application (Vercel)\n\n-   The React application is deployed on Vercel and can be accessed at:  \n    [https://react-ecommerce-app-test.vercel.app/](https://react-ecommerce-app-test.vercel.app/)\n-   **Vercel Settings:**\n    -   **Build Command:** `npm run build`\n    -   **Output Directory:** `build`\n\n### JSON Server (Render)\n\n-   The JSON Server is deployed separately on Render.\n-   **Production Start Command:** Render runs the `start` script defined in package.json, which is set to use a custom server file.\n-   **server.js Example:**\n\n    ```javascript\n    const jsonServer = require(\"json-server\");\n    const server = jsonServer.create();\n    const router = jsonServer.router(\"api/db.json\");\n    const middlewares = jsonServer.defaults();\n\n    server.use(middlewares);\n\n    // Add CORS header to allow external requests\n    server.use((req, res, next) =\u003e {\n        res.header(\"Access-Control-Allow-Origin\", \"*\");\n        next();\n    });\n\n    server.use(router);\n    server.listen(process.env.PORT || 3001, () =\u003e {\n        console.log(\"JSON Server is running\");\n    });\n    ```\n\n-   **Deployment Steps on Render:**\n    -   **Build Command:** `npm install` (if you're not building a React app)\n    -   **Start Command:** `npm start` (which runs `node server.js`)\n-   **Note:** Update API URLs in your React application to point to your Render JSON Server URL if needed.\n\n## Project Structure\n\n```\nreact-ecommerce-app/\n├── public/\n├── src/\n│   ├── components/\n│   │   ├── App.js         // Main component that sets up routes and state management\n│   │   ├── Navi.js        // Navigation component with links and cart summary\n│   │   ├── CategoryList.js// Category list for filtering products\n│   │   ├── ProductList.js // Displays list of products with an \"add to cart\" functionality\n│   │   ├── CartList.js    // Table that shows the shopping cart details\n│   │   ├── CartSummary.js // Dropdown summary of the cart items in the navbar\n│   │   ├── FormDemo1.js   // Simple form demonstration using uncontrolled inputs\n│   │   ├── FormDemo2.js   // Form demo using Reactstrap components with AlertifyJS notifications\n│   │   └── NotFound.js    // Fallback component for unknown routes\n│   ├── index.js           // Renders the App component within BrowserRouter\n│   └── reportWebVitals.js // For measuring performance\n├── api/\n│   └── db.json            // JSON data for categories and products\n├── server.js              // Custom server file to run JSON Server with CORS support\n├── package.json\n└── README.md\n```\n\n## Technologies\n\n-   **React:** Front-end library for building user interfaces.\n-   **React Router:** For managing routing in the application.\n-   **Reactstrap:** Bootstrap components built for React.\n-   **AlertifyJS:** For showing alert notifications.\n-   **Bootstrap:** For styling and responsive design.\n-   **JSON Server:** For a mock backend API.\n\n## Contributing\n\nContributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.\n\n1. Fork the repository.\n2. Create your feature branch (`git checkout -b feature/my-new-feature`).\n3. Commit your changes (`git commit -am 'Add some feature'`).\n4. Push to the branch (`git push origin feature/my-new-feature`).\n5. Open a pull request.\n\n## Screenshots\n\n### Home\n\n![Home](https://i.imgur.com/3PJA5w6.png)\n\n### Filtering and Add Cart Function\n\n![Filtering](https://i.imgur.com/r4ZI6We.png)\n\n### Cart and Remove Function\n\n![Cart and Remove Function](https://i.imgur.com/aRkSk6P.png)\n\n### Form Demo 1\n\n![Form Demo 1](https://i.imgur.com/mO3OopX.png)\n\n### Form Demo 2\n\n![Form Demo 2](https://i.imgur.com/VHQTx22.png)\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Author\n\nOrhun Yildiz\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forhunyildiz%2Freact-ecommerce-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forhunyildiz%2Freact-ecommerce-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forhunyildiz%2Freact-ecommerce-app/lists"}