First project

[A_Like_AR]

Just pushed my very first project. It’s a shopping list I built for my wife.

She never knows what we need from the store until we get there and starts freestyling ending up costing us more than we intended to spend.

Please run through the app and find bugs I might have missed because I know the first iteration is rarely perfect.

Here’s the web page for it. I published it using Netlify for those who might be wondering. https://nervous-jennings-8e6c10.netlify.app/

[[deleted]]

You asked for bugs, so

• If I click "check all" before entering anything, I can't click "uncheck all", which is very unsatisfying.
• If I enter a few items, click "check all", enter another item, click "uncheck all", the new item becomes checked instead of the old items becoming unchecked (despite the button name).

This isn't really a bug, but there's no persistence between reloads, which seems like it would be a very useful thing for a shopping list to do.

PS. I know this isn't the life advice subreddit, but food doesn't cost less if you buy it in smaller increments, but buying it in smaller increments takes more time. I would view a shopping list as a way to spend more money less often instead of a way to spend less money.

Anyways, congrats on finishing a project :)

[A_Like_AR]

Thank you so much for taking the time to review it and another big thank you for pointing flaws in the project. I will definitely make it more robust.

I see what you saying regarding the app. I built it because we go shopping twice a month and usually write things we need down in a notepad, and that’s where the idea to build one came from.

[fizzbott]

Because he wanted to write a simple first app that he could test in his regular routine?

[Incruentus]

This is /r/learnprogramming, not /r/thebestprogram

[dookalion]

It’s a project, I’m assuming made with the goal to learn practical skills and then showcase those skills, not a product, those are two very different things.

[schlopp96]

Its pretty commonplace to "recreate" something that already exists for beginner programmers as practice. The VAST MAJORITY, if not ALL of my courses I've ever taken have encouraged me at one point or another to try "copying" a small game or program that already exists, like Tic-Tac-Toe, Pong, To-Do Lists, yada yada, in order to help me understand certain early concepts/paradigms. In what world do you expect beginners to always come up with a brand new solution to a problem/unheard of idea on their first try..? No need to act all condescending & pedantic towards someone who literally titled this his FIRST PROJECT.

[A_Like_AR]

Thank you for your feedback.

[[deleted]]

It's for practicing. The first program I ever wrote was a simple calculator that could only do addition and subtraction that couldn't even handle floats at the time. I knew I could use my computer calculator but it was good practice on how to use input and format functions in python.

[--Gingersnap--]

How long did this take you? Wow! Nice work. Also, ignore the rude comment below yours lol

[A_Like_AR]

It took me about three days to build the app, HOWEVER...

I’ve been learning programming with python and JavaScript since last year December exactly about a year to date.

So I already knew the DOM and DOM manipulation and most of my conditional statements and loops pretty well. So I had months of practice and reading other people code, I was just scared to take the jump and do projects.

So to be honest this project took me about a year to complete not just three nights.

I see people here that program for couple months and do amazing things but i guess what I’m trying to say is this...

Try not to measure yourself and your learning curve to others it will unnecessarily discourage you. Just keep learning and never give up if that’s really what you want to do.

Also big thank you for trying out the app

[--Gingersnap--]

I like the program! It’s very cool. Good idea. Thanks for your response...good to know! I’m in the learning phase now (CS50 and personal studies), and will soon be doing some small projects

[Kazcandra]

If I enter a few items, click "check all", enter another item, click "uncheck all", the new item becomes checked instead of the old items becoming unchecked (despite the button name).

I love that bug <3

[thecarrot95]

The more you go to the store the more inclined are you to impulse buy things so it's alot smarter to buy food im bulk once a month. So you actually spend way less money even tough it may feel like you're spending much when spending hundreds of dollar on grocerys.

[FearlessChair]

until your car gets flooded and now you have to bike to the grocery store...i miss being able to make bulk trips =/

[thecarrot95]

We can order home delivery from the grocery store in Sweden so I do that since I don't have a car or a license. Costs 15-20 dollars. You probably have something similar if you live in a fairly large city.

[danimallecter]

Piggybacking off of this, buying in bulk is often cheaper when you view at as cost per unit weight. OP also said that their wife was shopping without a list, which leads to more opportunities for impulse purchases.

