Introduction
This shopping list is a project I made for me and my family. We needed a good way to make a list of items to get at the store, so we thought: 'Why not make it ourselves?'. The project has gone through multiple iterations, one of which is pretty much just a completely new project. The list allows users to add, check, remove, search items, and add or remove default items.
TYPE
Personal Project
STACK
React
Material-ui
Express
CODE
Currently Unavailable
The reason
My family does groceries almost every day. We were facing the problem of not having easy access to a shopping list. We are a family of programmers, so we thought we would make one ourselves. This would give us practice with HTML, CSS, JavaScript, and PHP. It would also give us a shopping list that we could use for everyday shopping. The project started out with just a simple list, connected to a database. This slowly grew with more and more features.
Spotlight
Technology
It was quite a challenge to make this project. The first iteration was quite simple, and technologically not very impressive. The redesign however was made in React. Prior to this project I had no experience with React, so I had quite a bit to learn. I kept trying and with some help of my friends I got everything working.UI
Another challenge with this project was the UI. I thought the old UI was too cluttered, so one of the main focuses for the redesign was to make the UI look good, clean, and usable. I'm really proud of the swiping actions. When you want to check or delete an item, you swipe the item, and the action executes.Themes
Another challenge was the theme switcher. I made it and tested it in development. The theme you switched to would only apply to half the app, and it was just a mess. I had to stop working for the day, so I pushed this unfinished update to production with a warning that it might not work. The theme switcher worked perfectly on production, and to this day I've never found out why.The execution
Iteration #1
Our first iteration was written in plain HTML, CSS, JavaScript, and PHP. It started out very simple. It was made for mobile phones; If you looked at it from the computer everything looked very big and blown up
It was just a simple list where you can add and remove items. The items can have a quantity and a link. If a link has been filled in a link icon appears next to the item. The user can click on this icon to be redirected to the product on an external website.
Going live
This was pretty much all we needed to go live. We used the shopping list for a while and came up with some features that we thought were missing. The next feature we added was editing items. Next to an item there is a pencil. When the user clicks on the pencil, the item details get filled in the input fields. The user can then edit the fields and submit the item, thereby updating it on the server.After this we added a default item list feature. This feature allowed users to save items for easy reuse.
Another feature was searching items. We mostly shop at one specific store, and we wanted a feature where a user could search for a product on the website of this store. The backend sends a request to the website, and extracts all the items from the HTML using regex. It then shows the items in a list, where the user can add the items to the list.
Iteration #2
These features served as the basis for the redesign. I was very interested in React, and I decided to remake the shopping list in this framework. I used material-ui to make the UI and style the application. All the features were implemented one by one, some in a slightly different way.
The new UI looks cleaner, has more space for the items, and is better usable. You can now choose between checking items and removing them. You do this by swiping the item to a particular side, as demonstrated in the screenshot above. The search and default items have been given a separate page, to make it feel more like a mobile application. The way to add items has been tucked away behind the plus button. This button shows a dialog where the user can enter the item details.
Lastly, I made a settings page. Here the user can see the changelog for the current version, and change their theme. There are three hand-defined themes and they cover all the options my family wanted.