• Background
• Technologies
• Prerequisites
• Installation
• Demo & Features
• ER Diagram
• Improvement
• Resources
• Copyright
• Let's Connect!

• Bombastic is a mock e-commerce app inspired by the Bombas sock apparel brand.

• Bombas has a mission-driven, one purchased, one donated business model.

• Bombastic implements the Stripe API for mock credit card purchases.

• Bombastic was created in October and November of 2020 for my Flatiron School capstone project.

Bombastic Backend

• Ruby
• Rails
• Stripe API
• PostgreSQL
• BCrypt Gem
• Dotenv Gem
• JSON Web Tokens
• Active Model Serializers
• Cloudinary image storage

Bombastic Frontend: Repo

• React.js
• Redux.js
• Stripe API
• Semantic UI
• React Router
• CSS3 Styling
• React Stripe Checkout
• React Responsive Carousel

Click to expand - Ensure you have the latest versions of the following:

• Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Ruby

brew install Ruby

• Rails

gem install Rails

• Node.js

npm install -g npm

• PostgreSQL

brew install postgresql

• Google Chrome JSON formatter extension

Create Stripe account and retrieve Stripe API key.

• Stripe API Documentation
• Using Stripe API with React and Ruby

Click to expand - Backend Installation:

1. Git clone and cd into the folder.

git clone git@github.com:emjose/bombastic-b.git && cd bombastic-b

2. Retrieve your Stripe API key.

• Use the Secret, server-side API key.
• The Secret API key has a prefix of sk_test.

3. Create an .env file in the main project directory.

mkdir .env

4. Paste this variable in the .env file. Assign it the value of your Stripe Secret API key.

STRIPE_API_KEY = "paste your Secret API key between the quotes"

5. Install dependencies.

bundle install

6. Create Rails database, migrations, and seed data.

rails db:create
rails db:migrate
rails db:seed

7. Launch the Rails server. Best viewed on Chrome browser.

rails s -p 3000

8. On Chrome browser, view the JSON database locally at http://localhost:3000/items

Follow all Frontend Installation steps below.

Click to expand - Frontend Installation:

Bombastic Frontend Repo

Follow all Backend Installation steps above.

9. Git clone and cd into the folder.

git clone git@github.com:emjose/bombastic-f.git && cd bombastic-f

10. Retrieve your Stripe API key.

• Use the Publishable, client-side API key.
• The Publishable API key has a prefix of pk_test.

11. Create an .env file in the main project directory.

mkdir .env

12. Paste this variable in the .env file. Assign it the value of your Stripe Publishable API key.

REACT_APP_STRIPE_API_KEY = "paste your Publishable API key between the quotes"

13. Install dependencies.

npm install

14. Launch the React app.

npm start

15. Enter "y" if prompted to run on another port.

Would you like to run the app on another port instead? (Y/n)

Click for YouTube demo

GIF demo: Product page carousel

GIF demo: Reviewing and rating products

GIF demo: Modifying cart

GIF demo: Checkout and order history

^{© Lucid.app}

Entity-Relationship Diagram

^{© dbdiagram.io}

CartJoiner

class CartJoiner < ApplicationRecord
  belongs_to :cart
  belongs_to :item
end

Cart

class Cart < ApplicationRecord
  belongs_to :user
  has_many :cart_joiners, dependent: :destroy
  has_many :items, through: :cart_joiners
end

Item

class Item < ApplicationRecord
    has_many :reviews, dependent: :destroy
    has_many :users, through: :reviews
    has_many :cart_joiners, dependent: :destroy
    has_many :carts, through: :cart_joiners
    has_many :order_joiners, dependent: :destroy
    has_many :orders, through: :order_joiners
end

OrderJoiner

class OrderJoiner < ApplicationRecord
  belongs_to :order
  belongs_to :item
end

Order

class Order < ApplicationRecord
  belongs_to :user
  has_many :order_joiners, dependent: :destroy
  has_many :items, through: :order_joiners
end

Review

class Review < ApplicationRecord
  belongs_to :user
  belongs_to :item
end

User

class User < ApplicationRecord
    has_secure_password

    validates :username, uniqueness: true
    has_many :reviews, dependent: :destroy
    has_many :items, through: :reviews
    has_one :cart, dependent: :destroy
    has_many :orders, dependent: :destroy
    has_many :cart_joiners, through: :orders
end

Areas of improvement include:

• Enhancing my knowledge of Semantic UI.

• Implement full responsiveness for mobile and desktop users.

• Applying filters for color and category.

• Optimize web performance and accessibility.

• Converting all images to WebP format.

• Updating database to reflect Bombas's expanding apparel line.

• Debug disappearing products in main component after mock purchase.

• Possibly utilize a headless CMS to manage and scale a backend database.

• Determine successful hosting and deployment, as heroku is egregiously slow.

• Bombas

• NPM

• Lucid.app

• Adobe Fonts

• dbdiagram.io

• Google Fonts

• Screencastify

• Adobe Photoshop

• Collapsible Markdown

• My blog on how I created my Github READMEs

• This project is made for educational purposes only.

• Products and product images copyright of © Bombas. All Rights Reserved.