docs: update README for improved setup instructions and tech stack overview
This commit is contained in:
@@ -11,26 +11,52 @@
|
|||||||
The Online Shop is build with React. It has custom responsive layout styled with SCSS. It makes an API call to fetch mock products from [Dummy JSON API](https://dummyjson.com/products) with Redux [RTK Query](https://redux-toolkit.js.org/rtk-query/overview). Added also Toastify for notifications.
|
The Online Shop is build with React. It has custom responsive layout styled with SCSS. It makes an API call to fetch mock products from [Dummy JSON API](https://dummyjson.com/products) with Redux [RTK Query](https://redux-toolkit.js.org/rtk-query/overview). Added also Toastify for notifications.
|
||||||
The application shows a product home page and a cart page, the routing is done with React Router.
|
The application shows a product home page and a cart page, the routing is done with React Router.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
---
|
---
|
||||||
### Under the repository name, click on clone or download. In the terminal paste this command:
|
## Quick overview
|
||||||
|
---
|
||||||
|
- Browse products retrieved from a mock API
|
||||||
|
- View product details and add items to a cart
|
||||||
|
- Update item quantities or remove items from the cart
|
||||||
|
- Toast notifications for user actions
|
||||||
|
- Responsive layout using SCSS
|
||||||
|
|
||||||
|
---
|
||||||
|
## Tech stack
|
||||||
|
---
|
||||||
|
- React (functional components + hooks)
|
||||||
|
- Redux Toolkit + RTK Query for async data
|
||||||
|
- React Router for navigation
|
||||||
|
- SCSS for styling
|
||||||
|
- react-toastify (notifications)
|
||||||
|
|
||||||
|
---
|
||||||
|
## Getting started (local)
|
||||||
|
---
|
||||||
|
1. Clone the repository :
|
||||||
```git clone https://dadobos.github.io/online-shop.git```
|
```git clone https://dadobos.github.io/online-shop.git```
|
||||||
|
2. Go into the project folder:
|
||||||
### Open the project in VSCode or move inside the folder with:
|
|
||||||
|
|
||||||
```cd online-shop```
|
```cd online-shop```
|
||||||
|
3. Install dependencies:
|
||||||
### Install the npm packages:
|
|
||||||
|
|
||||||
```npm install```
|
```npm install```
|
||||||
|
4. Start the dev server:
|
||||||
### Run the application with:
|
|
||||||
|
|
||||||
```npm start```
|
```npm start```
|
||||||
|
5. Open the app in your browser:
|
||||||
### In the browser open the "3000" port:
|
|
||||||
|
|
||||||
```http://localhost:3000/```
|
```http://localhost:3000/```
|
||||||
|
|
||||||
|
---
|
||||||
|
## Common scripts
|
||||||
|
---
|
||||||
|
- npm start — start dev server (hot reload)
|
||||||
|
- npm run build — create a production build
|
||||||
|
- npm test — run tests (if present)
|
||||||
|
- npm run lint — run linters (if configured)
|
||||||
|
|
||||||
|
---
|
||||||
|
## Notes for development
|
||||||
|
---
|
||||||
|
- API calls are handled with RTK Query; service files are located in src (look for a services or api directory).
|
||||||
|
- Styles are in SCSS — components can import their module styles or use shared partials.
|
||||||
|
- Routing lives under src (check App or routes-related files) — add pages or adjust routes there.
|
||||||
|
- For mock API changes, update the base URL or endpoints in the RTK Query service file.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Generated
+6
-5
@@ -4186,7 +4186,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
|
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
|
||||||
"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
|
"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/regexpp": "^4.4.0",
|
"@eslint-community/regexpp": "^4.4.0",
|
||||||
"@typescript-eslint/scope-manager": "5.62.0",
|
"@typescript-eslint/scope-manager": "5.62.0",
|
||||||
@@ -16934,6 +16933,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
|
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
|
||||||
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
|
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
|
||||||
"license": "(MIT OR CC0-1.0)",
|
"license": "(MIT OR CC0-1.0)",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
},
|
},
|
||||||
@@ -17038,9 +17038,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "5.9.3",
|
"version": "4.9.5",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
|
||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
@@ -17048,7 +17048,7 @@
|
|||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.17"
|
"node": ">=4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/unbox-primitive": {
|
"node_modules/unbox-primitive": {
|
||||||
@@ -17438,6 +17438,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
|
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
|
||||||
"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
|
"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/bonjour": "^3.5.9",
|
"@types/bonjour": "^3.5.9",
|
||||||
"@types/connect-history-api-fallback": "^1.3.5",
|
"@types/connect-history-api-fallback": "^1.3.5",
|
||||||
|
|||||||
Reference in New Issue
Block a user