Bought a new front end template to set up an ecommerce store.
Will like to seek advice on how to connect the API.
The front-end template stores the all the products information in local storage. read around, it is not a safe practice. As attached is the code below, so the platform merely just passes all data into one json file.
Was thinking what will be the structure for the front-end drawing of data from the backend and database? should all information be parsed into 1 json file and be stored somewhere instead of the local server? can you recommend me a structure for it?
the framework will be react and nodejs. the server will be mysql.
{"data":{"products":[{"id":1,"name":"Buckle belt – Saint Laurent","pictures":["shop/outfits/b.jpg","shop/outfits/b1.jpg"],"stock":16,"price":200,"discount":20,"salePrice":180,"description":"Luxury French fashion house Saint Laurent prides itself on constructing high-quality accessories, as showcased by this black belt, new to the brand's AW17 collection. Expertly constructed from Italian leather and brass, the belt features a long length, a buckle fastening, eyelets and a silver-tone logo plaque..","rating":4,"tags":["accessories","Black"],"artistID":["excitedlybored"],"size":["100 CM","90 CM","95 CM"],"category":"accessories","colors":["black","gray","red"]},{"id":2,"name":"La-ta-da Boho Chic Head Wrap","pictures":["shop/accessroies/b.jpg","shop/accessroies/b1.jpg","shop/accessroies/b2.jpg","shop/accessroies/b3.jpg"],"stock":5,"price":330,"discount":50,"salePrice":165,"description":"Transform your tresses with the La-ta-da Boho Chic Head Wrap. Great for keeping hair out of your face or sliding over your forehead for a bohemian look, the mix of vibrant and jewel-toned colors make this a fun piece for everyone's hair accessories collection.","rating":5,"tags":["accessories"],"size":["100 CM"],"category":"accessories","artistID":["excitedlybored"],"colors":["black","gray","red"]},{"id":3,"name":"Women's Cozy Leisure Top","pictures":["shop/athleisure/a.jpg","shop/athleisure/a1.jpg","shop/athleisure/a2.jpg"],"stock":0,"price":500,"discount":0,"salePrice":500,"description":"Soften things up in the sweetest style when the weather turns colder with the Cozy Leisure Top from A New Day. This terry sweater keeps a simple design that can be dressed up or down, while the cutout on the back and the tied closure add the right amount of detail. Pair this warm sweater with skinny jeans and sneakers for an easy day out with friends.","rating":1,"tags":["women","athleisure"],"size":["M","L","XL","XS"],"category":"athleisure","colors":["black","gray","red"]},{"id":4,"name":"Women's Crochet Shoulder Chevron Sweatshirt","pictures":["shop/athleisure/b.jpg","shop/athleisure/b1.jpg"],"stock":10,"price":580,"discount":380,"salePrice":200,"description":"Wearing a sweatshirt in public doesn't mean you can't look put-together doing it. The Crochet-Shoulder Chevron Sweatshirt from Knox Rose is slightly more tailored for a pullover, though it still gives you a loose fit that remains comfortable and flexible as you move. The textured fabric is enhanced with crochet sleeve details. Throw this long-sleeve sweatshirt over a pair of jeans and you're ready to go.","rating":1,"tags":["women","athleisure"],"size":["S","M","L","XL"],"category":"women","colors":["black","gray","red"]},{"id":5,"name":"Women's Velour Hoodie","pictures":["shop/athleisure/c.jpg","shop/athleisure/c1.jpg"],"stock":50,"price":42,"discount":5,"salePrice":120,"description":"Soften even your most casual style with the Velour Hoodie from Mossimo Supply Co. This soft zip-up jacket is the perfect way to add cute warmth when the days turn cooler — wear it with skinny jeans, a plain tee and sneakers for a sporty day out.","rating":2,"tags":["jacket","women","athleisure"],"size":["S","M","L","XL"],"category":"women","colors":["black","gray","red"]},{"id":6,"name":"Women's Accessories Vegan Leather Mini Backpack","pictures":["shop/bags/a.jpg","shop/bags/a1.jpg","shop/bags/a2.jpg","shop/bags/a3.jpg"],"stock":0,"price":130,"discount":100,"salePrice":500,"description":"For those of you who are serious about having more, doing more, giving more and being more, success is achievable with some understanding of what to do, some discipline around planning and execution of those plans and belief that you can achieve your desires.","rating":5,"tags":["accessories"],"size":[],"category":"bags","colors":["orange"]},{"id":7,"name":"WD·NY Black – Men's Pinstripe Seer Sucker Vest","pictures":["shop/blazers/a.jpg","shop/blazers/a.jpg"],"stock":30,"price":950,"discount":2000,"salePrice":725,"description":"Introspection is the trick. Understand what you want, why you want it and what it will do for you. This is a critical factor, and as such, is probably the most difficult step. For this reason, most people never complete this aspect – then wonder why life is so difficult!","rating":4,"tags":["blazers","clothing","men"],"size":["S","M","XL"],"category":"men","colors":["black","gray","red"]},{"id":8,"name":"WD·NY Black – Men's Palm Burgundy Jacket","pictures":["shop/blazers/b.jpg","shop/blazers/b1.jpg"],"stock":100,"price":780,"discount":200,"salePrice":380,"description":"Bring some funky nostalgia to your next event — and every one after — with the Denim Blazer WD·NY Black – Men's Palm Burgundy Jacket. This suit jacket is the perfect way to add some fun style to your dressy look. Pair it with a floral button-down shirt and dress pants for the perfect mix of formal and unique.","rating":3,"tags":["fashion","clothing","men"],"size":["M","L","XL"],"category":"blazers","colors":["black","gray","red"]},{"id":9,"name":"Men's Standard Fit Bomber Sweater","pictures":["shop/blazers/c.jpg","shop/blazers/c1.jpg","shop/blazers/c2.jpg","shop/blazers/c3.jpg"],"stock":2,"price":870,"discount":0,"salePrice":870,"description":"With the cool style of your favorite jacket and the comfort of a sweater, the Bomber Sweater from Goodfellow & Co. will be your favorite layering piece when the weather turns cold. This zip-up jacket is an easy piece to layer over your favorite looks to transition them between seasons — for a fall day out, just add slim jeans, a cool tee and leather boots.","rating":5,"tags":["men","sale"],"size":["L","XL"],"category":"blazers","colors":["black","gray","red"]},{"id":10,"name":"Men's Standard Fit Deconstructed Knit Blazer","pictures":["shop/blazers/d.jpg","shop/blazers/d1.jpg","shop/blazers/d2.jpg"],"stock":30,"price":900,"discount":300,"salePrice":600,"description":"When the time comes to dress things up a bit, do it on your own terms with the Deconstructed Knit Blazer from Goodfellow & Co. This jacket is made to give you the formality you need without feeling stuffy — wear it with your favorite button-down shirt and dark pants, or rock it with a T-shirt and jeans. Wherever you need to go, this versatile piece will take you there.","rating":2,"tags":["fashion","men"],"size":["M","L","XL","2T"],"category":"men","colors":["black","gray","red"]},{"id":11,"name":"Toddler Boys' Jackets – Red","pictures":["shop/boys/a.jpg","shop/boys/a1.jpg","shop/boys/a2.jpg"],"stock":1,"price":50,"discount":25,"salePrice":250,"description":"Keep your cool little man rocking comfortable style wherever he goes with the Jacket from Cat & Jack. The color blocked design of this hooded zip-up sweatshirt brings a spark to his outfit, while the cozy construction adds warmth to any of his outfits. Just slip it over jeans and a graphic tee and he'll be ready to go.","rating":5,"tags":["boys","kids"],"size":["2T","3T","4T"],"category":"kids","colors":["black","gray","red"]},{"id":12,"name":"Extra Fine Wool Jumpers","pictures":["shop/clothing/a.jpg","shop/clothing/a1.jpg","shop/clothing/a2.jpg"],"stock":5,"price":25,"discount":15,"salePrice":180,"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus vitae risus id placerat. Duis ut tincidunt elit. Sed ac leo commodo mi aliquam ultricies non sed velit. Nullam pulvinar sapien ut dapibus vulputate. Vivamus pulvinar, elit quis laoreet consectetur, ipsum elit tempor urna, a sodales odio sem a ex. In vel rhoncus urna. Nullam bibendum tellus quis arcu ullamcorper, at mattis eros rutrum. Cras nisl leo, gravida quis orci eget, placerat imperdiet libero. Nunc accumsan dolor mollis, tincidunt sapien at, venenatis odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.","rating":3,"tags":["clothing","women"],"size":["M","L","XL"],"category":"clothing","colors":["white","black"]},{"id":13,"name":"Girls' Long Sleeve Bow Top","pictures":["shop/clothing/b.jpg","shop/clothing/b1.jpg","shop/clothing/b2.jpg","shop/clothing/b3.jpg"],"stock":30,"price":80,"discount":10,"salePrice":770,"description":"Freshen up your girl's wardrobe with this Long-Sleeve Bow Top from Cat & Jack. The basic long-sleeve tee is given a unique accent from the bow that sits on one of the shoulders, giving the tee a sweet style that she'll love.","rating":1,"tags":["women"],"size":["M","L","XL"],"category":"women","colors":["gray","green"]},{"id":14,"name":"Men's Long Sleeve Micro Thermal Shirt","pictures":["shop/clothing/c.jpg","shop/clothing/c1.jpg","shop/clothing/c2.jpg"],"stock":40,"price":950,"discount":50,"salePrice":425,"description":"When the winter weather approaches, make sure you're prepared to stay warm — the Long-Sleeve Microthermal Shirt from Goodfellow & Co will help you do just that. Made from a soft cotton blend for desired comfort, this micro thermal pullover shirt is perfectly designed to keep you warm in frosty temperatures. Simply throw it on underneath any outfit and you'll be ready to take on anything.","rating":4,"tags":["men","clothing"],"size":["M","L","XL"],"category":"men","colors":["yellow","orange","black"]},{"id":15,"name":"Men's Wool Top Coat","pictures":["shop/coats-jackets/a.jpg","shop/coats-jackets/a1.jpg"],"stock":70,"price":350,"discount":200,"salePrice":780,"description":"When colder weather starts to roll in, keep your outfits looking great and feeling even better with the Wool Topcoat from Goodfellow & Co. This sleek jacket has a classic look with the two buttons, two front flap pockets, notched collar and fitted construction. Just layer it over chinos and a button-down shirt for a chic day out.","rating":5,"tags":["clothing","men","coats-jackets"],"size":["S","M","XL"],"category":"men","colors":["black","white"]},{"id":16,"name":"Women's Leopard Faux Fur Coat","pictures":["shop/coats-jackets/b.jpg","shop/coats-jackets/b1.jpg","shop/coats-jackets/b2.jpg"],"stock":100,"price":400,"discount":20,"salePrice":300,"description":"When the temperature drops, you don't want to get caught outside without a coat. For one that maintains your sense of style, reach for the Leopard Faux-Fur Coat from A New Day. The long coat falls at mid-thigh to keep you warm while walking or standing outdoors, and looks equally fashionable buttoned up or open. This coat with pockets allows you to keep your hands warm, or keep your phone and keys within reach. The bold animal-print coat can coordinate with any outfit.","rating":2,"tags":["clothing","women","coats-jackets"],"size":["S","L","XL"],"category":"women","colors":["black","white"]},{"id":17,"name":"Men's Standard Fit Sweater Fleece Jacket","pictures":["shop/coats-jackets/c.jpg","shop/coats-jackets/c1.jpg"],"stock":3,"price":800,"discount":400,"salePrice":400,"description":"Whether you need to add a little extra warmth to your jeans and T-shirt or your dressier trousers and button-down shirt, the Sweater Fleece Jacket from Goodfellow & Co. is the perfect choice. This zip-up jacket has a simple design that can be paired with any outfit, making it the perfect layer to transition your looks into cooler weather.","rating":4,"tags":["clothing","men","coats-jackets"],"size":["M","XL"],"category":"men","colors":["blue","pink"]},{"id":18,"name":"Girls' Lace Mock Neck Dress – art class","pictures":["shop/dresswear/a.jpg","shop/dresswear/a1.jpg","shop/dresswear/a2.jpg","shop/dresswear/a3.jpg"],"stock":30,"price":2000,"discount":500,"salePrice":1500,"description":"She'll love the style and versatility of this Lace Mock-Neck Dress from art class. Your budding style icon can create plenty of outfits with this one dress through any season. She can pair the sleeveless lace dress with sandals during warm weather, or layer on a cardigan, tights and boots for a cute winter look.","rating":1,"tags":["girls","kids","dresswear"],"size":["S","M","L"],"category":"girls","colors":["orange","black","red"]},{"id":19,"name":"Women's Fabric Mix Midi Dress","pictures":["shop/dresswear/b.jpg","shop/dresswear/b1.jpg"],"stock":2,"price":500,"discount":250,"salePrice":1950,"description":"A gorgeous mix of demure and daring, the Point D'esprit Mix Midi – Who What Wear offers a gorgeous sheath of sheer loveliness, with extra texture added in all the right places. Long sleeve design suits the midi-length perfectly; high-neck collar lets you layer anything you like underneath without a competing neckline.","rating":3,"tags":["dresswear","women"],"size":["M","L"],"category":"dresswear","colors":["white","gray"]},{"id":20,"name":"Women's Ugly Holiday Sweater","pictures":["shop/dresswear/c.jpg","shop/dresswear/c1.jpg"],"stock":10,"price":220,"discount":10,"salePrice":210,"description":"Ring in the holiday cheer with this Ugly Holiday Sweater Dress by Xhilaration. The not-so-ugly holiday dress has a cute Mrs. Claus design with a playful cold-shoulder twist. Pair this holiday dress with knee-high boots, or wear with tights and heels for a cute look at your next ugly sweater party.","rating":1,"tags":["women","dresswear"],"size":["XL"],"category":"dresswear","colors":["orange","green"]},{"id":21,"name":"Girls' Long Sleeve Graphic T-Shirt – White","pictures":["shop/girls/a.jpg","shop/girls/a1.jpg","shop/girls/a2.jpg","shop/girls/a3.jpg"],"stock":25,"price":150,"discount":30,"salePrice":120,"description":"The Star Wars Forces of Destiny Sequin Long-Sleeve Graphic T-Shirt lets your little Jedi-in-training show off her allegiance with style and intergalactic flair. She'll love being a member of the Resistance like Rey, and the cool sequin logo adds a finishing touch that's out of this world. Pair this cool Star Wars tee with other Forces of Destiny apparel for a look that lets her conquer each day with confidence and style.","rating":4,"tags":["girls","kids","clothing"],"size":["L","XL"],"category":"girls","colors":["white","gray"]},{"id":22,"name":"Girls' Textured Sweater","pictures":["shop/girls/b.jpg","shop/girls/b1.jpg","shop/girls/b2.jpg","shop/girls/b3.jpg"],"stock":70,"price":330,"discount":150,"salePrice":200,"description":"Your little gal will be able to take on her day in style without losing out on any comfort with this Textured Sweater from art class. The girls' knit sweater features a simple knit that's elevated by the braids on each side of the front. Pairing perfectly with any of her favorite bottoms, this sweater will become an instant staple in her closet.","rating":3,"tags":["girls","kids","outfits"],"size":["M","L"],"category":"girls","colors":["green","black"]},{"id":23,"name":"Women's Velvet Strappy Romper","pictures":["shop/jumpsuits/a.jpg","shop/jumpsuits/a1.jpg"],"stock":0,"price":770,"discount":250,"salePrice":500,"description":"Dare to wear a bold one-piece made of a unique fabric with the Velvet Strappy Romper from Xhilaration. Fitted around the waist and loose in the legs, this fashionable romper will accentuate your figure while helping you handle warm weather. Delicate criss-cross straps come together on the back and over the shoulders into a soft v-neck that's perfect for showing off your impeccable style.","rating":2,"tags":["clothing","women"],"size":["S","L","XL"],"category":"women","colors":["pink","yellow"]},{"id":24,"name":"Women's Satin Jumpsuit","pictures":["shop/jumpsuits/b.jpg","shop/jumpsuits/b1.jpg"],"stock":150,"price":289,"discount":53,"salePrice":217,"description":"Mix up your formal style with a chic update with the Satin Jumpsuit from Xhilaration. This short-sleeve jumpsuit features a flattering surplice neckline with a side tie, a fitted waistline and sleek wide-leg pants. Just slip on some chunky heels and jewelry and you're ready to take on anything from an elegant date night to a holiday party.","rating":4,"tags":["clothing","jumpsuits"],"size":["S","XL"],"category":"jumpsuits","colors":[]},{"id":25,"name":"Women's Cheers Pullover","pictures":["shop/juniors/a.jpg","shop/juniors/a1.jpg"],"stock":6,"price":800,"discount":30,"salePrice":500,"description":"Bring a pop of sweet color and some elegant style to your day with the Walk-Thru Romper Maxi from Xhilaration.","rating":5,"tags":["juniors","clothing","women"],"size":["L","XL"],"category":["juniors"],"colors":["black","green"]},{"id":26,"name":"Women's Long Sleeve Sweatshirt With Bow","pictures":["shop/juniors/b.jpg","shop/juniors/b1.jpg"],"stock":1,"price":1569,"discount":369,"salePrice":1200,"description":"Bring the perfect mix of style and comfort to your wardrobe with the Metallic Sweatshirt with Bow from Xhilaration. This cozy cream sweater adds a fun look with the metallic accents and bow-tied detail on the sleeves. Just slip into some skinny jeans and booties for a look that's ready to take on the day.","rating":3,"tags":["women","juniors"],"size":["M","L"],"category":"juniors","colors":["white","pink"]},{"id":27,"name":"Girls' Shine Stripe Long Sleeve Ruffle Top","pictures":["shop/kids/a.jpg","shop/kids/a1.jpg","shop/kids/a2.jpg"],"stock":33,"price":1500,"discount":500,"salePrice":1000,"description":"TheGirls' Shine Stripe Long Sleeve Ruffle Top from C9 Champion® features brushed fabric with Duo Dry® wicking technology that is great for outdoor workouts in cool weather.","rating":4,"tags":["clothing","girls","kids"],"size":["M","L","XL"],"category":"kids","colors":["red","pink"]},{"id":28,"name":"Girls' Long Sleeve Graphic T-Shirt – White","pictures":["shop/kids/b.jpg","shop/kids/b1.jpg"],"stock":17,"price":322,"salePrice":161,"discount":167,"description":"The Star Wars Forces of Destiny Sequin Long-Sleeve Graphic T-Shirt lets your little Jedi-in-training show off her allegiance with style and intergalactic flair. She'll love being a member of the Resistance like Rey, and the cool sequin logo adds a finishing touch that's out of this world. Pair this cool Star Wars tee with other Forces of Destiny apparel for a look that lets her conquer each day with confidence and style.","rating":2,"tags":["clothing","girls","kids","outfits"],"size":["S"],"category":"kids","colors":["white","black"]},{"id":29,"name":"Men's Standard Fit Short Sleeve Crew T-Shirt","pictures":["shop/men/a.jpg","shop/men/a1.jpg","shop/men/a2.jpg"],"stock":14,"price":390,"discount":180,"salePrice":210,"description":"Go back to the basics and clean up your look with this Short-Sleeve Crewneck T-Shirt from Goodfellow & Co. The soft, washed fabric will keep you comfortable, while the fitted style welcomes a sleek edge. This tee comes in a simple solid color, making it easy to mix in with your existing clothing. Throw on a pair of jeans and gray chukka boots to create a simple but put-together outfit.","rating":1,"tags":["clothing","men"],"size":["S","M","L","XL"],"category":"clothing","colors":["green","yellow"]},{"id":30,"name":"Men's Standard Fit Short Sleeve V-Neck T-Shirt","pictures":["shop/men/b.jpg","shop/men/b1.jpg","shop/men/b2.jpg"],"stock":4,"price":1600,"discount":400,"salePrice":1200,"description":"Casual days are made even better with good style, so slip into the Heathered Short-Sleeve V-Neck T-Shirt from Goodfellow & Co. and start your day right. This ultra-soft heathered tee brings a cool look with the V-neckline and heathered color — just pair it with jeans for a casual day, or slip into chinos when you want to mix things up.","rating":4,"tags":["men","clothing"],"size":["M","L","XL"],"category":"men","colors":["red","yellow"]},{"id":31,"name":"Men's Standard Fit Short Sleeve Crew T-Shirt","pictures":["shop/men/c.jpg","shop/men/c1.jpg","shop/men/c2.jpg"],"stock":80,"price":1300,"discount":700,"salePrice":600,"description":"Whether it's a casual day at the office or a night out with the guys, keep your look easy and comfortable with the Short-Sleeve Crewneck T-Shirt from Goodfellow & Co. With the heathered design, this simple tee brings a cool look to even the most casual outfits — just pair it with chinos and sneakers for a look that's ready to take on anything.","rating":5,"tags":["men","clothing"],"size":["S"],"category":"men","colors":["black","red"]},{"id":32,"name":"Women's Jacquard Ruffle Sleeve Fit & Flare Dress","pictures":["shop/new-arrivals/a.jpg","shop/new-arrivals/a1.jpg"],"stock":20,"price":200,"discount":10,"salePrice":390,"description":"Bring some versatile style to your closet with the Jacquard Ruffle-Sleeve Fit-and-Flare Dress from Xhilaration. This cobalt blue dress is decorated with sweet ruffle sleeves and a ribbon across the back for fun and flirty style. Wear with cut-out booties for a casual date night or strappy heels and a sparkling clutch for the next wedding you attend.","rating":4,"tags":["clothing","new-arrivals","women"],"size":["M"],"category":"new-arrivals","colors":["blue","pink"]},{"id":33,"name":"Women's Robes – Gray","pictures":["shop/new-arrivals/b.jpg","shop/new-arrivals/b1.jpg"],"stock":5,"price":200,"discount":70,"salePrice":130,"description":"From getting ready for your day to cozying up before bed to simply lazing around on the weekends, you'll love doing so in ultimate comfort wearing the Plush Robe from Gilligan & O'Malley. This long-sleeve robe features an oh-so soft, heavyweight fabric that helps keep you nice and warm on chilly mornings and evenings. It's the perfect piece for wearing as you get ready for your day, just as much as it's comfy to pair with PJs on a snoozy Sunday morning. Plus, thanks to the below-the-knee cut and self-tie waistline, you'll get extra warmth and a custom fit wearing this cozy plush robe.","rating":3,"size":["M","L","XL"],"tags":["new-arrivals","women"],"category":"new-arrivals","colors":["gray","white"]},{"id":34,"name":"Women's Cold-Shoulder Bow-Sleeve Sweater Dress","pictures":["shop/new-arrivals/c.jpg","shop/new-arrivals/c1.jpg"],"stock":8,"price":320,"discount":160,"salePrice":160,"description":"Take your favorite summer style right into the cooler seasons with the Cold-Shoulder Bow-Sleeve Sweater Dress from Xhilaration. This long-sleeve sweater dress makes a versatile addition to your wardrobe thanks to its timeless color and ability to transition your look from season to season as well as to and from any occasion. A darling bow detail decorates the fashionable cold-shoulder design, bringing just a hint of sweetness to your everyday style. On a warm day, wear the dress on its own paired with chunky ankle boots, then layer with tights once it starts to get cool.","rating":1,"tags":["clothing","new-arrivals","women"],"size":["M","L","XL"],"category":"new-arrivals","colors":["black","red"]},{"id":35,"name":"Girls' Long Sleeve Ruffle Top – Cream","pictures":["shop/outfits/a.jpg","shop/outfits/a1.jpg"],"stock":90,"price":400,"discount":30,"salePrice":370,"description":"Your stylish chick will love making this Long-Sleeve Ruffle Top from art class a staple in her wardrobe. In cream, this long-sleeve tee has a ruffle hem that's longer in the front and back than on the sides, a heart graphic on the chest and a positive message on the back underlined in stars. Whether she pairs this shirt with leggings or jeans, just have her slip on some lace-up combat boots to give it a fun edge.","rating":2,"tags":["clothing","girls","kids","outfits"],"size":["S","M"],"category":"outfits","colors":["white"]},{"id":36,"name":"Girls' Cold Shoulder Short Sleeve T-Shirt with Tulle – Orange","pictures":["shop/outfits/b.jpg","shop/outfits/b1.jpg","shop/outfits/b2.jpg"],"stock":46,"price":230,"discount":110,"salePrice":115,"description":"Your little fashionista will love rocking this Cold-Shoulder T-Shirt with Tulle from art class. This orange tee features a peace symbol, tulle accents on the shoulders and the phrase “Peace Squad.” Whether she pairs this with a skirt or jeans, she'll be as stylish as she is comfy. Just have her slip on some sneakers, and she'll be ready to take on the day.","rating":5,"tags":["girls","kids","outfits"],"size":["S","M"],"category":"kids","colors":["yellow","pink"]},{"id":37,"name":"Women's Flannel Sleep shirt","pictures":["shop/pajamas-robes/a.jpg","shop/pajamas-robes/a1.jpg"],"stock":34,"price":480,"discount":30,"salePrice":240,"description":"Keep warm all night long – even when cold weather hits – in this Red Buffalo Flannel Sleepshirt from Xhilaration. This red and black plaid nightgown pairs perfectly with your bold personality, and the button-up style and chest pocket give it a classic flannel shirt look. Whether you're wearing it by itself or over some leggings to keep extra warm, you're sure to have a cozy night's sleep in this piece.","rating":3,"tags":["clothing","pajamas-robes","women"],"size":["M","L"],"category":"pajamas-robes","colors":["red","black"]},{"id":38,"name":"Women's 2pc Pajama Set – Almond Cream","pictures":["shop/pajamas-robes/b.jpg","shop/pajamas-robes/b1.jpg"],"stock":40,"price":210,"discount":100,"salePrice":120,"description":"There's nothing better than cozying up for bed in comfy-cute PJs like the Two-Piece Pajama Set from Gilligan & O'Malley. Featuring a cotton-blend construction, these two-piece PJs will keep you warm and comfortable from season to season. With just enough stretch to keep you freely moving throughout the night, along with a lively pattern that brightens up your sleepwear, you'll always be ready to cuddle up under the covers for a cozy night's sleep.","rating":1,"tags":["pajamas-robes","women"],"size":["M"],"category":"pajamas-robes","colors":["white","blue"]},{"id":39,"name":"Men's Joseph Captoe Dress Shoe","pictures":["shop/shoes/a.jpg","shop/shoes/a1.jpg","shop/shoes/a2.jpg"],"stock":30,"price":1200,"discount":230,"salePrice":900,"description":"A great outfit is in the details, and the Joseph Cap-Toe Dress Shoe from Goodfellow & Co. is the perfect detail when you want to keep your look high-class. These dressy shoes are the perfect finishing touch to your work outfit — just pair them with a long-sleeve button-down shirt and trousers and head into a sleek day.","rating":4,"tags":["shoes"],"size":["7","8","9"],"category":"shoes","colors":[]},{"id":40,"name":"Women's Cozy Leisure Top","pictures":["shop/women/a.jpg","shop/women/a1.jpg","shop/women/a2.jpg"],"stock":2,"price":635,"discount":362,"salePrice":456,"description":"Soften things up in the sweetest style when the weather turns colder with the Cozy Leisure Top from A New Day. This terry sweater keeps a simple design that can be dressed up or down, while the cutout on the back and the tied closure add the right amount of detail. Pair this warm sweater with skinny jeans and sneakers for an easy day out with friends.","rating":5,"tags":["athleisure","women"],"size":["S","M","XL"],"category":"women","colors":["pink","white"]},{"id":41,"name":"Women's Crochet Bell Sleeve Dress","pictures":["shop/women/b.jpg","shop/women/b1.jpg"],"stock":3,"price":200,"salePrice":120,"discount":80,"description":"For a casual look that's still as chic as you are, put on the Crochet Bell-Sleeve Dress from Knox Rose. This V-neck dress is accented with crocheted lace around the neckline, as well as crochet dot trim lining the bells of the sleeves. Layer over patterned leggings and riding boots or tights and booties for looks that will keep you comfortable and stylish from brunch with friends to a trip through the farmers market.","rating":2,"size":["S","M"],"tags":["dresswear","clothing","women"],"category":"women","colors":["green","blue"]},{"id":42,"name":"Women's Ruffle Wrap Dress","pictures":["shop/women/c.jpg","shop/women/c1.jpg","shop/women/c2.jpg"],"stock":3,"price":200,"discount":40,"salePrice":160,"description":"Steal the show in this attention grabbing Shift-Dress from Who What Wear. With intricate print along the back, neckline and bottom hem, all eyes will be on you.","rating":5,"tags":["dresswear","clothing","women"],"size":["S","M","L"],"category":"women","colors":["red","blue"]}],"detail_products":[]},"filters":{"category":[],"size":[],"color":[],"artist_ID":["excitedlybored"],"ratings":"","value":{"min":150,"max":1050},"search":"","sortOrder":""},"ReducersIntl":{"locale":"en"}}
Use an in memory cache to retrieve data from backend
The product details should be stored in MySQL server as a master data. Since the data will be read-heavy, it should be read from a cache like Redis or memcahed. The cache should reduce the load on MySQL server and it (MySQL) should only be accessed if the data is not found in the cache.
the cache should be updated when master data is altered in MySQL
Edit: To further reduce API hits, use session storage or some sort of Store management like Redux or Mobx to store the data in the front end client (Only if the change of data is not crucial, like product details can be stored in front end but not the price since it's change could lead to failure).
Using React Js you can fetch data easily using componentDidMount() Like this.
i just create a dummy api from your database and i implemented this in react js.
class Shop extends Component {
constructor(props) {
super(props);
this.state = {
product: []
};
}
async componentDidMount() {
try {
// fetch Api url using `fetch`
const res = await fetch(`http://www.mocky.io/v2/5e0201922f00003688dcd4e5`);
const product = await res.json();
console.log(product);
this.setState({
product: product.data.products
});
} catch (e) {
console.log(e);
}
}
render() {
const { product } = this.state;
if (product.length === 0)
return (
<p>
Loading ...
</p>
);
return (
<ul>
// After Using `map` you can display your all data
{product.map(c => (
<li key={c.id}>{c.name}</li>
))}
</ul>
)}}
export default Shop;