Project Idea 04 – Shopping List Web Application
Tags: ideas, sideprojects, react, webdev
Published: 2020-05-19 10:42:29

*This post published on my blog [before](https://aligoren.com/project-idea-04-shopping-list-web-application/)*

Hi everyone, today I'll talk about a new project idea. This seems to be a series of ideas. Because I had published different ideas before.

## What Will We Do?

The main idea of this post will be the Shopping List application. As you know there are tons of alternatives to our shopping list and there will be more.

![Shopping List](https://dev-to-uploads.s3.amazonaws.com/i/85nva4b6nq0kb8pbquq6.png)

*Photo from [WikiPedia](https://en.wikipedia.org/wiki/Shopping_list)*

You can be lost this paper but our system will store always.

## Explanation of the Idea

For example, you are too lazy to remember something about shopping. Because you don't take notes. Our application idea will help you to organize your shopping list. It will be a web application. You create lists to-buy something.

### In This App;

Our application will be highly customizable. And it will have really good features.

#### There Should be a User Login and Registration System

Users must be logged into the system.

#### Category Management

Users can create categories. For example, kitchen, home, etc. There should be a default category called **General**. For example, I'll create a category called **Kitchen**. I can add these items to be purchased in the kitchen category.

#### Payment Types

Users can create payment types. For example, credit card, debit card, cash, etc. So, users can add expenses with payment types for completed shopping.

#### Product Management

Our system should have the ability to add new products. Which means predefined products will be ready. Users can choose these products from the system. 

In this way, you don't have to set prices for each product you bought every time. Because you already did before.

I mean, a lemon's price equals $2.00. When you add this lemon to today's shopping list, your expense will be $2.00 automatically.

#### Expense and Income Management

There should be also income and expense management features to get reports.

#### Reports

We can get annual, monthly, or between two dates reports by categories, payment types, or products. 

So, we can track our expenses and maybe compare them. For example, 19.05.2019 and 19.05.2020 should be comparable.

It would be good that a dough chart showing how much money you spend based on payment methods. Of course, a table could be good.

The last thing, each report should be exportable in various formats like Excel, CSV, PDF, etc.

#### SMS and Email Reminders

You can also use the [Twilio](https://www.twilio.com/)  SMS API to send your daily shopping list as an SMS.

The last thing you can do is sending an e-mail. You can use [Mailjet](https://www.mailjet.com/) for this.

## Technologies We Can Use

In this section, we'll see different technologies. You already heard them.

### Front-End

![React](https://dev-to-uploads.s3.amazonaws.com/i/uz5qls8emgeckrdq9iu5.png)

You can use whatever you want. But, If I were you, I could use React for the front-end. Because It has a huge community. There are many good components in the NPM system for React.

**Website**: [https://reactjs.org](https://reactjs.org)

When you complete this project, you will understand how the React works and what are the hooks.

**Introducing Hooks**: [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html)

> Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

**Testing**: Your components should have tests.

### Back-End

![Flask](https://dev-to-uploads.s3.amazonaws.com/i/u9gzckvbawwschfftfkn.png)

You can use whatever you want. For this project, I could use Flask as an API. But you can use any NodeJS framework as well.

Don't forget, frameworks are only tools to make your project development processes fast. You don't have to think about tons of problems. Someone already thought.

You can use JWT to authentication and [GraphQL](https://www.apollographql.com/docs/react/) could be good to create queries for your API.

### Database

![PostgreSQL](https://dev-to-uploads.s3.amazonaws.com/i/ke7d1d178j7yegxs2ubl.png)

I know, most of the developers love NoSQL solutions. But in this project, we will use [PostgreSQL](https://www.postgresql.org/) database. It is an advanced relational database management system and open-source.

There are useful data types to store your data. You can find good documentation [here](https://www.postgresqltutorial.com/)

## EOL

I think we have a good shopping list project. Just think about that, you can have a public API. After, you can build your mobile application using this API with React Native.

Sorry for the grammar mistakes.

Thanks for reading ^_^ and if there is something wrong, tell me.

## Resources

- [https://reactjs.org](https://reactjs.org)
- [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html)
- [https://www.apollographql.com/docs/react/](https://www.apollographql.com/docs/react/)
- [https://www.postgresql.org/](https://www.postgresql.org/)
- [https://www.postgresqltutorial.com/](https://www.postgresqltutorial.com/)