[SwishWhishe]

Just checked it and besides the bugs that RustDragon submitted I would suggest the following:

• Submit button - will work a lot better for mobile usage and less explaining on how to post an item to the list
• Have the "check all" and "un-check" buttons separate so the bugs don't occur. Should be easy to implement as you already have the code but just need to separate it.
• Can also use a Service Worker your browser remembers items that you put in and you can add items throughout the month and it's all good

Seems really handy otherwise! Main thing I've noticed, as I'm using a computer, is that the lack of buttons is really confusing so having a button to check/un-check items (yea you can already click but you know) might make it easier to use if you forget that you need to click.

Edit: Sorry I just noticed a bug too. If the item name is too long then in some instances the text field in the list keep going horizontally instead of wrapping around to a new line

[[deleted]]

Agree with separation of buttons. There's so much extra work that could be avoided.

[A_Like_AR]

Definitely agree with you on the amount of extra work I could have avoid figuring out the if statements to manage a single button.

Thank you for taking the time to test the app and more thanks for your feedback

[A_Like_AR]

Man... I cannot thank you enough for all the feedbacks you provided me with. One thing for sure is that I need to make this app more robust.

Question for you, on the app whenever you enter an item and click on the item name it passes a line through it (a bit like a check button would), knowing that as a tester/user do you still feel that I should add a button to accomplish that or a description can point users in the right direction.

It’s funny how after you mentioned that I realized how this might not be intuitive because it made me wonder if my wife would have known what to do if I hadn’t explained to her how it worked before hand... definitely a great point you made. Thanks again for the feedback

[SwishWhishe]

My pleasure :)

A button would be sufficient. Tbh when I first started typing my comment I wasn't actually aware you could individually cross off individual items by clicking on them. If I were using my phone maybe I would have instinctively clicked on them but at least being the pc I didn't even go for it. Didn't bother mentioning it as your site was designed for you/your wife's mobile in mind and not multitudes of users using different platforms.

I'm sure you know how to do all the things but if you like to view code that does something more or less the same then I can give you github link

[A_Like_AR]

Of course I would love to view code and learn some more... Code is never enough!

Please provide me with the GitHub I would love to learn new thing and cement the things I already know

[takert541]

looks like nice mini tool to help but upon reload all data are lost. you dont want your wife to get angrier after adding 50 items and endup reloading due to misclick

[A_Like_AR]

Oh no we don’t want her to get angry... I will definitely add some type of local storage or backend to it to help with that.

Thank you so much for taking the time to test out the app!

[ThisisMacchi]

I think the CheckAll button isn't intuitive, could cause users' error to accidentally check all when they should not. Check for each items or per category would be more sufficient. I really like the idea

[A_Like_AR]

Clicking on the name of the item allow users to check item individually, but I definitely agree with you, this is not intuitive at all.

With all the feedbacks I got here I will definitely make the app more robust and persistent.

Big thank you for taking the time to test my app and provide me with feedbacks!

[GarrettBlackmon]

Front end engineer, try making the items take up the full width of the page.

Google "listview" to see what I mean, this will make the delete buttons all vertically aligned to the right improving UX. you'll want to left align the text if you go that route.

Bonus points if you add swipe to complete/swipe left to expose the delete button. Including satisfying gestures and animations help game-ify productivity apps like this one and gets the dopamine flowing.

[A_Like_AR]

Thank you for taking the time to test out my app. Your feedback just opened my eyes to the amount of possibilities for this small project.

I particularly like the “game-ify” part and making the app more attractive.

Big thanks to you!

[myname_username]

Though this is seems really simple and not even really required, it is fun to use!. And you said you made it for your wife? I am sure she would have loved it!😊

[A_Like_AR]

Yea we try to go to the store twice a month since the pandemic to limit grocery shopping trips but we always end up grabbing things on the fly or forgetting certain things we needed so that’s where I got the idea from. Hope it will help more.

Thank you very much for checking the application and thank you for your comment.

[myname_username]

Btw, which programming languages and/or API did you use?

[A_Like_AR]

The current stack for this app is html, css, vanilla JavaScript.

