Giter VIP home page Giter VIP logo

leoshangtang / partytime Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 335 KB

This repository contains the Party Time App, a web application that helps calculate the cost of food and drinks for your party. Easily manage your guest list, customize consumption options, and ensure a fair distribution of expenses. I made this application throughout my time working at Atco! Let's get the party started! ๐ŸŽ‰๐ŸŽŠ

Home Page: https://party-calculator-be0e4.web.app

HTML 4.31% CSS 2.27% TypeScript 93.42%
react redux-toolkit typescript party party-apps

partytime's Introduction

Party Time App - Calculate the Cost of Your Party

LOGO

Overview

Welcome to the Party Time App! This app is designed to help calculate the cost of food and drinks at your party without any hassle. You can visit the application by pressing here!


Features

1. Add, Edit, and Delete Users

Easily manage your guest list by adding users with their respective contact information. You can also edit their details or remove them from the list when necessary.

2. Food and Drinks Cost Calculation

Let the app handle the math for you! The Party Planner App automatically calculates the prices owed by each person based on the total cost of food and drinks for the event.

3. Consumption Customization

Everyone's appetite is different! With this feature, you can set different options for the amount of food or drinks each person consumes. This way, you can ensure a fair and accurate distribution of expenses.

4. Settings Customization

Tailor the app to your specific needs. Easily adjust the price percentages for food and drinks that all guests consume. Personalize your user interface by using the theme toggler.


How to Use

1. Add People

Above the list, locate the plus icon. Clicking on this icon will prompt a form to pop up, enabling you to input values for a new user.

2. Remove People

After adding people, each individual will have a trash icon button. By clicking this icon, you can effortlessly remove users from the list.

3. Edit People

Each individual will also be equipped with a "pop-up" icon button. Upon clicking this icon, a non-editable form will appear, displaying specific information relevant to the respective individual. At the bottom of the form, there will be an edit button to update the text fields as needed.

4. Change Total Price

Above the list, you will find a text field displaying a price along with a pencil icon button next to it. To modify the price, click on the pencil icon. Doing so will trigger a pop-up form that allows you to input the total expenses spent on food and drinks.

5. Change Pricing Ratios and Theme Toggler

Above the list, locate the gear icon button. Clicking this icon will bring up a form to change the pricing ratios as well as toggling the theme.


Future Improvements

1. Code Clean Up

The code base requires some clean-up, especially concerning improper naming conventions, which have contributed to confusion in certain parts of the code.

2. Component Clean Up

Some code can be refactored into smaller React components. This will help clean up code in larger components and make the project more scalable for the future.

3. More Prices!!!

At present, the application only considers food and drink prices. However, there is room for expansion based on user demand.

Let's get the party started with Party Time App! ๐ŸŽ‰๐ŸŽŠ


How this small application started

Being university students, my friends and I often had to stick to a budget, so having one person pay for everyone's food and drinks at a party, especially with larger groups of 20 or more people, rarely happened. As a result, we would usually split the costs of food and drinks. To ensure fairness at a recent party, we decided to divide the expenses depending on how much each person consumed instead of spliting costs evenly. The categories of consumption that we relied on included: none, light, medium, and heavy.

Tracking the exact amount of food and drinks consumed by each individual on paper was challenging, so we resorted to using an Excel spreadsheet. That being said, it wasnโ€™t the smoothest tool to use. Nonetheless, it got the job done. This experience inspired me to create this application which was also a great opportunity for me to practice Typescript, React, and Redux. Overall, this application turned out to be more user-friendly than the Excel spreadsheet. It allowed anyone to easily handle adding, editing, or deleting individuals, as well as experimenting with different pricing ratios or percentages. This was especially helpful for those who were not familiar with using Excel!


Note: The icon or dinosaur image that I use is from here!

partytime's People

Contributors

leoshangtang avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.