Learn Data Structures by Building a Shopping Cart

[pikonha]

I'd like to help with this project

[lavanganji]

@QuincyLarson could you guide us to take part in this project

[QuincyLarson]

@picolloo @lavanganji Which of you is interested in tackling this one? This should be a fun one!

[pikonha]

I can leave this one to other contribuitors and comeback later if it's necessary

[ritute]

Hi, I'm interested in building an example project for this!

[QuincyLarson]

@ritute OK - great! See if you can get an example project together that we can then discuss before you start creating tests for it.

[scissorsneedfoodtoo]

Hi @ritute, just wanted to check in and see how everything's going with this project. Please post a link to CodePen when you're finished, and feel free to reach out if you have any questions.

[scissorsneedfoodtoo]

@ritute, any progress on your prototype?

[shimphillip]

@scissorsneedfoodtoo Would love to take this!

I noticed you are in Korea, are you working as a dev? I am from Korea :)

[scissorsneedfoodtoo]

@shimphillip, 안녕하세요? We would love your help on this project! You can read @QuincyLarson's announcement about the new curriculum, along with some FAQs I wrote. Hopefully those will help you get started, but feel free to reach out if you have any questions. The first step is to build a prototype on a platform like CodePen, CodeSandbox, or Glitch, then post it here for review. Then you can start breaking the project down into steps like the ones submitted as Pull Requests.

Yes, I'm still in Korea. I came here as an English teacher, and now I'm working remotely from Daegu. Always nice to meet a Korean dev! Where in Korea are you from? I see you're in Austin now. I've always wanted to visit there!

[shimphillip]

반가워요! Yes, that should be enough to get me started.

Great! I figured you went to Korea to teach English initially. Austin is great! Supposedly one of the best places to live. Definitely a place to checkout.

I am excited to start :) I will work on my demo.

[scissorsneedfoodtoo]

@shimphillip, nice! Glad you're enjoying it out there in Austin. Heard that the food out there is amazing.

Looking forward to seeing your demo :+1: :+1:

[shimphillip]

@scissorsneedfoodtoo

I am thinking of implementing the newest features 'private variables' which is only available in babel 7 and stage 3 preset. Do you know if the curriculum is going to support that?

I also haven't received confirmation from Quincy about integrating UI with this project in the contributers room in Gitter. Here is the thread. Can you answer this for me?

Phillip Shim @shimphillip Apr 16 18:36 I am in the process of creating a new curriculum 'Learn data structure by building a shopping cart'. Do I need to have users/students build from scratch with html and css or can I have them just focus on functionalities of the app using JavaScript? If that's the case, I would like to use a bit of css animation library to improve my UI.

Quincy Larson @QuincyLarson Apr 16 19:36 @shimphillip You don't need a UI element at all - it can be a pure JavaScript program that accepts input and outputs the current state of the shopping cart.

Phillip Shim @shimphillip Apr 16 20:04 @QuincyLarson Is that the direction you were envisioning/prefer? I was thinking of some sort of visual interactions with a gallery of items and a shopping cart.

[scissorsneedfoodtoo]

@shimphillip, good questions!

Generally we don't want to use additional libraries or compilers like Babel, and instead focus on the fundamentals using vanilla HTML, CSS, and JS. There are exceptions like the React Flappy Bird or D3 map of Earth projects, but other than that we'll try to keep things simple so everything works offline.

I agree that we don't need a UI element, at least for now. Your project will cover the concepts in the Basic Data Structures section, along with some from the later intermediate/advanced Data Structures. All of those current challenges don't have a UI, and instead just focus on JavaScript. Your project could do the same, and teach what's going on behind the scenes when users interact with online shopping carts by showing how items are represented, organized, stock is managed, and so on.

Anyway, hope that helps!

[shimphillip]

Thanks it was helpful. @scissorsneedfoodtoo

Here is the basic skeleton. https://codepen.io/shimphillip/pen/BEYrPg?editors=0010, Quincy took a look as well during our study group leader call and liked it.

Wasn't sure how much content I needed to create. If I need to make more, you can look at the comments under additional features.

Let me know what you think :)

[scissorsneedfoodtoo]

@shimphillip, wow, this is looking great! I'm sure our users will learn a lot as they go through these lessons.

Looking at your commented out code, combining the getTotal and setTotal functions into one calculateTotal is a good idea. For the additional features you listed, I like the idea of calculating the taxes and adding that to the total. Having users build an item is also a good idea. They could do that in the beginning of the project to get a feel for the properties and values each item in the inventory will have. Then after building one we could update the code to include all the other items. I like your idea of checking the user's credit, too, sort of like a gift card functionality -- it could see how much store credit they have and factor that into the total. One more feature that would be nice is the ability to adjust the quantity of each item in the cart.

