{"id":21570023,"url":"https://github.com/ribtas007/fast-react-pizza","last_synced_at":"2026-04-18T04:02:50.788Z","repository":{"id":222353793,"uuid":"757001253","full_name":"RIBTAS007/fast-react-pizza","owner":"RIBTAS007","description":"Pizza ordering app made using React + Vite","archived":false,"fork":false,"pushed_at":"2024-02-13T21:36:28.000Z","size":1159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T06:13:17.528Z","etag":null,"topics":["javascript","react-router-dom","reactjs","redux","redux-toolkit","tailwind","thunk"],"latest_commit_sha":null,"homepage":"https://ribtas007.github.io/fast-react-pizza/","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/RIBTAS007.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":"2024-02-13T18:02:18.000Z","updated_at":"2024-02-13T21:40:31.000Z","dependencies_parsed_at":"2024-11-24T11:11:39.455Z","dependency_job_id":"6395d62f-9241-4b8e-af23-7a5e27659d36","html_url":"https://github.com/RIBTAS007/fast-react-pizza","commit_stats":null,"previous_names":["ribtas007/fast-react-pizza"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RIBTAS007/fast-react-pizza","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIBTAS007%2Ffast-react-pizza","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIBTAS007%2Ffast-react-pizza/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIBTAS007%2Ffast-react-pizza/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIBTAS007%2Ffast-react-pizza/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RIBTAS007","download_url":"https://codeload.github.com/RIBTAS007/fast-react-pizza/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIBTAS007%2Ffast-react-pizza/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31955920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["javascript","react-router-dom","reactjs","redux","redux-toolkit","tailwind","thunk"],"created_at":"2024-11-24T11:11:29.814Z","updated_at":"2026-04-18T04:02:46.545Z","avatar_url":"https://github.com/RIBTAS007.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Fast REACT PIZZA\n\n- in this read me I have shared my learnings.\n\n## get started with Vite\n\n- You can use npm create vite to start a project with vite.\n- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n- Currently, two official plugins are available:\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n- So when we install using vite no extra library gets installed. Hence we need to do npm i\n- in vite we use `npm run dev` instead of `npm start`\n\n## setup eslint\n\n- we also need to configure eslint: `npm i eslint vite-plugin-eslint eslint-config-react-app --save-dev`\n- after this we need toupdate eslintrc.json and vite.config.json files\n\n## Planning the project\n\n- divide app into features\n- divide apps into pages\n  - think about overall and page level UI\n  - break UI into components\n  - design asnd build static version\n- divide the app into feature categories\n  - think about state management and dataflow\n- decide th tech stack we need to use.\n\n## components\n\n- user - global UI state\n- menu - global remote state ( menu comes from API)\n- cart - global\n- order - global remote\n\n## tech stack\n\n- react router (render as you fetch instead of fetch on render) - routing + remote state management\n- tailwindcss - styling\n- redux - UI state manegement\n\n## folder structure\n\n- we will follow feature based folder structure\n- for doing this you can download the starter boiler plate code.\n\n## react router dom\n\n- npm i react-router-dom\n- hen we can use createBrowser router to create the paths\n- and then we can return the routerprovider ad pass the routers as an argument\n- AppLayout will be the parent compinent so it will also be in the parent route\n- the child routes data is shown in the outlet.\n\n## loader in react router dom\n\n- we create function to fetch data from some api\n- then we provide that function to one of our routes, as soon as the application goes to that route.\n- once the data is reached it will be provide to the component using a custom hook.\n- so first we will create a loader function in menu.jsx that calls the api function.\n- thn we will import that loader function and will add it into thr route path of menu\n- then in the menu component we will use the `useloaderdata()` hook to import it.\n\n## usenavigation hook\n\n- it tells whether the data is loading or is idle.\n- we can use it to show the loader\n- we can get the error using useRouteError() hook when their is some issue in the routing.\n- useNavigate hook is different from usenavigation hook, it is used when we want to change the route based on cretain conditions.\n\n## Form\n\n- sor Form is a component provided by react router.\n- so whenever we submit this Form, react router will automatically call the action function.\n- lecture number 291 is important\n- the action function will then the response that we submitted in the form using request.\n- Then we can call the createorder function and then we can use `redirect` to direct us to the order page.\n- we need to use `redirect` instead of useNavigate hook because we usenvaigate can only be called inside a component function.\n- useActionData() hook is used to get the data that is returned by the action.\n\n## Tailwind\n\n- we will be using tailwind to style our app\n\n## Redux toolkit\n\n- npm i @reduxjs/toolkit react-redux\n- ```javascript\n  decreaseItemQuantity(state, action) {\n      const item = state.cart.find((item) =\u003e item.pizzaId === action.payload);\n      item.quantity--;\n      item.totalprice = item.quantity * item.unitPrice;\n      if (item.quantity === 0) {\n        cartSlice.caseReducers.deleteItem(state, action);\n      }\n    },\n  ```\n- by doing this we can call one reducer function inside another reducer function.\n- we can aslo directly use store reducer like store.dispatch(clearCart()); but we should not overuse it.\n- redux by nature is synch, so in order to work with async code we can use thunks\n- thunks is a middleware that sits between the dispatching and the reducer itself.\n- in the PUT request we need to send the entire object, in the patch request we just need to send the data we want to update or add in the object.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fribtas007%2Ffast-react-pizza","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fribtas007%2Ffast-react-pizza","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fribtas007%2Ffast-react-pizza/lists"}