Convert Figma logo to code with AI

aviabird logoangularspree

angular e-commerce framework for online store

1,695
810
1,695
18

Top Related Projects

12,911

An open source eCommerce platform giving you full control and customizability. Modular and API-first. Build any eCommerce solution that your business requires. Developed by @vendo-dev

4,997

🛒 Solidus, the open-source eCommerce framework for industry trailblazers.

11,507

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.

PrestaShop is the universal open-source software platform to build your e-commerce solution.

ASP.NET Core eCommerce software. nopCommerce is a free and open-source shopping cart.

A free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.

Quick Overview

AngularSpree is an open-source Angular e-commerce project that provides a foundation for building online stores. It combines Angular with a Ruby on Rails backend, offering a full-stack solution for developers looking to create customizable e-commerce platforms.

Pros

  • Built with modern technologies (Angular, Ruby on Rails)
  • Customizable and extensible architecture
  • Active community and regular updates
  • Includes essential e-commerce features out of the box

Cons

  • Learning curve for developers new to Angular or Ruby on Rails
  • Limited documentation compared to some commercial solutions
  • May require additional work to scale for large-scale e-commerce operations
  • Dependency on multiple technologies can increase complexity

Code Examples

  1. Product listing component:
@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of products">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency }}</p>
    </div>
  `
})
export class ProductListComponent {
  @Input() products: Product[];
}
  1. Add to cart functionality:
@Injectable({
  providedIn: 'root'
})
export class CartService {
  addToCart(product: Product) {
    // Implementation to add product to cart
  }
}

@Component({
  selector: 'app-product-detail',
  template: `
    <button (click)="addToCart(product)">Add to Cart</button>
  `
})
export class ProductDetailComponent {
  @Input() product: Product;

  constructor(private cartService: CartService) {}

  addToCart(product: Product) {
    this.cartService.addToCart(product);
  }
}
  1. Checkout process:
@Component({
  selector: 'app-checkout',
  template: `
    <form (ngSubmit)="onSubmit()">
      <!-- Form fields -->
      <button type="submit">Place Order</button>
    </form>
  `
})
export class CheckoutComponent {
  onSubmit() {
    // Implementation to process the order
  }
}

Getting Started

  1. Clone the repository:

    git clone https://github.com/aviabird/angularspree.git
    cd angularspree
    
  2. Install dependencies:

    npm install
    
  3. Start the development server:

    ng serve
    
  4. Open your browser and navigate to http://localhost:4200 to see the application running.

Competitor Comparisons

12,911

An open source eCommerce platform giving you full control and customizability. Modular and API-first. Build any eCommerce solution that your business requires. Developed by @vendo-dev

Pros of Spree

  • Larger community and more extensive documentation
  • Broader feature set and more comprehensive e-commerce solution
  • Better long-term support and maintenance

Cons of Spree

  • Steeper learning curve due to its complexity
  • Less flexibility for customization compared to AngularSpree
  • Potentially slower performance for smaller-scale applications

Code Comparison

Spree (Ruby on Rails):

Spree::Core::Engine.add_routes do
  namespace :admin do
    resources :products do
      resources :variants
    end
  end
end

AngularSpree (Angular):

const routes: Routes = [
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];

The code snippets demonstrate the routing approach in each project. Spree uses Ruby on Rails routing conventions, while AngularSpree utilizes Angular's routing system.

Spree offers a more comprehensive e-commerce solution with extensive features and community support, making it suitable for larger-scale projects. However, it may be more complex to learn and customize.

AngularSpree, built with Angular, provides more flexibility and potentially better performance for smaller applications. It may be easier to customize but lacks the extensive feature set and community support of Spree.

Choose Spree for a robust, full-featured e-commerce platform, or AngularSpree for a more lightweight, customizable solution using modern web technologies.

4,997

🛒 Solidus, the open-source eCommerce framework for industry trailblazers.

Pros of Solidus

  • More mature and actively maintained project with a larger community
  • Built on Ruby on Rails, offering a robust and scalable backend
  • Extensive documentation and better support resources

Cons of Solidus

  • Steeper learning curve for developers not familiar with Ruby on Rails
  • Less flexibility in frontend customization compared to Angular-based solutions
  • Potentially higher hosting costs due to Ruby on Rails infrastructure requirements

Code Comparison

Solidus (Ruby):

Spree::Config.configure do |config|
  config.allow_checkout_on_gateway_error = true
  config.default_country_id = 1
  config.max_level_in_taxons_menu = 2
end

Angularspree (TypeScript):

export const environment = {
  production: false,
  apiEndpoint: 'http://localhost:3000/',
  appName: 'AngularSpree',
  config: {
    header: {
      brand: {
        name: 'AngularSpree',
        logo: 'http://via.placeholder.com/350x150'
      }
    }
  }
};

The code snippets demonstrate configuration approaches in both projects. Solidus uses Ruby for backend configuration, while Angularspree utilizes TypeScript for frontend environment setup.

11,507

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.

Pros of Magento 2

  • Robust and feature-rich e-commerce platform with extensive customization options
  • Large community and ecosystem with numerous extensions and integrations
  • Enterprise-grade scalability and performance for large-scale online stores

Cons of Magento 2

  • Steeper learning curve and more complex setup compared to AngularSpree
  • Heavier resource requirements and potentially slower performance for smaller stores
  • More expensive to develop and maintain, especially for smaller businesses

Code Comparison

AngularSpree (TypeScript):

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
  // Component logic
}

Magento 2 (PHP):

<?php
namespace Vendor\Module\Block;

class ProductList extends \Magento\Framework\View\Element\Template
{
    public function getProductCollection()
    {
        // Retrieve and return product collection
    }
}

AngularSpree is a lightweight, Angular-based e-commerce solution, while Magento 2 is a comprehensive, PHP-based platform. AngularSpree offers a modern, single-page application experience with easier customization for developers familiar with Angular. Magento 2 provides a more complete out-of-the-box solution with advanced features but requires more resources and expertise to implement and maintain.

PrestaShop is the universal open-source software platform to build your e-commerce solution.

Pros of PrestaShop

  • More mature and feature-rich e-commerce platform with a larger community
  • Offers a wider range of built-in features and customization options
  • Supports multiple languages and currencies out of the box

Cons of PrestaShop

  • Steeper learning curve due to its complexity and extensive feature set
  • Can be slower and more resource-intensive compared to AngularSpree
  • Requires more maintenance and updates to keep the system secure and up-to-date

Code Comparison

PrestaShop (PHP):

<?php
class Product extends ObjectModel
{
    public $name;
    public $price;
    public $description;
    // ...
}

AngularSpree (TypeScript):

export class Product {
  id: number;
  name: string;
  price: number;
  description: string;
  // ...
}

PrestaShop uses a PHP-based object-oriented approach with an ObjectModel base class, while AngularSpree utilizes TypeScript classes for defining product structures. PrestaShop's approach is more tightly integrated with its database abstraction layer, whereas AngularSpree's model is more focused on frontend data representation.

Both repositories offer e-commerce solutions, but PrestaShop is a more comprehensive, standalone platform, while AngularSpree is an Angular-based frontend for existing e-commerce backends. The choice between them depends on specific project requirements and developer preferences.

ASP.NET Core eCommerce software. nopCommerce is a free and open-source shopping cart.

Pros of nopCommerce

  • More comprehensive e-commerce solution with a wider range of features
  • Larger community and better documentation
  • Built on ASP.NET Core, offering better performance and cross-platform support

Cons of nopCommerce

  • Steeper learning curve due to its complexity
  • Less flexibility for customization compared to AngularSpree
  • Requires more server resources to run efficiently

Code Comparison

nopCommerce (C#):

public class ProductController : BasePublicController
{
    public virtual IActionResult ProductDetails(int productId, int updatecartitemid = 0)
    {
        var product = _productService.GetProductById(productId);
        if (product == null || product.Deleted)
            return InvokeHttp404();
        // ... more code ...
    }
}

AngularSpree (TypeScript):

@Component({
  selector: 'app-product-detail-page',
  templateUrl: './product-detail-page.component.html',
  styleUrls: ['./product-detail-page.component.scss']
})
export class ProductDetailPageComponent implements OnInit {
  product$: Observable<Product>;
  constructor(private productService: ProductService) { }
  // ... more code ...
}

The code comparison shows that nopCommerce uses C# and follows a more traditional MVC pattern, while AngularSpree uses TypeScript and follows Angular's component-based architecture. nopCommerce's approach may be more familiar to developers with a background in server-side programming, while AngularSpree's approach is more aligned with modern front-end development practices.

A free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.

Pros of OpenCart

  • More mature and established e-commerce platform with a larger community
  • Extensive documentation and support resources available
  • Wide range of extensions and themes for customization

Cons of OpenCart

  • Older technology stack (PHP-based) compared to AngularSpree's modern Angular framework
  • Less flexible for creating custom, dynamic user interfaces
  • Potentially slower performance due to server-side rendering

Code Comparison

AngularSpree (TypeScript):

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
  products: Product[];

OpenCart (PHP):

<?php
class ControllerProductCategory extends Controller {
    public function index() {
        $this->load->model('catalog/category');
        $this->load->model('catalog/product');

AngularSpree uses a component-based architecture with TypeScript, allowing for more modular and maintainable code. OpenCart relies on traditional PHP controllers and models, which may be less flexible for complex front-end interactions.

AngularSpree offers a more modern development experience with its use of Angular, making it easier to create dynamic, single-page applications. However, OpenCart's established ecosystem and extensive documentation may be advantageous for developers familiar with PHP and traditional e-commerce platforms.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Aviacommerce logo

travis codecov inch-ci pivotal license

AngularSpree

AngularSpree is an Angular(15) e-commerce application.

It is a plug and play frontend application for AviaCommerce API built using Angular(15), Redux, Observables & ImmutableJs.

It is not limited to aviacommerce and can also be used with any e-commerce solution with an api interface. Such as spreecommerce, magento, opencart etc.

Important Note

AngularSpree is now a part of Aviacommerce Project. Further development of angularspree will happen in this repository only. Also, check the aviacommerce repo where this repository exists as a submodule.

Features

Please check the online demo here.

Features of this mobile appliction are:-

  1. Product List Page
  2. Product Detail Page
  3. Filters by Category, options, size etc
  4. Sort(New arrival, Price)
  5. Advanced searching and autocomplete with Elasticsearch
  6. Add/update to cart
  7. Notifications for order update notification, payment failure
  8. Chat with seller feature, messaging
  9. Payment methods(COD, Stripe, Payubiz, RazorPay and 29 others)

Admin has following features for sellers:-

  1. Add/update products/inventory.
  2. Manage orders
  3. Manage Categories/Taxonomies
  4. Support for Variants and Option Types, Option Sets
  5. Shipping settings/policy(free shipping, shipping rules)
  6. Promotions(coupons per user, total usage count)
  7. Manage Users(admin, user types)
  8. Taxation
  9. Send emails and notifications.

Quick Links

GitterContributingAPI Specs

This project is an open-source initiative by Aviabird Technologies under the Aviacommerce open-source project.

For any questions or suggestions send a mail to hello@aviabird.com or chat with the core-team on gitter.