Anyway, those are just some ideas off the top of my head. Awesome work here!

[shimphillip]

@scissorsneedfoodtoo

Here it is. https://codepen.io/shimphillip/pen/BEYrPg?editors=0010

You can look at the current functionalities comments to learn the new updates I made. They are in bullet points.

Then after building one we could update the code to include all the other items. I like your idea of checking the user's credit, too, sort of like a gift card functionality -- it could see how much store credit they have and factor that into the total.

Instead of using credits, I thought using promotion discounts was bit more intuitive and natural so I went ahead and made a method called applyDiscount.

Having users build an item is also a good idea. They could do that in the beginning of the project to get a feel for the properties and values each item in the inventory will have. Then after building one we could update the code to include all the other items.

I assume that I can make a helper script/code to make this happen? Didn't know I could that!

Obviously the code still needs some work, refactoring and be tested. Heck I barely tested any of these codes! Wanted to check with you if this was all the features you wanted. If you are satisfied, what's the next steps? 👍

[shimphillip]

@scissorsneedfoodtoo

Worked on it some more, moved away from codepen to codesandbox., which has default test functionality built in. Just hit Tests tab. https://codesandbox.io/s/4r6mvpm23w

Finished writing unit tests for each method but I am not sure if they are good tests since I am pretty new to testing. Cleaned up some code as well :)

[shimphillip]

@scissorsneedfoodtoo

I am looking at https://github.com/freeCodeCamp/CurriculumExpansion/tree/master/basic-javascript-role-playing-game

Names of javascript files differ from each other by 10s and 5s. Is this a convention? Also noticed that he's not handling any bad or wrong inputs, should I not worry about it either?

[scissorsneedfoodtoo]

@shimphillip, thank you for your patience.

Promotions and discounts is totally fine! You're right that it's more natural in this context. Just forked your project on CodeSandbox and everything LGTM.

There won't be a helper script as far as I'm aware. If you look at the JSON Sports Team project, the user finishes building the basic structure for the team with one player in index11.js, then in index12.js the rest of the players are added for the user. We want them to do as much coding as possible without it feeling like a data entry job, if that makes sense. You could do the same with the items in your products array -- walk the user through building one or two items, then fill in the rest that they'll use for the remainder of the project.

As for the file naming, it's totally up to you! I believe some projects use the 10s and 5s convention to make it easier to add additional files in case they need to break a lesson up into several more steps. For my projects I just counted up normally and if I needed to add extra files I just used letters (index05a, index05b...). This isn't final, so we'll rename everything later when we move them onto the platform.

We're not so worried about handling wrong inputs at this point. Our goal is to design and structure each project in such a way that users stay on the right path, even if it's a narrow path at times! That's why we're trying to break each project down into as many small steps as possible. Just do your best to write each step so that it's clear we're only testing one or two things at a time.

Also, I saw that you incorporated some tests already. That's great! Eventually we'll get to the point where we start writing unit tests for each of these problems, so this will be helpful in the future. Right now you can just focus on breaking the project down into step by step test descriptions / instructions like in the RPG game. Your project doesn't need multiple files now, so you can build up all of your code in a single file -- no need to export or import anything.

Hope that answers your questions. Please let me know if there's anything I can do. I'll be on GitHub or can hop on a call if you'd like to talk.

[shimphillip]

@scissorsneedfoodtoo no prob.

I've made first 10 steps so far. I forked and created a branch called shopping-cart. What do you think? https://github.com/shimphillip/CurriculumExpansion/tree/shopping-cart/learn-data-structures-by-building-a-shopping-cart

I wasn't sure how deep I needed to explain certain concepts. I assumed the students know basic JavaScript though.

Had a question on index08.js. Obviously there are mutliple ways to achieve the same result in JS. I am using functional programming but it can also be done via traditional forloop. Should I be dictating students to use certain ways or it won't matter and we will check if the expected output is produced?

👍

[scissorsneedfoodtoo]

@shimphillip, this is off to a great start! My only suggestions would be to try and break things down a bit more. Like you mentioned, it's true that students probably would know basic JavaScript by this point in the curriculum, but we can't be sure of how comfortable they are with those concepts yet. It's also possible that they skipped ahead a bit and landed on this project. That said, you don't have to explain things too deeply. Instead, try to give the bare minimum information necessary and show through example.