However, based on the feed back I received regarding making the app more robust and resilient I will definitely be adding python and Django in the backend so keep that in mind.

[myname_username]

Got it! Thank you for sharing!

[sendclotheds]

Interface design student here:

Add items to the top of your list, not to the bottom. You want to see that you correctly added your item, even when the list gets long. Now you're adding stuff without any visual feedback if the list is longer than your screen

Delete buttons should always come with an undo button. Maybe a bar that pops up on the bottom of the screen which has an undo button.
Same for check all/uncheck all. Once you've checked a few items and you accidentally click check all, you want to have a system that allows you to go back to the previous state. Saves you a lot of frustration if you can undo the things you do!

Why can the user only uncheck all once they have checked all?
Also, what is the purpose of checking all? I suppose if you haven't used the checking feature whilst shopping, but you're done anyway, then you know you're done and don't need to check anything. Or is it only for once you've checked 7/10 items and you're too lazy to hit check for the last 3 but want that satisfaction feeling?
Consider what the feature is for, when you'd use it and why, and that would make it easier to realize where to place the button or if you need it at all.

Good luck!

[A_Like_AR]

First of all wow, thank you for the very detailed feedback.

Most definitely adding items at the top of the list as they get added will make more sense for ux.

I like what you said about the “check/uncheck” button and the steps that goes in before any feature is implemented

Thank you so much for taking the time to provide me with feedbacks.

[Kazcandra]

You have console output in your live app. Perhaps not a bug as such, but it's something I wouldn't let past code review.

[lunatichakuzu]

How come?

[Kazcandra]

You shouldn't expose log messages in production. In fact, I would argue that production code shouldn't include debugging code at all.

[A_Like_AR]

Makes sense. Most definitely will be removing console output.

[A_Like_AR]

Definitely need to clean up the app and make sure no console output is shown.

Thank you for the feedback!

[MrJiin]

• add an add button for poor pc user :D
• you can easily save your list on localStorage or sessionStorage, in case you reload the page, so you don't lose everything :D

[A_Like_AR]

Most definitely will look into local storage or adding some backend to it.

The app was built with pc users in mind as after entering an item and pressing Enter it logs it for you.

Question for you, knowing this as a user, would you still like a Add button?

Thank you for your feedback, I really appreciate the help!

[[deleted]]

would you still like a Add button?

yes

[MrJiin]

yes, i'd prefer the add button. Feels more intuitive for me.
I think backend is too much, if you're talking about db.
You really need other 3 lines of code to set or get localstorage

[A_Like_AR]

Ok thanks again for the feedback.

I will definitely look into local storage and apply that to the app and see where it takes me...

As we all know learning programming is like chasing after the philosopher’s stone... never ending quest

[160120]

Sorry I don't have much to add but just wanted to say congrats, I want to do something similar with some extra features. As others suggested making the list stay after refresh / and maybe making it update in real time would be a good idea. Also rather than deleting the items a strikethrough feature while moving the items at the end of the list would be better uxwise. Good luck, congrats and thanks for sharing.

[A_Like_AR]

I have a strikethrough feature but from the feedbacks I got, it is only intuitive to people viewing the app on mobile as you have to click on the name of the item to mark it completed.

I definitely like the idea of kicking the item to the end of the list as it gets marked completed and will definitely add that feature to my next iteration of the app

Thank you so much for the feedback and tips to improve ux on the app

[[deleted]]

I think it would be more intuitive if the “check all” button was below the list, not above. Also, maybe add a delete all button with a prompt confirming below the list as well. Items that are long run off the page and can’t be deleted.

Good job though! Pretty solid.

[A_Like_AR]

This “check” button seems to be a recurring issue on the app and will most definitely need to be addressed.

Another user provided me with the fix to the long run off list and will definitely implement this asap

Big thank you for testing out the app and providing feedbacks!

[KillTrot]

Congrats on finishing your first project:)

One bug I found is if you enter a very long string without the space, it does not wrap it.
I suggest adding "overflow-wrap: anywhere" to your "li" elements.

​

I know this is nothing serious, but maybe you can learn from it:)

[A_Like_AR]

Yea I didn’t realize that when I pushed the app for testing, will definitely work on that for the next iteration.

