Ben's Bikes

This is a front end e-commerce web application built with React. Users can create an account, browse thru products, add items to a cart & checkout. It accesses a full CRUD API built with Ruby on Rails that follows RESTful convention.

Video Walkthru

Live Earls:

bens-bikes-frontend.vercel.app

bens-bikes-backend.herokuapp.com

Technologies Used

Front End:

• React.js
• JavaScript
• CSS Components
• JWT

Back End:

• Ruby on Rails
• PostgresQL
• JWT
• BCrypt

Features & Functions

Schemas

rails generate scaffold to create tables, models & controllers for Users, Items, CartItems, OrderItems & Orders

References:

• User has many orders & has many CartItems
• CartItems references a User & an Item
• Orders references a User & an OrderItem
• OrderItem belongs to an Order
• add foreign keys

Controllers

Users

• authenticates, logs in & signs up a user
• auto_login returns a User & its CartItems

Add (Multiple) Cart Items

• handle POST request from front end to /cartitems
• use .find_by to determine if a cart item with an item_id already exists
• if so, then update the quantity of that item by 1
• otherwise, create a new cart item with the params outlined in cartitem_params

Stripe Credit Card Payments

Configuring Stripe

• Create Stripe account to get API keys
• Create file stripe.rb in /config/initializers
  • Add API keys (stored as environmental variables)
• 
• Add Environmental variables
  • Create file called local_env.yml & add it to .gitignore
  • Store key/value pairs e.g. STRIPE_KEY: "api key"
• In application.rb add the following code before loading default config
• 

Create Stripe Payment

• Use the PaymentIntents module to create a new payment, passing the Stipe token from the request body
• 
• update order to include the charge
• 

Pagination

Create API endpoint that returns a count of the items in the inventory

• in routes.rb add route that runs the function 'count' when it recieves a get request from ".../items_count"
  

Write count function

• in items_controller.rb use method .count on Item model to return the total number of items in the inventory

Add 'will_paginate' to Gemfile

• 

Use 'will_paginate' in items index route to render a specific number of items per page

• in items_controller.rb index route use .paginate method, passing it as arguments the page number and the number of items per page to display

  

Activate User's Account w/ email

Add email (string) & activated (boolean) to user's model w/ migrations

Create AccountActivations controller

In routes.rb create named route for edit action

Create & Hash a unique activation token when creating a new user

• Add activation_digest (string) to user's model w/ migrations

• in models/user.rb convert a user's email to lowercase & make a new activation token before creating a new user

• in same file, under private create the above functions

Generate mailer for account_activation & password_reset

In application_mailer.rb change default email

In user_mailer.rb lookup user & send to its email address

In account_activation.html.erb pass as arguments the user's activation token & email to edit_account_activation_url()

Send the email w/ link to activate account using SendGrid

• Sign up for account on SendGrid

• In production.rb add the following configuration

• In users_controller.rb invoke account_activation() function & .deliver_now method

Write Edit action in account_activation_controller.rb

• Find user
• If there's a user, & it's not already activated, & the activation tokens match (see below), then update user.activated to true

• Match activation tokens, in models/users.rb:

Sources

Stripe

Setting up Stripe on Rails

Adding Email Verification with Rails

Contact

• LinkedIn
• Portfolio
• Tweet @BenMichaelJord1