For example, in index10.js starting off with a basic definition of data structures is fine, though I think giving an example of data structures is a good idea. Something like, "A data structure is a way to store and organize data in a program. Arrays and objects are both common data structures you'll use in JavaScript." You can introduce the shopping cart just before you have students start building one.

In index02.js your explanation is good, but just have students build the object a little bit at a time. You could have them create an empty object first, then in the next file instruct them to give it the property name id with the value 0. In the following two files they can set the name, then the price. It's a bit slow to start, but will give students some much needed practice or review of creating objects.

To your question, I think it would be better to guide them a bit more here, at least in the beginning. With the curriculum in its current state, they have just a bit of practice writing for loops and using map and reduce. Walking them through writing a for loop to add the item to the array, then refactor to use find would be a good way to get some extra practice in.

Anyway, hope that helps! Please let me know if there's anything else I can do to help.

[shimphillip]

@scissorsneedfoodtoo

Made some changes to reflect what you suggested. More beginner friendly in the start and teach with examples. How do they look now?

https://github.com/shimphillip/CurriculumExpansion/tree/shopping-cart/learn-data-structures-by-building-a-shopping-cart

[scissorsneedfoodtoo]

@shimphillip, looking better! Definitely getting there.

Unfortunately, I think some of the instructions are a bit too long. If you take a look at the RPG game, the instructions are short with as little explanation as possible. Of course that's a beginner's JS project, so yours will probably require a bit more explanation. You do a great job of explaining things, but many times you can just show a related example instead.

In index01.js, the test description can read: "A data structure is a way to store and organize data in a program. Arrays and objects are both common data structures you'll use in JavaScript. Declare a new variable using the 'const' keyword and name it 'products', then set it equal to an empty array. Here is an example of a variable 'users' that equals an empty array: const users = [];"

Then index02.js could read: "Because the products in our online pastry shop have a lot of information, we will store each one as an object. Inside the products array, add an object with the property name and the value "Vanilla buttercream cupcake". For example, here is an array that contains a similar object:

const users = [
  {
    name: "Phillip"
  }
];

Sorry, I know it's a pretty difficult balance. Ideally each set of instructions will only be three or four sentences max. I certainly had trouble writing the instructions for my own projects! Hopefully these examples help as you move forward. Let me know if there's anything I can help with!

[shimphillip]

Thanks for being descriptive! @scissorsneedfoodtoo

Can you take a look at my index02a.js and index03.js? Tried to make them more similar like your given examples.

https://github.com/shimphillip/CurriculumExpansion/tree/shopping-cart/learn-data-structures-by-building-a-shopping-cart

If you approve, I will follow this format to finish up writing steps for the project.

[scissorsneedfoodtoo]

@shimphillip, no problem. Thank you for being so open to feedback and for all of your hard work here!

Those files read much better now. The only suggestion I have is that you can remove some of the explanatory text for things like objects and arrays since students should be pretty familiar with them by now. For example, you don't need to explain that arrays can hold multiple values separated by commas or that each key/value pair in an object is separated by a comma. For those things you could just show a bit of example code in your early lessons as a review. In this project, new concepts like classes and class methods will require a bit more explanation, since this should be the first time students work with them in the curriculum.

I hope that helps! You have a great project and let of lessons here, and I'm looking forward to reading the rest of them.

[shimphillip]

@scissorsneedfoodtoo

Just letting you know that this project isn't abandoned. I am slowly making progress. I hope to finish writing test descriptions by next week.

[shimphillip]

@scissorsneedfoodtoo

Alright I am done! Can you take a look?

https://github.com/shimphillip/CurriculumExpansion/tree/shopping-cart/learn-data-structures-by-building-a-shopping-cart

[scissorsneedfoodtoo]

@shimphillip, sorry for the delay! Not sure how I missed your comment. Could you submit this as a PR? It will make things a bit easier to review. I'll start reading through your lessons in the meantime.

[shimphillip]

@scissorsneedfoodtoo

No worries! Just did!

[shimphillip]

@scissorsneedfoodtoo

Have you had a chance to look at the PR?

[scissorsneedfoodtoo]

@shimphillip, sorry for the delay in reviewing your PR the other week. Were you able to start on a second draft by any chance? I left some review notes over in https://github.com/freeCodeCamp/CurriculumExpansion/pull/179.

[shimphillip]

@scissorsneedfoodtoo no worries. I will work on it this week.

[scissorsneedfoodtoo]

@shimphillip, great! Thank you for your continued effort on this project. Looking forward to seeing your next draft soon!

