#react #redux #reacthooks #ecommerce #greenfield #css #frontend
A front-end React app redesigning a multi-component product page on a retail web portal.
The Kartify product page contains many components of a modern e-commerce product page, with the following sections:
Per business requirements, the product page was styled both in light and dark themes.
Developed by David Lam
This Product Overview section renders product information based on data receieved from an external API server.
Basic product information is displayed, including: product name, description, features, rating and product styles.
Dynamic producet information is displayed based on selected product style, including style name, price, size and quantity. Selecting a different style will dynamically render the changed data.
The product's selected style 's default picture is displayed as the main image. A gallery interface will allow the user to view all other images of that style. The selected image is indicated with a bottom border. The main image can be selected by using the left and right buttons or by clicking on the thumbnail of the image gallery. An expanded view of the image can be seen by clicking on the main image.
Developed by Sebastian Coronel
This section shows a lis of products related to the main product. The ids of the products to show are determined server-side, but additional HTTP requests are required to get the information, cover image, and price of each related product.
The products are displayed in a finite carousel. If there are more than five related products, the user will be able to navigate the carousel by clicking the 'next' button. Once the last product in the carousel is diplayed, the arrow will disappear.
Each chard has a 'compare' button in the top-right corner that will open a modal that displays the features of the main product and the clicked product. The common features are shown in the same line to make comparison easier.
Clicking anywhere else in the product card will redirect the user to the main page of that product.
Developed by Sebastian Coronel
Developed by Elaine Wong
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.
Users can mark questions & answers as "helpful" as well as "reporting" answers, and all these actions send PUT requests to the API.
Additionally, users can enter 3 or more characters to search for questions by keyword.
Users can add questions to specific product pages, and answers to specific questions, both which sends POST requests to the API. The "Add Question" and "Add Answer" forms conditionally render off the same components that validate upon submission.
The "Add Answer" form allows for users to upload up to 5 images of the product. This sends images to the Cloudinary API, which returns a list of URLs that we send to the external API when storing answers.
Developed by Bryce Champaign
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.
We created a gist on how to add this functionality onto any React app.
The project is deployed on a free-tier AWS server.
In addition, it can be run locally using the following instructions.
- Download or clone this repository
- Inside of the repository directory, run
npm install
To build the files, run npm build.
- To specify which port the server will listen on, assign the desired port number to the
process.env.PORTenvironment variable or create a.envfile and assign the port number to the PORT variable there. - Create a file in the root directory named
.env. - In the
.envfile, specify the port number & root. - Image uploads require an API key from Cloudinary. Sign up for a free account here and obtain an name, API key, and secret. Example:
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_SECRETTo start the server, run npm start. Now, navigate to http://localhost:3000/products/1
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 ).
Links to other repositories that are related to the current one. Are there partner projects? Is there a newer version of this project elsewhere?