Skip to content

Commit

Permalink
readme changes
Browse files Browse the repository at this point in the history
  • Loading branch information
lainercoder committed Jan 22, 2020
1 parent 574b1bf commit 930d8fb
Showing 1 changed file with 43 additions and 24 deletions.
67 changes: 43 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
# Kartify

#react #redux #reacthooks #ecommerce #greenfield #css #frontend

## Overview

A front-end React app redesigning a multi-component product page on a retail web portal.

## Table of Contents
_Need to add links_
* [Description](#description)
* [Installation](#running-the-project)
* [Usage](#usage)
* [Related Projects](#related-projects)
* [Team Members](#team-members)

- [Description](#description)
- [Installation](#running-the-project)
- [Usage](#usage)
- [Related Projects](#related-projects)
- [Team Members](#team-members)

## Description

The Kartify product page contains many components of a modern e-commerce product page, with the following sections:
* [Product Overview](#product-overview)
* [Related Products](#related-products)
* [My Outfit](#my-outfit)
* [Questions & Answers](#questions-&-answers)
* [Reviews](#reviews)

- [Product Overview](#product-overview)
- [Related Products](#related-products)
- [My Outfit](#my-outfit)
- [Questions & Answers](#questions-&-answers)
- [Reviews](#reviews)

![Kartify Product Page](https://user-images.githubusercontent.com/26628913/71313556-2a029b00-2432-11ea-8370-28f713f946b5.gif)

Per business requirements, the [product page was styled](#styling) both in light and dark themes.

### Product Overview

_Developed by [David Lam](https://github.com/davidlam296)_

This Product Overview section renders product information based on data receieved from an external API server.
Expand All @@ -36,6 +43,7 @@ The product's selected style 's default picture is displayed as the main image.
![image-gallery-demo](https://user-images.githubusercontent.com/52646652/72667572-f5740600-3a14-11ea-89fa-d6cb27c865f4.gif)

### Related Products

_Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_

![Related Products](https://user-images.githubusercontent.com/55328949/71314266-e7928b80-243c-11ea-8709-99085b36809d.gif)
Expand All @@ -51,17 +59,17 @@ Each chard has a 'compare' button in the top-right corner that will open a modal
Clicking anywhere else in the product card will redirect the user to the main page of that product.

### My Outfit

_Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_

![Save Outfit Local Storage](https://user-images.githubusercontent.com/55328949/71314017-4fdf6e00-2439-11ea-82dc-1c1a7abe6066.gif)

### Questions & Answers

_Developed by [Elaine Wong](https://github.com/lainermeister)_
![Lazy Loading](https://user-images.githubusercontent.com/26628913/71314038-8f0dbf00-2439-11ea-8244-c0f798006154.gif)



The Questions & Answers are rendered for specific products based on an external API GET request.
The Questions & Answers are rendered for specific products based on an external API GET request.

The first two questions & answers are displayed (sorted with Seller on top, then by helpfulness). Lazy loading functionality allows for "infinite scrolling" until a user gets to the end of the question list.

Expand All @@ -78,52 +86,63 @@ The "Add Answer" form allows for users to upload up to 5 images of the product.
![Questions & Answers GIF 2](https://user-images.githubusercontent.com/26628913/71314476-f8dd9700-2440-11ea-93dd-8d6e6b7e6146.gif)

### Reviews

_Developed by [Bryce Champaign](https://github.com/brycechampaign)_

### Styling

We built color swapping functionality to allow users to flip between light and dark themes. The theme is set by default to the user's preferred setting, but the user can toggle back and forth using the theme swapping toggle.

![Kartify-Light-and-Dark](https://user-images.githubusercontent.com/26628913/71299541-b6a34f80-2385-11ea-915b-f23e98c78ffd.gif)

We created a [gist](https://gist.github.com/lainermeister/041fb9530e8c5b0a5b025911e4125527) on how to add this functionality onto any React app.

## Running the Project

The project is [deployed](http://ec2-18-223-99-176.us-east-2.compute.amazonaws.com/products/1) on a free-tier AWS server.

In addition, it can be run locally using the following instructions.

### Installation

1. Download or clone this repository
2. Inside of the repository directory, run `npm install`

### Building

To build the files, run `npm build`.

### Environment Configuration

1. To specify which port the server will listen on, assign the desired port number to the `process.env.PORT` environment variable or create a `.env` file and assign the port number to the PORT variable there.
2. Create a file in the root directory named `.env`.
3. In the `.env` file, specify the port number & root.
4. Image uploads require an API key from Cloudinary. Sign up for a free account [here](https://cloudinary.com/) and obtain an name, API key, and secret.
Example:
Example:

```.env
PORT=YOUR_PORT_HERE
ROOT=http://127.0.0.1
CLOUD_NAME=YOUR_CLOUD_NAME_HERE
CLOUD_API_KEY=YOUR_CLOUD_API_KEY_HERE
CLOUD_API_SECRET=YOUR_CLOUD_API_SECRET
```

### Starting the server

To start the server, run `npm start`. Now, navigate to http://localhost:3000/products/1

## Usage
_Further details on how the project is meant to be used may be helpful. For a library or framework, this section would outline how to use the library within another project (see socket.io ). For a service that is meant to be used within a larger project architecture, instructions on how to integrate may be necessary (see node-statsD )._

## Related Projects
_Links to other repositories that are related to the current one. Are there partner projects? Is there a newer version of this project elsewhere?_
_Further details on how the project is meant to be used may be helpful. For a library or framework, this section would outline how to use the library within another project (see socket.io ). For a service that is meant to be used within a larger project architecture, instructions on how to integrate may be necessary (see node-statsD )._

## Team Members
* [David Lam](https://github.com/davidlam296)
* [Sebastian Coronel](https://github.com/scoronelhamilton)
* [Elaine Wong](https://github.com/lainermeister)
* [Bryce Champaign](https://github.com/brycechampaign)
## Related Projects

_Links to other repositories that are related to the current one. Are there partner projects? Is there a newer version of this project elsewhere?_

## Team Members

- [David Lam](https://github.com/davidlam296)
- [Sebastian Coronel](https://github.com/scoronelhamilton)
- [Elaine Wong](https://github.com/lainermeister)
- [Bryce Champaign](https://github.com/brycechampaign)

0 comments on commit 930d8fb

Please sign in to comment.