Also, do you have some time to hop on a 20 or 30 minute call sometime next week? I'd love to learn more about you and answer any questions that you might have about this project. If so, please send a message to kris@freecodecamp.org and we can set something up.

[shimphillip]

@scissorsneedfoodtoo

Made another pull request. Sure, can you send me a calendar schedule of your avaliability where I can pick a time?

[scissorsneedfoodtoo]

@shimphillip, awesome, I'll take a look at your new pull request ASAP. I sent over a calendar invite, but just picked a random time and date. Please change it to one that works best for you and we'll shoot for that.

[shimphillip]

@scissorsneedfoodtoo Hello, trying to work on it this week. Do you know where I can go to see the comments you made to make some modifications to the files?

[scissorsneedfoodtoo]

@shimphillip, awesome! Thank you for your continued effort on this project. The comments are in the are in your last PR here: https://github.com/freeCodeCamp/CurriculumExpansion/pull/189.

[shimphillip]

@scissorsneedfoodtoo Thx! Made a PR.

[scissorsneedfoodtoo]

Hi @shimphillip, thank you for all of your work on this project. I've been going through all the projects individually, and I believe yours is very close to being finished. Rather than going back to your old PR that touches the files, I thought I'd just list them here.

The example in index23.js gives the answer away. Would it be possible to break this down into several steps, and walk learners through the process of declaring the subTotal variable and writing out the reduce function? Also, index24.js could be broken down into four or so steps. Each step can be declaring a different variable (tax, discount, and total), and the final step can be to return the total.

Hope that sounds good! Looking forward to moving this project into the finished pile with some of the others.

[hassaanp]

Hi, @scissorsneedfoodtoo It looks like the project has had a lot of work already put in. How do you propose we proceed?

Quincy referenced another project] (#254 ) to me in the original discussion #38365

If it makes more sense to incorporate the suggested flow in the Shopping Cart project then I would love to hear your thoughts on how to kick this off.

[scissorsneedfoodtoo]

@hassaanp, good question. We've discussed introducing more OOP concepts into this project to more closely mirror #254, which will be a Python project. Given that this is a JS project, it might be a better fit for what you proposed in https://github.com/freeCodeCamp/freeCodeCamp/issues/38365.

I'll get more concrete details in a meeting later tonight and will write back with next steps.

[scissorsneedfoodtoo]

@hassaanp, thanks for your patience.

I think it's best to incorporate your suggestions for teaching JS OOP into this project. We may even consider revamping it to focus more on OOP rather than data structures like it does now.

We should start in this step, before the current instructions ask students to build a class: https://github.com/freeCodeCamp/CurriculumExpansion/blob/master/learn-data-structures-by-building-a-shopping-cart/index03.js

That would be a good place for steps 1 - 3 of your suggested flow from https://github.com/freeCodeCamp/freeCodeCamp/issues/38365. This project falls pretty early in the JS curriculum, so we'll have to be careful not to overwhelm learners here. We could take a couple of methods from later steps in the current project and incorporate them into your flow.

Once a couple of the methods are written and we briefly cover the prototype chain, we can introduce the new keyword and refactor the function using the class syntax like we currently have.

How does all that sound? Also, if you have some time later this week or next to hop on a call, send me an email at kris@freecodecamp.org.

[hassaanp]

That sounds perfect. Thank you so much for detailing this out. We can definitely get on a call. I will send you an email with my calendar link.

[BrijeshYadav001st]

Hi, @scissorsneedfoodtoo I'm look for projects to contribute them related to frontend or M L . How to i proceed please guide me anyone not only @scissorsneedfoodtoo .

[ojeytonwilliams]

Hi @BrijeshYadav001st we're maintaining a google sheet to track the project process and it looks like there are plenty still needing work. @ShaunSHamilton or @nhcarrigan can probably give you a better picture.

[BrijeshYadav001st]

Okay thank you @ojeytonwilliams

[ShaunSHamilton]

Hey @BrijeshYadav001st

Apologies, for the delay in replying. For help with the Machine Learning curriculum, we would appreciate feedback on the curriculum outline, which can be given through this Google Form

For the Frontend curriculum, we have not done much development on the tests for these. I would imagine the initial plan forward would be:

• Take content from these index<n>.js files, and transpile them into Markdown lessons in the main platform repo
• Write tests for each step
• Rinse-and-repeat

Personally, I am unsure when this should be happening, as we are currently focussing on the Responsive Web Design curriculum, and then will move on to the JS Algorithms and Data Structures

If you have any more questions, please ask on Chat or the forum. We should keep this issue related to the relevant project.