Giter Club home page Giter Club logo

swd-evaluation-task's Introduction

swd-evaluation-task

A simple full stack shopping cart

UI

The web app UI should be look like the below images:

Home Page

homepage

Products Page

productspage

Checkout Page

checkoutpage

Backend

This is a simple Node.js + Express.js with TypeScript API server and will be provided products info using routes: /api/products/

the output format:

[
  {
    "id": "207",
    "name": "Bananas",
    "price": 1.09,
    "description": "This cluster of delicious bananas will keep your hunger down while filling you with nutritious potassium. ",
    "imageURL": "https://live.staticflickr.com/7013/6612824761_3f66a93c71_b.jpg",
    "imageAlt": "A single bunch of 4 yellow bananas connected toegher",
    "imageCredit": "\"Bananas (edited)\" by 24oranges.nl is licensed under CC BY-SA 2.0"
  },
  {
    "id": "208",
    "name": "Chocolates",
    "price": 9.99,
    "description": "This 3-pack of fine Zotter chocolates comes all the way from Austria and will bring you the comfort and joy you need this very day.",
    "imageURL": "https://cdn.shopify.com/s/files/1/0386/0293/2356/products/image_2c5617fb-89a7-4d04-9bfb-f0c0dcd28f6d_590x.jpg?v=1612476249",
    "imageAlt": "3 chocolate bars from Zotter Choclates",
    "imageCredit": "Kari Ferguson, Oh Hello Again 2021"
  },
  {
    "id": "209",
    "name": "Ice cream",
    "price": 3.49,
    "description": "This is a delicious ice cream cone that will literally melt in your mouth. Enjoy on any warm summer day.",
    "imageURL": "https://live.staticflickr.com/4162/34323731175_1d163a49ed_b.jpg",
    "imageAlt": "ice cream cone",
    "imageCredit": "\"ice cream cone\" by sussexcareers is marked under CC0 1.0."
  },
  {
    "id": "300",
    "name": "Headphones",
    "price": 34.99,
    "description": "Look cool while blocking out the rest of the world.",
    "imageURL": "https://live.staticflickr.com/5763/22921682035_334b6161c9_b.jpg",
    "imageAlt": "Cool looking headphones in gray and black",
    "imageCredit": "\"Headphones in Black and White\" by Image Catalog is marked under CC0 1.0."
  },
  {
    "id": "302",
    "name": "Candle",
    "price": 20.0,
    "description": "Do not leave this candle burning all night, but enjoy the smell and warm color it provides.",
    "imageURL": "https://live.staticflickr.com/4222/34089272484_40ab76ce4e_b.jpg",
    "imageAlt": "upclose shot of a lit candle that by Walrus36",
    "imageCredit": "\"Candle\" by Walrus36 is licensed with CC BY 2.0."
  }
]

Frontend

  • http://localhost:3000/ Homepage will show a simple store front. image source: store.jpg
  • http://localhost:3000/products Products page will show the list of available products from backend products routes: /api/products/
  • http://localhost:3000/checkout Checkout page will show the list of product already added to cart
  • When user press the checkout button then the cart will be empty

Frontend Tech Stack:

  • React
  • Redux Toolkit
  • TypeScript

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.