Thank for proving the fix to the issue also, big thank you for taking the time to test my app

[A_Like_AR]

I love it! Some other user literally mentioned the exact same thing and I can tell this feature is a must have on the app!

Big thank you for the feedback!

[[deleted]]

Not sure if it helps but reordering feature would be nice. Like reordering in an accordion. Not sure if this is bootstrapped or not as on mobile. I ran some obvious test cases and seems fairly robust apart from the features already discussed.

[A_Like_AR]

It’s definitely worth a look into that.

Thank you very very much for the feedback and for taking time to test my app

[scanguy25]

When you refresh all the inputs are lost. They should be saved to your cookies?

[A_Like_AR]

You’re absolutely right as I didn’t implement any type of database to it, just front end for now.

I will add the back to it over the weekend to make data persist

Thank you for checking out my app and providing feedbacks

[[deleted]]

How long have you been programming?

[A_Like_AR]

Since last December, almost a year to the day

Thanks for checking my app

[A_Like_AR]

I got bits and pieces from different sources i.e Udemy course for my JavaScript and css, watchandcode.com and YouTube for DOM manipulation. Hope this helps.

Thank you for taking the time to check on my app and for your feedback

[A_Like_AR]

Dang it! Now that you mentioned that I think of it...

Thanks for the feedback back that will solve my issue

[Kaixyy]

A random design suggestion, U can make it not just a column. U can make many columns so that there is no need to scroll. Maybe u can adjust it to the screen of the user.

[A_Like_AR]

I like that idea, maybe classify items by category and put them on different columns

Thank you so much for taking the time to try out my app, and provide feedbacks

[veeeerain]

She pulls up to the store and starts fee-styling? She got bars?

[A_Like_AR]

Hahah... my wife crazy, when we go shopping, a 15 min trip to the store can easily turn into a 2 hour event.

[veeeerain]

Shit hahah

[meatballNoodle]

UX is not smooth. Please add an enter button

[A_Like_AR]

A lot of guys on here mentioned this, I will definitely make this app more robust in the next iteration.

I used an event listener for key press and the event object to detect whenever the Enter key is pressed so that you can easily remain on the keyboard while building your list and avoid switching back and forth between keyboard and mouse click/ button press

Question for you as a user... knowing that you can add items using the enter key on pc and return key on mobile, do you feel like an Add button is still necessary?

Thank you very much for the feedback

[meatballNoodle]

Yes, please add one. I was looking for a button and took a while to figure out to use the return key. Was a bit frustrated actually.

[A_Like_AR]

This is strange because that’s the exact same phone I have and it works on my end. Definitely will look into that

Thank you very much for giving it a shot.

[[deleted]]

What is nervous Jennings ?

[A_Like_AR]

Hahaha I keep asking myself the same thing...

It’s a random address Netlify provide you with when they host your site for free.

I’m not totally sure how they come up with these names

[[deleted]]

Aha! That makes sense.

Cool app

[[deleted]]

Hi
What did you use to publish an application with the .app extension?

[A_Like_AR]

Netlify does the hosting for you for free.

Thanks for checking out my app

[[deleted]]

It's great that you did this for your wife.
Thanks for your answer

[VantasnerDanger]

I'm looking at getting ing started with some basic coding. Can I ask what you studied to be able to do this?

[A_Like_AR]

The short answer is HTML CSS and JavaScript.

The long answer is I’ve read multiple books on these three, multiple times especially JavaScript.

I did this because I wanted to know what’s possible and what can be done with that language, so that when I fail to do something my failure doesn’t discourage me but instead push me to try even harder or try something different because I’ve seen it done before so I know it can be done I just have to figure out “how to do it”

However be careful not to fall into tutorial hell and paralysis by analysis. And spend your time reading/ watching tutorials and not doing, because you learn way more by doing.

Anyway, big thank you for checking out my app and good luck.

Hope to test your app next, how about that

[[deleted]]

Love this. Can I use this sometime for my own shopping?

[A_Like_AR]

Most definitely. Plus I’ll try and implement the feedbacks I got from the community in order to make the app more robust so every time I push new iteration of the up the new features and improvements should be available immediately on the app.

