Food Order App Redux - a ReactJS, Redux, Typescript and Sass project

Overview

Food Order App Redux

food-order-app-redux

Live Application

Click here to go to the application.

Installation

  1. Clone repository
git clone https://github.com/arturguimaraes/food-order-app-redux.git 
  1. Go to directory
cd food-order-app-redux
  1. Install required libraries
npm i
  1. Start project on http://localhost:3000/
npm start

Introduction

This is a ReactJS, Redux, Typescript and Sass project. This simulates a food ordering app, with cart items control for a basic e-commerce shop.

Implementation

The project uses ReactJS, Redux, Typescript and Sass. It explores concepts of:

  1. Redux (Hooks, Store, Actions, Slice, State, Dispatch)
  2. useState, useEffect
  3. Interface
  4. Event handlers
  5. Sass modules
  6. Spread operators

Features

food-order-app-redux

  1. Cart control for adding correctly amounts if item is already in cart.
  2. If item not in cart, add to it normaly.
  3. Item removal in case of subtracting less then 1 amount, or subtracts amount.
  4. Empty cart feature.
  5. All features above are controlled via Redux dispatch actions.
You might also like...
A simple Countdown created using Vite, React, Typescript and Sass
A simple Countdown created using Vite, React, Typescript and Sass

Countdown 🎯 About This a simple Countdown created using Vite, React, Typescript and Sass. Demo: https://countdown-teal-zeta.vercel.app/ 🚀 Technologi

Bookstore app, store your favorites books. Built with JavaScript, React, SASS and framer.
Bookstore app, store your favorites books. Built with JavaScript, React, SASS and framer.

Bookstore. Bookstore application built with REACT, JAVASCRIPT, and SASS. It lets you add and remove books. I also used motion library too create compl

A website designed to showcase the US stock market, Built using React, Redux, SASS, and tested using React testing library
A website designed to showcase the US stock market, Built using React, Redux, SASS, and tested using React testing library

Market Overview is a website designed to showcase the US stock market. You could find details about the stock of choice and improve your strategies. Built using React, Redux, SASS, and tested using React testing library.

A basic movie rating application which created with using Redux Toolkit, Axios for API calls, React Router DOM for Routing and Node-SASS for my SCSS compile to CSS

A basic movie rating application which created with using Redux Toolkit, Axios for API calls, React Router DOM for Routing and Node-SASS for my SCSS compile to CSS..

Two decorators (higher order components) that inject "window" scroll position, dimensions, orientation and breakpoint to your component's props.

React Window Decorators Two decorators (higher order components) that inject window scroll position, dimensions, orientation, breakpoint* and isTouchD

Michal-25-01-2022 - Trading Application with embedded Order Book with responsive design
Michal-25-01-2022 - Trading Application with embedded Order Book with responsive design

Description Trading Application with embedded Order Book with responsive design.

A ReactJS (using Redux) + TypeScript project
A ReactJS (using Redux) + TypeScript project

A ReactJS (using Redux) + TypeScript project. The main objective is to add users using form control and redux to manage the states of the user list. The project uses the Bootstrap React library and it's components, and explores concepts of Redux (Hooks, Store, Actions, Slice, State, Dispatch), useState, Interface and event handlers.

React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal

React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal (build with pure react no library), tabs, and others.

Microverse React Capstone Project : Development of the MetaCrypt app using ReactJs and Redux
Microverse React Capstone Project : Development of the MetaCrypt app using ReactJs and Redux

MetaCrypt is a mobile web app where you can track and follow the prices , charts , and some informations of the most famous cryptocurrencies, this application was built with ReactJs, Redux, and bootstrap

Owner
Artur Guimarães
Driven by challenge. Powered by technology.
Artur Guimarães
An example of a fast food ordering app with Ionic React

An example of a fast food ordering app with Ionic React

Alan Montgomery 25 Sep 12, 2022
ReactJS Game Landing Page | ReactJS SASS ViteJS

legends-landing-page ReactJS Game Landing Page | ReactJS SASS ViteJS legends-landing-page ReactJS Game Landing Page | ReactJS SASS ViteJS Video tuto

Tran Anh Tuat 88 Sep 9, 2022
Web frontend of the NLW heat 2021 project, used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

This is the web frontend of the NLW heat 2021 project, carried out by rocketseat. It is free to use, and any questions or errors, please do not hesitate to consult me, or post an issue. In this code we used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

Guilherme Iuri 1 Oct 25, 2021
Weather App - a simple weather app developed in typescript using React, HTML and SASS

Weather App is a simple weather app developed in typescript using React, HTML and SASS. The app allows you to see the weather from your current location or another location around the globe using OpenWeather Api and Google Maps Api

Darle Gheorghe 6 Sep 9, 2022
Build Web App for displaying book list and getting API using React, Redux, Typescript, SASS

Bookstore This is a web App that displays a list of books and fetches an API. Built with React, Redux, Typescript, SASS. Built With JavaScript React R

Leonardo Albornoz 10 Sep 23, 2022
Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.

Shop Price Checker Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability w

Max Base 4 Jul 31, 2022
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

?? SnapChat Clone [LIVE APP] [Live App] • [Video Demo] ⚡️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

null 924 Sep 20, 2022
A simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar with legacy code.

Simple Calculator This is a simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar w

Emanuel Okello 7 Aug 8, 2021
The project is a twitter clone. React technology, React Router (Code Splitting), Sass.

The project is a twitter clone. React technology, React Router (Code Splitting), Sass. Helmet is used as npm package. The goal is to show the title of that page in the header when switching between pages. Waiting for your feedback.

Melisa Demirparmak 13 Aug 29, 2022
Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications

Artemis UI About Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications. Docs and De

Rishu Patel 4 Aug 4, 2022