(
43 | ({ className, variant, size, asChild = false, ...props }, ref) => {
44 | const Comp = asChild ? Slot : "button"
45 | return (
46 |
32 |
33 |
35 |
36 | {productsTabs.map((tab) => (
37 |
38 |
48 | ))}
49 |
50 |
51 |
53 |
54 | {usersTabs.map((tab) => (
55 |
56 |
66 | ))}
67 |
68 |
69 | );
70 | };
71 |
72 | export default Sidebar;
73 |
--------------------------------------------------------------------------------
/app/api/products/[id]/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { getSingleProduct } from "@helper/filterProducts";
3 | import { parseRequestBody } from "@helper/parseRequestBody";
4 | import { productSchema } from "@helper/schema";
5 | import { createPayload } from "@helper/createPayload";
6 |
7 |
8 | // method: GET
9 | // supported route: ["api/products/:id"]
10 | // message: returns the last product if the requested product not found.
11 |
12 | export const GET = async (request: NextRequest, {params} : {params: {id: string}}) => {
13 | try {
14 | const { id } = params;
15 | const product = getSingleProduct(parseInt(id))
16 | const payload = createPayload({
17 | status: 'SUCCESS',
18 | message: `Here you've a single product requested for id ${parseInt(id)}`,
19 | product
20 | })
21 | return NextResponse.json(payload)
22 | } catch (err: any) {
23 | const payload = createPayload({
24 | status: 'BAD-REQUEST',
25 | message: err.message,
26 | })
27 | return NextResponse.json(payload, {status: 400})
28 | }
29 | }
30 |
31 |
32 | // method: PUT
33 | // supported route: ["api/products/:id"]
34 |
35 | export const PUT = async (request: NextRequest, {params} : {params: {id: string}}) => {
36 | try {
37 | const { id } = params;
38 | const product = await parseRequestBody(request)
39 | const parsed = productSchema.parse(product)
40 | const payload = createPayload({
41 | status: "SUCCESS",
42 | message: `The product with id ${parseInt(id)} has been replaced with your provided data`,
43 | product: {id, ...parsed}
44 | })
45 | return NextResponse.json(payload)
46 | } catch (err: any) {
47 | const payload = createPayload({
48 | status: 'BAD-REQUEST',
49 | message: err.message,
50 | })
51 | return NextResponse.json(payload, { status: 400 })
52 | }
53 | }
54 |
55 |
56 | // method: PATCH
57 | // supported route: ["api/products/:id"]
58 |
59 | export const PATCH = async (request: NextRequest, {params} : {params: {id: string}}) => {
60 | try {
61 | const { id } = params;
62 | const productToUpdate = await parseRequestBody(request)
63 | const product = getSingleProduct(parseInt(id))
64 | const parsed = productSchema.parse(productToUpdate)
65 | const payload = createPayload({
66 | status: 'SUCCESS',
67 | message: `The product with id ${parseInt(id)} has been updated with your provided data`,
68 | product: {...product, ...parsed}
69 | })
70 | return NextResponse.json(payload)
71 | } catch (err: any) {
72 | const payload = createPayload({
73 | status: 'BAD-REQUEST',
74 | message: err.message,
75 | })
76 | return NextResponse.json(payload, { status: 400 })
77 | }
78 | }
79 |
80 |
81 | // method: DELETE
82 | // supported route: ["api/products/:id"]
83 |
84 | export const DELETE = async (request: NextRequest, {params} : {params: {id: string}}) => {
85 | try {
86 | const { id } = params;
87 | const payload = createPayload({
88 | status: 'SUCCESS',
89 | message: `Product with id ${parseInt(id)} has been deleted`,
90 | })
91 | return NextResponse.json(payload)
92 | } catch (err: any) {
93 | const payload = createPayload({
94 | status: 'BAD-REQUEST',
95 | message: err.message,
96 | })
97 | return NextResponse.json(payload, { status: 400 })
98 | }
99 | }
--------------------------------------------------------------------------------
/app/api/users/[id]/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { getSingleUser } from "@helper/filterUsers";
3 | import { parseRequestBody } from "@helper/parseRequestBody";
4 | import { userSchema } from "@helper/schema";
5 | import { createPayload } from "@helper/createPayload";
6 |
7 |
8 | // method: GET
9 | // supported route: ["api/users/:id"]
10 | // message: returns the last user if the requested user not found.
11 |
12 | export const GET = async (request: NextRequest, {params} : {params: {id: string}}) => {
13 | try {
14 | const { id } = params;
15 | const user = getSingleUser(parseInt(id))
16 | const payload = createPayload({
17 | status: 'SUCCESS',
18 | message: `Here you've a single user requested for id ${parseInt(id)}`,
19 | user
20 | })
21 | return NextResponse.json(payload)
22 | } catch (err: any) {
23 | const payload = createPayload({
24 | status: 'BAD-REQUEST',
25 | message: err.message,
26 | })
27 | return NextResponse.json(payload, {status: 400})
28 | }
29 | }
30 |
31 |
32 | // method: PUT
33 | // supported route: ["api/users/:id"]
34 |
35 | export const PUT = async (request: NextRequest, {params} : {params: {id: string}}) => {
36 | try {
37 | const { id } = params;
38 | const userToUpdate = await parseRequestBody(request)
39 | const user = getSingleUser(parseInt(id))
40 | const parsed = userSchema.parse(userToUpdate)
41 | const payload = createPayload({
42 | status: 'SUCCESS',
43 | message: `The user with id ${parseInt(id)} has been updated with your provided data`,
44 | user: {...user, ...parsed}
45 | })
46 | return NextResponse.json(payload)
47 | } catch (err: any) {
48 | const payload = createPayload({
49 | status: 'BAD-REQUEST',
50 | message: err.message,
51 | })
52 | return NextResponse.json(payload, { status: 400 })
53 | }
54 | }
55 |
56 | // method: PATCH
57 | // supported route: ["api/users/:id"]
58 |
59 | export const PATCH = async (request: NextRequest, {params} : {params: {id: string}}) => {
60 | try {
61 | const { id } = params;
62 | const userToUpdate = await parseRequestBody(request)
63 | const user = getSingleUser(parseInt(id))
64 | const parsed = userSchema.parse(userToUpdate)
65 | const payload = createPayload({
66 | status: 'SUCCESS',
67 | message: `The user with id ${parseInt(id)} has been updated with your provided data`,
68 | user: {...user, ...parsed}
69 | })
70 | return NextResponse.json(payload)
71 | } catch (err: any) {
72 | const payload = createPayload({
73 | status: 'BAD-REQUEST',
74 | message: err.message,
75 | })
76 | return NextResponse.json(payload, { status: 400 })
77 | }
78 | }
79 |
80 | // method: DELETE
81 | // supported route: ["api/users/:id"]
82 |
83 |
84 |
85 | export const DELETE = async (request: NextRequest, {params} : {params: {id: string}}) => {
86 | try {
87 | const { id } = params;
88 | const payload = createPayload({
89 | status: 'SUCCESS',
90 | message: `User with id ${parseInt(id)} has been deleted`,
91 | })
92 | return NextResponse.json(payload)
93 | } catch (err: any) {
94 | const payload = createPayload({
95 | status: 'BAD-REQUEST',
96 | message: err.message,
97 | })
98 | return NextResponse.json(payload, { status: 400 })
99 | }
100 | }
--------------------------------------------------------------------------------
/app/components/Route.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import Link from "next/link";
3 |
4 | const Route = () => {
5 | const routes = [
6 | {
7 | method: "GET",
8 | link: {
9 | href: "https://fakestoreapi.in/api/products"
10 | ,
11 | label: "https://fakestoreapi.in/api/products",
12 | },
13 | },
14 | {
15 | method: "GET",
16 | link: {
17 | href: "https://fakestoreapi.in/api/products/1",
18 | label: "https://fakestoreapi.in/api/products/1",
19 | },
20 | },
21 | {
22 | method: "GET",
23 | link: {
24 | href: "https://fakestoreapi.in/api/products?page=2",
25 | label: "https://fakestoreapi.in/api/products?page=2",
26 | },
27 | },
28 | {
29 | method: "GET",
30 | link: {
31 | href: "https://fakestoreapi.in/api/products?limit=20",
32 | label: "https://fakestoreapi.in/api/products?limit=20",
33 | },
34 | },
35 | {
36 | method: "GET",
37 | link: {
38 | href: "https://fakestoreapi.in/api/products/category",
39 | label: "https://fakestoreapi.in/api/products/category",
40 | },
41 | },
42 | {
43 | method: "GET",
44 | link: {
45 | href: "https://fakestoreapi.in/api/products/category?type=mobile",
46 | label: "https://fakestoreapi.in/api/products/category?type=mobile",
47 | },
48 | },
49 | {
50 | method: "GET",
51 | link: {
52 | href: "https://fakestoreapi.in/api/products/category?type=tv&sort=desc",
53 | label:
54 | "https://fakestoreapi.in/api/products/category?type=tv&sort=desc",
55 | },
56 | },
57 | {
58 | method: "POST",
59 | link: {
60 | href: "https://fakestoreapi.in/api/products",
61 | label: "https://fakestoreapi.in/api/products",
62 | },
63 | },
64 | {
65 | method: "PUT",
66 | link: {
67 | href: "https://fakestoreapi.in/api/products/5",
68 | label: "https://fakestoreapi.in/api/products/5",
69 | },
70 | },
71 | {
72 | method: "PATCH",
73 | link: {
74 | href: "https://fakestoreapi.in/api/products/7",
75 | label: "https://fakestoreapi.in/api/products/7",
76 | },
77 | },
78 | {
79 | method: "DELETE",
80 | link: {
81 | href: "https://fakestoreapi.in/api/products/3",
82 | label: "https://fakestoreapi.in/api/products/3",
83 | },
84 | },
85 | ];
86 |
87 | return (
88 |
89 |
90 |
Routes
91 |
All HTTP methods are supported.
92 |
93 |
94 | {routes.map((route) => (
95 |
99 |
107 | {route.method}
108 |
109 |
121 | ))}
122 |
123 |
12 |
13 | {`fetch("https://fakestoreapi.in/api/users")
14 | .then(res => res.json())
15 | .then(res => console.log(res))
16 | `}
17 |
18 |
20 | )
21 | }
22 | export const AllUsersOutputSnip = () => {
23 |
24 | return (
25 |
26 |
31 |
32 |
33 | {`
34 | {
35 | "status": "SUCCESS",
36 | "message": "Here you go! You've received 20 users.",
37 | "users": [
38 | {
39 | "id": 1,
40 | "email": "michael@simpson.com",
41 | "username": "michaelsimpson",
42 | "password": "@K(5UejhL&",
43 | "name": {
44 | "firstname": "Michael",
45 | "lastname": "Simpson"
46 | },
47 | "address": {
48 | "city": "Joelton",
49 | "street": "Angela Spring",
50 | "number": "868",
51 | "zipcode": "75070",
52 | "geolocation": {
53 | "lat": 19.7091875,
54 | "long": -14.782061
55 | }
56 | },
57 | "phone": "562.548.9768x73853"
58 | },
59 | //{...}
60 | {
61 | "id": 20,
62 | "email": "timothy@burton.com",
63 | "username": "timothyburton",
64 | "password": "&$)QeGpZ25",
65 | "name": {
66 | "firstname": "Timothy",
67 | "lastname": "Burton"
68 | },
69 | "address": {
70 | "geolocation": {...}
71 | },
72 | "phone": "+1-293-912-5353x125"
73 | }
74 | ]
75 | }
76 | `}
77 |
78 |
79 |
87 |
88 | {`fetch("https://fakestoreapi.in/api/users/7")
89 | .then(res => res.json())
90 | .then(res => console.log(res))
91 | `}
92 |
93 |
95 | )
96 | }
97 | export const SingleUserOutputSnip = () => {
98 |
99 | return (
100 |
101 |
106 |
107 |
108 | {`
109 | {
110 | "status": "SUCCESS",
111 | "message": "Here you've a single user requested for id 7",
112 | "user": {
113 | "id": 7,
114 | "email": "tracy@frey.com",
115 | "username": "tracyfrey",
116 | "password": "#y5ITp+_(C",
117 | "name": {
118 | "firstname": "Tracy",
119 | "lastname": "Frey"
120 | },
121 | "address": {
122 | "city": "East Mary",
123 | "street": "Tracey Trace",
124 | "number": "107",
125 | "zipcode": "16482",
126 | "geolocation": {
127 | "lat": -0.870534,
128 | "long": -98.235893
129 | }
130 | },
131 | "phone": "493.409.0584"
132 | }
133 | }
134 | `}
135 |
136 |
137 |
145 |
146 | {`fetch("https://fakestoreapi.in/api/users?limit=2")
147 | .then(res => res.json())
148 | .then(res => console.log(res))
149 | `}
150 |
151 |
153 | )
154 | }
155 | export const LimitedUserOutputSnip = () => {
156 |
157 | return (
158 |
159 |
164 |
165 |
166 | {`
167 | {
168 | "status": "SUCCESS",
169 | "message": "Here you go! You've received 2 users.",
170 | "users": [
171 | {
172 | "id": 1,
173 | "email": "michael@simpson.com",
174 | "username": "michaelsimpson",
175 | "password": "@K(5UejhL&",
176 | "name": {...},
177 | "address": {...},
178 | "phone": "562.548.9768x73853"
179 | },
180 | {
181 | "id": 2,
182 | "email": "april@boyd.com",
183 | "username": "aprilboyd",
184 | "password": "k8WR_hX0+m",
185 | "name": {...},
186 | "address": {...},
187 | "phone": "9329508218"
188 | }
189 | ]
190 | }
191 | `}
192 |
193 |
194 |
202 |
203 | {`fetch("https://fakestoreapi.in/api/users?page=2")
204 | .then(res => res.json())
205 | .then(res => console.log(res))
206 | `}
207 |
208 |
210 |
211 |
212 | ⚡ By default, we send 20 users. use{" "}
213 |
214 | /users?page=2&limit=20
215 | {" "}
216 | to limit users per page.
217 |
218 |
219 | {/* 💁♂️ You don't need to pass{" "} */}
220 |
221 | ?skip=20
222 | {" "}
223 | query, we took care of that.
224 |
225 |
233 |
238 |
239 |
240 | {`
241 | {
242 | "status": "SUCCESS",
243 | "message": "Here you go! You've received 20 users.",
244 | "users": [
245 | {
246 | "id": 21,
247 | "email": "destiny@powers.com",
248 | "username": "destinypowers",
249 | "password": "h6I6La6H2(",
250 | "name": {...},
251 | "address": {...},
252 | "phone": "(725)466-6824"
253 | },
254 | //{...}
255 | {
256 | "id": 40,
257 | "email": "lisa@underwood.com",
258 | "username": "lisaunderwood",
259 | "password": "Lt7R*0Go^@",
260 | "name": {...},
261 | "address": {...},
262 | "phone": "(392)603-8492"
263 | }
264 | ]
265 | }
266 | `}
267 |
268 |
269 |
277 |
278 | {`fetch("https://fakestoreapi.in/api/users", {
279 | method: 'POST',
280 | headers: { 'Content-Type': 'application/json' },
281 | body: JSON.stringify({
282 | "email": "Thala@seven.com",
283 | "username": "MSDhoni",
284 | "password": "@2011WC",
285 | "name": {
286 | "firstname": "Mahendra Singh",
287 | "lastname": "Dhoni"
288 | },
289 | "address": {
290 | "city": "Rachi",
291 | "street": "Local Boy",
292 | "number": "7777777",
293 | "zipcode": "7777",
294 | "geolocation": {
295 | "lat": 77.77777,
296 | "long": 77.77777
297 | }
298 | },
299 | "phone": "777777777"
300 | })
301 | })
302 | `}
303 |
304 |
306 | )
307 | }
308 | export const AddUserOutputSnip = () => {
309 |
310 | return (
311 |
312 |
317 |
318 |
319 | {`
320 | {
321 | "status": "SUCCESS",
322 | "message": "Here is the user you sent, which we have just returned you back...",
323 | "user": {
324 | "id": 51,
325 | "email": "Thala@seven.com",
326 | "username": "MSDhoni",
327 | "password": "@2011WC",
328 | "name": {
329 | "firstname": "Mahendra Singh",
330 | "lastname": "Dhoni"
331 | },
332 | "address": {
333 | "city": "Rachi",
334 | "street": "Local Boy",
335 | "number": "7777777",
336 | "zipcode": "7777",
337 | "geolocation": {
338 | "lat": 77.77777,
339 | "long": 77.77777
340 | }
341 | },
342 | "phone": "777777777"
343 | }
344 | }
345 | `}
346 |
347 |
348 |
356 |
357 | {`fetch("https://fakestoreapi.in/api/users/18", {
358 | method: 'PUT',
359 | headers: { 'Content-Type': 'application/json' },
360 | body: JSON.stringify({
361 | "email": "Virat@king.com",
362 | "username": "Viratkholi",
363 | "password": "@ESALEECUPNAMDE",
364 | "name": {
365 | "firstname": "Virat",
366 | "lastname": "Kohli"
367 | },
368 | "address": {
369 | "city": "Delhi",
370 | "street": "Local Boy",
371 | "number": "181818",
372 | "zipcode": "181818",
373 | "geolocation": {
374 | "lat": 18.1818,
375 | "long": 18.181818
376 | }
377 | },
378 | "phone": "18181818"
379 | })
380 | })
381 | `}
382 |
383 |
385 | )
386 | }
387 | export const UpdateUserOutputSnip = () => {
388 |
389 | return (
390 |
391 |
396 |
397 |
398 | {`
399 | {
400 | "status": "SUCCESS",
401 | "message": "The user with id 18 has been updated with your provided data",
402 | "user": {
403 | "id": 18,
404 | "email": "Virat@king.com",
405 | "username": "Viratkholi",
406 | "password": "@ESALEECUPNAMDE",
407 | "name": {
408 | "firstname": "Virat",
409 | "lastname": "Kohli"
410 | },
411 | "address": {
412 | "city": "Delhi",
413 | "street": "Local Boy",
414 | "number": "181818",
415 | "zipcode": "181818",
416 | "geolocation": {
417 | "lat": 18.1818,
418 | "long": 18.181818
419 | }
420 | },
421 | "phone": "18181818"
422 | }
423 | }
424 | `}
425 |
426 |
427 |
435 |
436 | {`fetch("https://fakestoreapi.in/api/users/11", {
437 | method: 'DELETE',
438 | }).then(res => res.json())
439 | .then(res => console.log(res))
440 | `}
441 |
442 |
444 | )
445 | }
446 | export const DeleteUserOutputSnip = () => {
447 |
448 | return (
449 |
450 |
455 |
456 |
457 | {`
458 | {
459 | "status": "SUCCESS",
460 | "message": "User with id 11 has been deleted"
461 | }
462 | `}
463 |
464 |
465 |
12 |
13 | {`fetch("https://fakestoreapi.in/api/products")
14 | .then(res => res.json())
15 | .then(res => console.log(res))
16 | `}
17 |
18 |
20 | )
21 | }
22 | export const AllProductsOutputSnip = () => {
23 |
24 | return (
25 |
26 |
31 |
32 |
33 | {`
34 | {
35 | "status": "SUCCESS",
36 | "message": "Here you go! You've received...",
37 | "products": [
38 | {
39 | id: 1,
40 | title: "Sony WH-1000XM3...",
41 | image: "https://storage...",
42 | price: 773,
43 | description: "Industry leading Active Noise...",
44 | brand: "sony",
45 | model: "WH-1000XM3",
46 | color: "silver",
47 | category: "audio",
48 | discount: 11
49 | },
50 | {
51 | id: 2,
52 | title: "Microsoft Xbox...",
53 | image: "https://storage...",
54 | price: 57,
55 | description: "Experience the modernized design of the Xbox...",
56 | brand: "microsoft",
57 | model: "Xbox X/S",
58 | color: "white",
59 | category: "gaming",
60 | popular: true,
61 | discount: 4
62 | },
63 | // {...},
64 | {
65 | id: 149,
66 | title: 'Security Camera, IP67 Waterproof...',
67 | image: 'https://storage...',
68 | price: 737,
69 | description: 'Microwave induction is an active...',
70 | brand: "Wuqioei",
71 | model: "YN50",
72 | color: "black+white",
73 | category: "appliances",
74 | onSale: true,
75 | discount: 23
76 | }
77 | ]
78 | }
79 | `}
80 |
81 |
82 |
90 |
91 | {`fetch("https://fakestoreapi.in/api/products/2")
92 | .then(res => res.json())
93 | .then(res => console.log(res))
94 | `}
95 |
96 |
98 | )
99 | }
100 | export const SingleProductOutputSnip = () => {
101 |
102 | return (
103 |
104 |
109 |
110 |
111 | {`
112 | {
113 | "status": "SUCCESS",
114 | "message": "Here you've a single product requested for id 2",
115 | "product": {
116 | "id": 2,
117 | "title": "Microsoft Xbox X/S Wireless...",
118 | "image": "https://storage...",
119 | "price": 57,
120 | "description": "Experience the modernized design...",
121 | "brand": "microsoft",
122 | "model": "Xbox X/S",
123 | "color": "white",
124 | "category": "gaming",
125 | "popular": true,
126 | "discount": 4
127 | }
128 | }
129 | `}
130 |
131 |
132 |
140 |
141 | {`fetch("https://fakestoreapi.in/api/products?limit=2")
142 | .then(res => res.json())
143 | .then(res => console.log(res))
144 | `}
145 |
146 |
148 | )
149 | }
150 | export const LimitedProductOutputSnip = () => {
151 |
152 | return (
153 |
154 |
159 |
160 |
161 | {`
162 | {
163 | "status": "SUCCESS",
164 | "message": "Here you go! You've received 2...",
165 | "products": [
166 | {
167 | "id": 1,
168 | "title": "Sony WH-1000XM3 Bluetooth...",
169 | "image": "https://storage...",
170 | "price": 773,
171 | "description": "Digital noise cancelling...",
172 | "brand": "sony",
173 | "model": "WH-1000XM3",
174 | "color": "silver",
175 | "category": "audio",
176 | "discount": 11
177 | },
178 | {
179 | "id": 2,
180 | "title": "Microsoft Xbox X/S Wireless...",
181 | "image": "https://storage...",
182 | "price": 57,
183 | "description": "Experience the modernized...",
184 | "brand": "microsoft",
185 | "model": "Xbox X/S",
186 | "color": "white",
187 | "category": "gaming",
188 | "popular": true,
189 | "discount": 4
190 | }
191 | ]
192 | }
193 | `}
194 |
195 |
196 |
204 |
205 | {`fetch("https://fakestoreapi.in/api/products?page=2")
206 | .then(res => res.json())
207 | .then(res => console.log(res))
208 | `}
209 |
210 |
212 |
213 |
214 | ⚡ By default, we send 50 products. use{" "}
215 |
216 | /products?page=2&limit=20
217 | {" "}
218 | to limit products per page.
219 |
220 |
221 | 💁♂️ You don't need to pass{" "}
222 |
223 | ?skip=20
224 | {" "}
225 | query, we took care of that.
226 |
227 |
235 |
240 |
241 |
242 | {`
243 | {
244 | "status": "SUCCESS",
245 | "message": "Here you go! You've received 50...",
246 | "products": [
247 | {
248 | "id": 51,
249 | "title": " Samsung 4K Ultra ...",
250 | "image": "https://storage...",
251 | "price": 2016,
252 | "description": "Resolution: 4K Ultra HD (3840x2160)...",
253 | "brand": "samsung",
254 | "model": "QA55Q80RAKXXL",
255 | "color": "black",
256 | "category": "tv",
257 | "onSale": true,
258 | "discount": 19
259 | },
260 | // {...},
261 | {
262 | "id": 100,
263 | "title": "Logitech G PRO X Gaming...",
264 | "image": "https://storage...",
265 | "price": 336,
266 | "description": "Blue VO!CE microphone technology*...",
267 | "brand": "Logitech G",
268 | "model": "G PRO X",
269 | "color": "black",
270 | "category": "gaming",
271 | "discount": 9
272 | }
273 | ]
274 | }
275 | `}
276 |
277 |
278 |
286 |
287 | {`fetch("https://fakestoreapi.in/api/products/category")
288 | .then(res => res.json())
289 | .then(res => console.log(res))
290 | `}
291 |
292 |
294 | )
295 | }
296 | export const ProductsCategoryOutputSnip = () => {
297 |
298 | return (
299 |
300 |
305 |
306 |
307 | {`
308 | {
309 | "status": "SUCCESS",
310 | "message": "We have 6 categories to choose from.",
311 | "categories": [
312 | "tv",
313 | "audio",
314 | "laptop",
315 | "mobile",
316 | "gaming",
317 | "appliances"
318 | ]
319 | }
320 | `}
321 |
322 |
323 |
331 |
332 | {`fetch("https://fakestoreapi.in/api/products/category?type=mobile")
333 | .then(res => res.json())
334 | .then(res => console.log(res))
335 | `}
336 |
337 |
339 | )
340 | }
341 | export const ProductsofCategoryOutputSnip = () => {
342 |
343 | return (
344 |
345 |
350 |
351 |
352 | {`
353 | {
354 | "status": "SUCCESS",
355 | "message": "You've received products from the mobile category only.",
356 | "products": [
357 | {
358 | "id": 8,
359 | "title": "Samsung Galaxy S21 FE 5G...",
360 | "image": "https://storage...",
361 | "price": 434,
362 | "description": "Pro-grade Camera with AI Single Take...",
363 | "brand": "samsung",
364 | "model": "Samsung Galaxy S21 FE 5G ...",
365 | "color": "Lavender",
366 | "category": "mobile",
367 | "discount": 9,
368 | "onSale": true
369 | },
370 | {
371 | "id": 10,
372 | "title": "Samsung Galaxy S22 5G...",
373 | "image": "https://storage...",
374 | "price": 760,
375 | "description": "Pro-grade Camera that lets...",
376 | "brand": "samsung",
377 | "model": "Samsung Galaxy S22 5G",
378 | "color": "White",
379 | "category": "mobile",
380 | "discount": 29
381 | },
382 | ]
383 | }
384 | `}
385 |
386 |
387 |
395 |
396 | {`fetch("https://fakestoreapi.in/api/products", {
397 | method: 'POST',
398 | headers: { 'Content-Type': 'application/json' },
399 | body: JSON.stringify({
400 | title: "Apple Vision Pro",
401 | brand: "Apple",
402 | model: "Apple vision pro First Gen",
403 | color: "Black",
404 | category: "appliances",
405 | discount: 1
406 | })
407 | })
408 | `}
409 |
410 |
412 | )
413 | }
414 | export const AddProductOutputSnip = () => {
415 |
416 | return (
417 |
418 |
423 |
424 |
425 | {`
426 | {
427 | "status": "SUCCESS",
428 | "message": "Here is the product you sent,...",
429 | "product": {
430 | "id": 150,
431 | "title": "Apple Vision Pro",
432 | "brand": "Apple",
433 | "model": "Apple vision pro First Gen",
434 | "color": "Black",
435 | "category": "appliances",
436 | "discount": 1
437 | }
438 | }
439 | `}
440 |
441 |
442 |
450 |
451 | {`fetch("https://fakestoreapi.in/api/products/2", {
452 | method: 'PUT',
453 | headers: { 'Content-Type': 'application/json' },
454 | body: JSON.stringify({
455 | model: "Apple vision pro Second Gen",
456 | color: "Blue",
457 | discount: 47
458 | })
459 | })
460 | `}
461 |
462 |
464 | )
465 | }
466 | export const UpdateProductOutputSnip = () => {
467 |
468 | return (
469 |
470 |
475 |
476 |
477 | {`
478 | {
479 | "status": "SUCCESS",
480 | "message": "The product with id 2 has been replaced with your provided data",
481 | "product": {
482 | "id": "2",
483 | "title": "Apple Vision Pro",
484 | "brand": "Apple",
485 | "model": "Apple vision pro Second Gen",
486 | "color": "Blue",
487 | "category": "appliances",
488 | "discount": "47"
489 | }
490 | }
491 | `}
492 |
493 |
494 |
502 |
503 | {`fetch("https://fakestoreapi.in/api/products/2", {
504 | method: 'DELETE',
505 | }).then(res => res.json())
506 | .then(res => console.log(res))
507 | `}
508 |
509 |
511 | )
512 | }
513 | export const DeleteProductOutputSnip = () => {
514 |
515 | return (
516 |
517 |
522 |
523 |
524 | {`
525 | {
526 | "status": "SUCCESS",
527 | "message": "Product with id 2 has been deleted"
528 | }
529 | `}
530 |
531 |
532 |