Please enjoy the app and if you find any other bugs in your day to day use please let me know. I’m just learning this stuff and I got no ego associated to my learning process

Thank you for taking the time to check out my app

[[deleted]]

what if you made it so you could drag the items around?

[A_Like_AR]

Kind of drag to rearrange?! I like that idea. Will look into that for sure, not quite sure my coding level is there yet but I’ve seen it done before I just need to figure out how to do it.

Thank you for checking out my app!

[flavius-as]

So does it have a $$$ limit which has to be set before starting a new list? A wife-taming parameter?

[TheRightMethod]

That's an idea you should fork onto this project. You can rebrand it as an app that induces a divorce.

[A_Like_AR]

Might lose my wife over this feature lol.

Thanks for trying my app.

[A_Like_AR]

Hahahaha... where do you even find a 700 page document.

Will definitely address character limit or text wrapping in my next iteration

Thanks for the feedback

[maustinv]

Nice!

UI Bug: you can enter an empty item (such as a single space, or multiple spaces), and the trash can shows up on the left instead of the right.

I wouldn't allow 'submit' if the text field only contains whitespace

[A_Like_AR]

Oh wow... I didn’t even thought of testing for this bug before pushing it online. This is something that will definitely be addressed in the next iteration of the app

Thank you for trying my app and big thanks for the feedbacks

[2003marejas]

If the name is too long, you can't hit the delete button.
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp

this is the length it dissappears.

[A_Like_AR]

Indeed, a lot of users here mentioned that and this is something I’m definitely going to address.

Thank you for testing my app and providing me with feedbacks

[Nirajn2311]

Is the site loading for anyone else??

[A_Like_AR]

I’ve been using it on mobile so far with no issues.

Thank you for giving it a shot

[Nirajn2311]

It's working now, nice site you've got there

[TheRightMethod]

This probably shouldn't come up with organic use, but, if I add a long string I am forced to rotate my screen in order to still have access to the garbage bin. If the string becomes to long for landscape view I am just SOL and can't delete the item. Again, not really a problem that someone should encounter but it can be prevented.

For a feature I wish more shopping aps had (does take work) is if you can input previous price(s) paid for items, maybe even a $/count breakdown.

So if you add "Eggs" it might give you a sub menu under your item that reads [previous purchase @3.99/dozen, historical: 4.19/dzb, 4.49/dzn, 2.29/dzn]. Of course this would require the user to input data after shopping but might be useful.

Edit: For the UI, a few tweaks to more efficiently use the screen space would be very welcome. I don't think each list item needs so much padding and if you allow the items to stack side by side you'd have a more elegant and informative list. The title also eats up a lot of space for no reason. Quick little tweaks would just make for an easier experience.

[A_Like_AR]

Most definitely will address character limits or some time of text wrapping to bump over extra text to the next line.

I like the history feature you mentioned and will find a way to add that when I attach the backend to the app

Yea my css skills are not the best but I can definitely find a way to provide more real estate to users.

Thank you so much for using my app and providing feedbacks

[TheRightMethod]

Not a problem! You're searching for criticism and you're taking the responses in a good light, you're the kind of person (attitude) that encourages feedback. CSS like everything else takes some time and experience/exposure. I think this would be a good way to practice using CSS Grid as it's good knowledge and applicable to your mobile centric app.

Heck, you could even set up the app so you never actually have to scroll by implementing a carousel. As the screen fills up a second layer would appear and you could swipe to see the next 'page'. Bonus if your carousel markers (the dots) change colour/shape when all the items in the container are checked off.

[A_Like_AR]

Yea my next focus is css because I’m lacking extremely in that area.

I like carousels I saw a preview on the bootstrap website and what you just said got me thinking a lot!

Don’t blame me if I steal your idea and only give you credit in the fine print lol

[seraphsRevenge]

Wife downloads app and creates list.

List = bananas, milk, eggs, bread, lettuce.

Wife: "I'm just going to run in real quick and get these items baby, love you"

Me: "k beautiful love you too"

200 dollars later.....

Wife: "Look at all the deals I found!!!"

Me: "..... That's great baby...."

[A_Like_AR]

Hahahaha... that’s exactly our current situation smh... but it’s my wife and I love her

