Git Product home page Git Product logo

ecommerce-mean-app's Introduction

E-commerce MEAN App

The E-commerce MEAN App combines the power of MongoDB, ExpressJS, Angular, and Node.js with the design and user interaction principles of Google's Material Design spec. E-commerce functionality is made possible through integration with Snipcart.

Installation and Setup

To get started, git clone the project into the desired location on your machine. Once cloned, cd into the directory and run npm install to install the required production and development dependencies. Running npm install will also trigger a postinstall ng build --prod --output-path dist script which will build the Angular front-end and put it into a new "dist" directory within your project. Once these scripts complete, run npm start to run the development server. Once the development server has started and is connected to the MongoDB database, open your preferred browser and navigate to "localhost:8080" to use the app.

MongoDB Configuration

MongoDB connection string is stored in process.env.MONGODB_URI.

Angular Configuration

In development, all Angular components, modules, and services are located in the "src" directory. All Material Design components used in this app are collected into a "Material" module located at "src/app/material.module.ts". The app has three main components: Home, Products, and Product Detail. The Home component contains the home page, which is just static HTML serving as the landing page for the app. The Products component uses the data service to retrieve all products and programmatically display them as Material Design cards. Finally, the Product Detail component uses the data service and the URL-supplied Product ID parameter to dynamically build a page with more detail on the specific product requested.

ecommerce-mean-app's People

Contributors

richardcarrigan 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.