Code Monkey home page Code Monkey logo

denoshop's Introduction

Part done by XinYang

Live site

The Architecture

Architecture Design

Features

Part 1 - Application-wide Functions

  1. PWA
    • Install
    • Cross-platform
    • Native feeling
    • Cacheing - faster speed
    • Offline
  2. Elaticsearch - AWS
    • Fuzzy search
    • Real Time search - less than 1ms given current dataset
    • Search with title, price and category
    • Auto-suggest
    • First character search
    • Word level search bolding
    • Search from back
    • UI
  3. Product item UI
  4. SVG logo & icons
  5. Responsive & Interactive design
  6. 404 page
  7. Loading screen

Part 2 - User management

  1. Register & login UI
  2. Third party login - Google & Github
  3. Profile images management with cloudinary
  4. User dashboard UI
  5. Address autocomplete UI
  6. Address CRUD

Part 3 - Cart management

  1. Animation when item added to cart
  2. Live reflection of cart items
  3. Cart CRUD & UI

Architecture & Agile

  1. Architecture design
  2. SCRUM & KanBan
  3. Github & Git flow - Give crash course
  4. Writing short articles - environment variables etc
  5. Deployment
    • Azure App services
    • AWS RDS
    • APIs
    • Github
  6. Monitoring of application
    • Newrelic - APM
    • UpTimeRobot - cloudwatch
    • Datadog - Azure app service status

denoshop's People

Contributors

tsulim avatar xy-241 avatar pepejxd avatar alan-39 avatar xenonica avatar dependabot[bot] avatar

Stargazers

avatar

Watchers

James Cloos avatar

denoshop's Issues

[User Management] Google login

  • Get Google Client ID and secret
  • Get the google login bar
  • Store the google user info back to the database
  • add in googleId attribute to the database
  • Use passport lib to perform the login

[User Management] User Dashboard UI

  • Responsive + UX
  • 5 tabs - my profile, my orders, my wallet, shopping wishlist, my address
  • Tabs with icon
  • Does not refresh the page when change tabs
  • Customise the scrolling bar

[Order Management] Adding to cart CRUD

  • Operation performed without refreshing the page
  • Add product to cart
  • Modify items in cart
  • Delete items in cart
  • Retrieve item information for the login user from the database

[User Management] Github Login

  • Get the github ID and secret
  • Settle the github login bar UI
  • Save the github user back to the database
  • Add an attribute githubId to the User schema
  • User passport to perform the operation

[User Management] Delivery Info CRUD

  • Add in a section in the user dashboard to show a list of delivery information
  • Add in a section in the user dashboard to add in a new delivery information
  • Add in a section in the user dashboard to edit/delete a delivery information
  • Delivery infromation can be filled in automatically

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.