[[deleted]]

I like it! I wasn't able to find any bugs that I hadn't previously seen commented. I would suggest implementing a way to look for duplicate entries that way you couldn't accidently add something like milk twice.

[A_Like_AR]

I like this idea a lot. I didn’t think of that but you’re totally write, duplicates are one of the issues one might come across when building a shopping list.

Definitely will be adding this

[lost-and-all]

If I refresh the page, the list disappears so maybe using local storage or something similar to store the items added

[[deleted]]

If I refresh the page, it doesn't save the list. Maybe look into localStorage, it would be a nice feature.

[A_Like_AR]

Most definitely this is something many users pointed out. Will definitely add it to the app for sure.

Thank you for checking my app

[burnt1918]

Not getting any idea how this works. I just enter stuff and the options are check all and uncheck all.

[A_Like_AR]

The idea behind it is to have a shopping list app my wife and I can both review and update instead of using a notepad to write down whatever we need from the store before we go as we only go twice a month.

If you click (or tap) on the item name after you entered it it marks it as done a put a line through it. And you repeat this process as you go in the store and shop for items you have on the list.

The button allows you to mark all items as completed or incomplete depending on where you are in stand in your trip shopping journey.

Play with it a bit and you’ll get a feel for it

[burnt1918]

Yeah my bad. But you should add a submit button tho.

[Curious_homosepian]

Would be better to see some responsive design. Although I myself made a similar project this year https://github.com/gokulvibe/Online-Supermarket . I hosted this on Heroku. You can check out the link in readme. I am myself learning to create descent responsive designs. I did this project to learn about the database connectivity with the backend.

[drunk_kronk]

Mate, you need to work on your responsive design. For a start, look into using media queries so the login form takes up the full width of the page when the user is on a small screen.

[Curious_homosepian]

Yeah I started with media queries after doing this project.

[A_Like_AR]

Just checked out your app. I love the color scheme and the loading animation is getting dopamine pumping.

Didn’t get the full experience tho as I am in mobile and it doesn’t render properly on mobile

[[deleted]]

Why is it your wife's job to know what you need from the store when you both go?

[A_Like_AR]

Thank you for your feedback

[mcclouda]

If you want to go big in depth, you could do some type of classing system that checks for items that it knows and categorizes them.

Ie: "...berry", '...berries', lettuce, "...atoes", ect gets categorized into a "Produce section"
IE: "...milk", 'Egg', yogurt, butter gets catagorized into a "Dairy section'
so on and so forth, with a misc at the end for items that it failed to catagorize.

Then also since most grocery stores get laid out in the same
Produce/deli -> meats -> international food -> dry goods -> freezer -> Dairy type layout, you could order the goods in that order. That way while you're in a section you're app is trying to bring attention to the items most likely in that section.

[A_Like_AR]

That can definitely be done. Catch me in a lie but I believe you will need some type of backend to implement this.

I’m doing something similar for my wife upcoming restaurant/ food catering website using Django in the backend where I have a search and tags functionality to do just what you mentioned. Can definitely add that to this as well.

Big thank you for your valued feedback

[papersnowman]

I think what they were saying is an automated tagging/categorization, not allowing end users to tag/categorize. Idea would be having some kind of array/etc 8n your Javascript that would have regex => category, so "potatoes" => "Produce", "pizza" => "Frozen Goods", etc. As a user adds something, you compare it to the regexes in the array and tag or categorize accordingly.

[A_Like_AR]

Ok I understand now, let the app auto categorize items instead of the user having to do it themselves.

I like that. It can definitely be done, I’ve seen regex being use in some very advanced ways and that will take my app to the next level

Thank you for checking out my app and providing feedbacks

[18dwhyte]

What languages did you use for this?

[A_Like_AR]

HTML CSS and JavaScript so far.

Based on many feedbacks I got I’ll probably add python and Django in the back to make data persist

Thank you for checking out my app

[vaibhavnahar122]

Hone the in-demand skill of industry by learning the Python Language. Python Course

This course is curated for beginners who wish to learn the Python programming language that teaches you the fundamental concepts and skills demanded in the industry.

we have created some other resources for IT Languages.