Picking a Stack for Instacart webpage | Code Society | Page 1

graceful mason Dec 19, 2022, 6:41 PM

#

I want to create a webpage similar to the application “Instacart”, in which I can just search for a grocery item and add it to my cart, where it lists everything in my cart along with their prices. What languages/framework is best for this?

sharp valley Dec 19, 2022, 6:42 PM

#

any language and any framework. one way you could decide is by looking at job listings in your area and choosing whats most popular

#

as for your other question, JS, HTML, and CSS are client side so theres a few ways you can approach that. IDK if spring offers a way to do SSR (server-side rendering) but if not you could do your frontend with a JS framework like React, Vue, or if you want better SEO you could use something like Vite or Next and make sure theyre set up for server side rendering

graceful mason Dec 19, 2022, 6:45 PM

#

i’m not really looking at publishing the page, im just going to have it as a personal project on my portfolio. my main factor for doing the project is really just to learn. i’ve never done a full stack project & this would be a great way to learn imo

#

so i’m not too worried about SEO

#

what is the difference between client side & server side rendering?

sharp valley Dec 19, 2022, 6:46 PM

#

check out this article: https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering

Toptal Engineering Blog

Client-side vs. Server-side vs. Pre-rendering for Web Apps

User experience tanks when sites feel slow. Today's heavier front ends don't help. In this article, Toptal Freelance Front-end Developer Guillaume Breux compares client-side vs server-side and also pre-rendering strategies to help you choose the best option for your own app.

graceful mason Dec 19, 2022, 6:46 PM

#

thank you!

sharp valley Dec 19, 2022, 6:46 PM

#

since you dont care about SEO, Id recommend React or Vue, they seem to be pretty popular in the job market

#

big communities too so itd be easy to google questions around them

graceful mason Dec 19, 2022, 6:53 PM

#

thank you for all of the help

teal agate Dec 19, 2022, 7:18 PM

#

If you are a beginner, I would say like HTML5/CSS3/JavaScript and some very simple jQuery

#

you could also use a pre-written widget in JS, but basically a "cart" is just a json array of json object
on which you push / add json object at the end

sharp valley Dec 19, 2022, 7:18 PM

#

yeah if youre right at the start of learning focus on the fundamentals ^ :)

teal agate Dec 19, 2022, 7:19 PM

#

then you can save this "cart" on a back-end or simply in a localstorage for now

#

localstorage will work as a demo, since no back-end required

#

the "shopping cart" lives in the client browser only and is not sent anywhere

#

;compile js

var json = "";
var cart = [
{ "id" : 1001, "quantity": 5, "name" :"apple" },
{ "id" : 1002, "quantity": 12, "name" :"banana" },
];

json = JSON.stringify(cart);
//console.log(cart);
console.log(json);

var cherry = { "id" : 1003, "quantity" : 1, "name" :"cherry" };

cart.push(cherry);

json = JSON.stringify(cart);
//console.log(cart);
console.log(json);

sly hollowBOT Dec 19, 2022, 7:22 PM

#

Gotcha

How you like them apples?

jaunty kernelBOT Dec 19, 2022, 7:22 PM

#

Program Output

[{"id":1001,"quantity":5,"name":"apple"},{"id":1002,"quantity":12,"name":"banana"}]
[{"id":1001,"quantity":5,"name":"apple"},{"id":1002,"quantity":12,"name":"banana"},{"id":1003,"quantity":1,"name":"cherry"}]

teal agate Dec 19, 2022, 7:23 PM

#

and the UX is just a simple <form> some CSS and some simple JS

graceful mason Dec 19, 2022, 10:24 PM

#

sharp valley yeah if youre right at the start of learning focus on the fundamentals ^ :)

i mean i’m in the intermediate stage (i guess) of java, like i know OOP, DS & algo, etc, but i have rarely touched front end at all other than creating a business card which is able to be flipped when clicked lol

teal agate Dec 20, 2022, 4:53 PM

#

JavaScript is simpler than Java, at least for the "easy part" of just manipulating forms, dom, simple data

#

in JavaScript you have boolean / long / double / String (JSON Scalar), Array (JSON Array) and Hashtable (JSON Object)

#

plus undefined and null

chilly topaz Dec 21, 2022, 5:19 PM

#

Not to revive an old thread but if you are doing a shopping website or anything similar I recommend next.js (https://nextjs.org)

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

#

For fetching data I recommend microsoft's axios library. For data storage using mongodb may be easiest, but if you can use an SQL database, use it.

teal agate Dec 22, 2022, 12:03 AM

#

@chilly topaz you are OVER DOING it

#

let's put together 3 crazy frameworks into a newbie? seriously, when the VanillaJS solution is like super simple?

#

you could also use a wordpress shopping cart plugin

graceful mason Dec 22, 2022, 12:53 AM

#

yeah i'm not sure i'm reading for a bunch of frameworks haha, i'll look into them eventually though!

chilly topaz Dec 22, 2022, 1:15 AM

#

teal agate <@358978060696944651> you are OVER DOING it

I'f Im objective about things, I do think it is important to at least learn react.js for anyone who is new to web design

#

Literally every job requires it

#

Definitely learning the basics of React is critical. Axios not so much. I just use it because I don't think es6 fetch is available on the backend (nodejs) yet.

sly hollowBOT Dec 22, 2022, 1:15 AM

#

Gotcha

What do you call a person who hates hippos because they're so hateful? Hippo-critical.

teal agate Dec 22, 2022, 2:21 AM

#

not every job

#Picking a Stack for Instacart webpage