Jungle

Table of Contents

1. About The Project
2. Setup
3. Database
4. Stripe Testing
5. Dependencies
6. Using Jungle
• Client Example
• Admin Example
7. Roadmap

About the project

A mini e-commerce application built with Rails 6.1 for purposes of learning rails. Implements secure user registration and login. Admin pages locked behind simple authentication allow admin to add products or categories.

Project uses stripe integration to process payments from the cart and then presents the user with an itemized list of their order.

(back to top)

Setup

1. Run bundle install to install dependencies
2. Create config/database.yml by copying config/database.example.yml
3. Create config/secrets.yml by copying config/secrets.example.yml
4. Run bin/rails db:reset to create, load and seed db
5. Create .env file based on .env.example
6. Sign up for a Stripe account
7. Put Stripe (test) keys into appropriate .env vars
8. Run npm run start-jungle to start the server

(back to top)

Database

If Rails is give you an error about authentication to the database, uncomment the user and password fields from config/database.yml in the development and test sections, and replace if necessary the user and password development to an existing database user.

(back to top)

Stripe Testing

Use Credit Card # 4111 1111 1111 1111 when testing checkout. This is a dummy credit card that will automatically be accepted and logged to your stripe dashboard.

More information in their docs: https://stripe.com/docs/testing#cards

Dependencies

• Rails 6.1 Rails Guide
• Bootstrap 5
• PostgreSQL 9.x
• Stripe
• Cypress 9.7.0
• Webpack-dev-server

(back to top)

Using Jungle

The following examples will show useage of the jungle project from the client perspective as well as admin specific tools.

Client Example

When a client first loads the page, they are presented with a homepage that lists the latest products, as well as a description of what jungle is all about.

The top bar shows all categories of plants. Including a mock "Pizza" plant category created by a creative admin. It also will show whether the client is currently logged in, an admin dropdown menu and access to a cart.

It also lists the latest products from the database.

When a client clicks on a category of product, a page is loaded and is populated with a list of all plants for that category. For example, this is what a user will see when they click on "Shrubs" in the top bar.

This would be the page if a user chooses to explore the rare "Pizza" plant category, as another example.

We can see that only a single plant is loaded in this case.

A user can also click on any product card to load a page with details of that plant.

When a user clicks on ADD on any product card, the product is added to their cart.

We can see that the cart has changed to now show that there is (1) item in the cart.

A user is then able to checkout. Clicking on the "Pay with card" button will allow a user to pay with their credit card using stripe. A developper will then use the provided stripe test card number to process the payment.

The user is then presented with an itemized order confirmation.

(back to top)

Admin Example

There is also an admin control panel that allows basic overview of all categories, number of products, etc. It also allows an admin to manage products, create new products and categories.

When a new category is created, a link in the top nav bar is automatically created.

When clicking on the admin secition, Jungle will ask for the admin User and password. Once logged in sucessfully, the admin can browse any admin page and make changes.

For example, an admin can click on the +New product button on the all products page. Here they are able to add a new product and select from a dropdown menu for which category it belongs in.

The admin can do the same for a new category, such as the delightful and ficticious Pizza category.

(back to top)

Testing

Testing uses cypress. To run cypress testing run:

bin/rails cypress:run

Testing files are located under cypress/integration.

(back to top)

Roadmap

• Email copy of receipt to client, on order completion
• Add user rating to products
• Increase cypress testing to include all new features and admin functions.
• (Stretch Goal) Create real world pizza plant

(back to top)