Git Product home page Git Product logo

coding-ch's Introduction

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Or you can vist live demo page: coding-ch.vercel.app/

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Project Process

Problem: Sales Taxes

Displaying taxable products as a post-sale total output by sale type

Tech Stack

Adopted with Next.js TypeScript for modern framework usage

Data Structure

The user interface was designed at the very beginning of the problem. Displaying on a single page was preferred as an easily understandable format for output, such as which inputs can be used for what purposes. For the data structure, first a product data was created as json. (app > data > product.json) Options similar to the desired inputs are configured here according to their own ids. Product and sales quantity were also combined with piece entity as number. I wanted a purchase to be possible in different quantities. A Sale interface was created for this. Each of these sales would eventually be added to a basket, so there would have to be sales and baskets in all of them. Thus, the outputs could be distributed to different baskets. However, I thought it would be useful to have a feature like add to cart type here. That's why I created add to cart type. This feature is shown to the user with a radio button at the beginning of the first component. By default, the current option is active. However, if the user wants to add a product to another cart, they should only select the add to new cart option from here. In this way, baskets can also be listed on outputs.

Outputs

Each add action is forwarded to a cart with updated date data. If the number of sales products is 1, this means that a basket will only be represented by the date it was created (created at: ''). However, when multiple products are added, the latest date data is also shown as the update date in the shopping card footer (updated at: ''). All baskets are represented in a card (TaxCard). Each comes unique with its own number. Helper functions have been designed for Sales Taxes and Date manipulations. All helper functions are defined in the utils folder (app > _utils).

coding-ch's People

Contributors

fk-pixel 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.