/Shoppers-United

Collaborative List

Primary LanguageJavaScript

Shoppers United

Screen Shot 2022-09-06 at 5 50 30 PM

A simple web application that syncs with multiple devices and allows users to easily create lists on a single platform. Go ahead and create your shopping list!

Overview

This app illustrates how to build an app with sign-in functionality using Express, Passport, and the passport-local strategy.

Get Started

Table of Contents

  1. Built With
  2. What was learned
  3. Optimizations
  4. Node Dependencies
  5. Prerequisities
  6. Run This App

Built With

  • JavaScript
  • HTML
  • CSS
  • Node.js
  • MongoDB
  • Mongoose
  • Express
  • Passport.js

    • What Was Learned

    This app is a traditional web application, in which application logic and data persistence resides on the server. HTML pages and forms are rendered by the server and client-side JavaScript is kept to a minimum. HTML pages are rendered using EJS templates, and are styled using vanilla CSS.

    When a user first arrives at this app, they are prompted to sign in. Once authenticated, a login session is established and maintained between the server and the user's browser.

    After signing in, the user can view, create, and edit list items. Interaction occurs by clicking links and submitting forms, which trigger HTTP requests.

    Optimizations

    • Users are able to updated their passwords
    • Users are able to reser their passwords with forgot password feature
    • Extra security measures by locking account if password or email is entered incorrectly multiple times
    • User setting page, where users can change everything about their profile in this page
    • Mobile friendly
    • Push Notifications
    • Study [WebPush Notifications](https://itnext.io/an-introduction-to-web-push-notifications-a701783917ce) to add notification functionality to app.
    • Consider using [Pusher Beams](https://pusher.com/beams), a cross-platform push notifications API designed to deliver critical transactional information in realtime, without complex integrations and maintenance
    • Toggle Display Theme
    • Create a button in app's `General Settings` that allow users to toggle between light and dark mode on a click/tap. Libraries that can be used are [Fontawesome](https://fontawesome.com/) and [Bootstrap](https://getbootstrap.com/).
    • Improve user experience and facilitate inclusivity by following [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/). (e.g. color blindness, dyslexia, etc.)

      • Node dependecies

      • Express
      • Cors
      • Passport
      • Validator
      • Mongoose

      Prerequistes

      Install Node.js

      Steps to install node

      Connecting Mongo Database

      SIte for MongoDatabase

      Run This Locally 

      git clone https://github.com/DrummerDee/Shoppers-United.git

       cd shoppers-united

      npm install --save

      npm run start

      Navigate to http://localhost:2021

      License

      Shoppers United is under the MIT license.