guillermoaviles/online-store-fe

Dealio Online Store Front End Deployed Site

Project 3 - Dealio - Online Store App (Front-end)

A online store app by Guillermo Aviles, Hiram Rodriguez, and Nghia (Nathan) Vo

Project Overview

The online store app would be the place where the users can freely buy any available items on the sites, sell an item by creating a new post, add a review/comment to an existing item. The app give the users the freedom to buy and sell without paying any fees or restrictions.

• This repository is the front-end respository for the app.
• The back-end is deployed on Heroku: here
• The front-end is deployed on Vercel: here
• The associated back-end repository can be found: here

Installation

1. Clone this repository to your labs folder and change directory into it.
2. Run npm i to download required dependencies.
3. Run npm start to run localhost

Deployment

The front-end of our application uses ReactJS as our library. The front-end follows the best practice in naming the components to be semantic. The front-end composes the following technologies/platforms:

Vercel:

Vercel is the most accessible platform to deploy websites. By connecting the ** your GitHub repository** to Vercel, you can simply deploy the main branch to Vercel domains — and it does all the heavy lifting for you. (Julian Wallis)

• Axios

Wireframes

Before

After

React Component Hierarchy

Before

After

MVP

• AAU, I want to be able to see a list of items that are available for sell.
• AAU, I want to be able to sell an item by create a new listing.
• AAU, I want to be able to update information on an item.
• AAU, I want to be able to buy the item and then the item wil be deleted.
• AAU, I want to be able to see a list of reviews of an item if it is available.
• AAU, I want to be able to add a review to an item.
• AAU, I want to be able to delete a comment.

Post MVP

• Create a more logical way to buy an item from the site.
• Add the drop file feature so users can upload picture directly from their phone or computer.
• Add a toggle for Light & Dark mode.
• Users are able to enter their personal information for shipping purposes.

Future features

• Added User Authentication.
• A smooth transaction from A to Z for users to purchase an item.

Project Management

The team followed the daily SCRUM protocols and met for a 5 to 10 minutes a day to discuss small wins, achievements, any blockers, unresolved issues, obstacles that we were encountering. We also met before the day end to discuss any working plans and small goals for the next days.As for the Git workflow, we follow the 'Feature Branch' method where we have the inital code set-up in the main branch. Everyone who is working will branch out to dev branch to work and push up the code accordingly. Guillermo, who is our Git Manager, then reviewed the latest code with the team to validate the code. He then will submit a pull request and merged that PR to the dev branch. Once our code met MVP, he then merge code to main branch for deployment to Heroku. The team was committed to collabrate creatively and equally. We tried to be mindful of that and divided the work so that everyone at least working on something on both backend and front end.

Issues & Resolutions

We were having an issue on submitting an comment and the request was not coming through. We tested the request with Postman and it worked as expected. So we narrowed it down to our codes. I looked over many times, added console.log to check every inputs were received correctly and still did not know why it did not work. Then I realized, in the axios call, I forgot the second argument in the code hence we were sending an empty body everytime. I realized that I skipped over the code because my brain assumed that the information was supposed to be there. But when you are reviewing someone's code, you have to read it carefully. DO NOT SKIP!

const addNewComment = async (e) => {
  try {
        e.preventDefault()
        const newlyCreatedCmt = await axios.post(`https://online-store.herokuapp.com/api/online-store/newComment/${commentId}`, newComment)
        navigate(`/description/${commentId}`)
  }
  catch(err){
    console.log(err)
  }
}

We did not have the newComment so we were sending an empty body to our API. The call worked after we added the newComment.

Resources:

• Markdown Cheatsheet
• Inline HTML
• Jullian Wallis - What Is VERCEL? Is It The Right Platform For Front-End Developers?
• Whimsical - Used for the Req-Res Diagram
• ESlint
• useEffect Hook missing dependencies
• Validate form before submit fix
• Only number in input field
• Drop File feature/package
• How to Create a Dark Mode Component in React