elhoussine / stocky

This full-stack, single-page e-commerce marketplace app inspired by StockX. Enables trading of authentic sneakers, clothes, accessories, NFTs, and more.

Welcome to StockY, this full-stack, single-page app inspired by the popular e-commerce marketplace StockX. Enables trading of authentic sneakers, clothes, accessories, NFTs, and more. It allows users to create an account or sign in, list/remove products under their profile and upload images, also add, update or remove items from their shopping cart, as well as search for products.

Features

- List Items for Sale

Logged-in users can create and list new items for sale under their profile, items could be sneakers, clothes, accessories, NFTs plus more. Users will be then able to view or delete their listing products.
Shoppers can see listed products, see each product's details and make a transaction.

- Add Items to the Cart

Users are able to add/remove products to the shopping cart, update item quantity, and checkout.
The cart is stored in the Redux state and in local storage to persist it across a page refresh. In case the website refreshes, the cart data will be loaded from the client's local storage.

- Search for Products

The search bar will filter and render products based on the keywords that are typed into the search input.

Technologies used

• Ruby on Rails
• React.js
• Redux
• JavaScript
• SCSS / CSS
• HTML
• PostgreSQL
• AWS S3

• Back End: Ruby on Rails, Jbuilder, Active Storage, and PostgreSQL database
  • The backend was implemented using the Rails MVC framework along with Jbuilder to formulate JSON responses for the API endpoints
  • Active Storage blobs were used to create associations between products and images stored on S3
• Front End: React.js, Redux
  • Supports front-end handling of the cart, rendering of pages, and navigation
  • The frontend routes conditionally render components based on the URL path and if a user is logged in
  • Persists cart to localStorage to maintain cart information through a page refresh
• Other: Amazon AWS S3, JavaScript
  • AWS S3 handles user image uploads for products reducing server load, fast loading app, and scalability of image services
  • Webpack was used for bundling and Babel.js for transpiling
• Hosting: StockY is hosted on heroku.

Bugs

When navigating inside this app, to a different component, it is keeping the scroll position from the last navigation. So it won't scroll to top automatically.
To solve this problem, I have implemented a ScrollToTop component that will scroll the window up on every navigation :

class ScrollToTop extends Component {
   componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
         window.scrollTo(0, 0)
      }
   }

   render() {
      return this.props.children
   }
}

Then render it at the top of my app, but below Router as follows :

<Provider store={store}>
  <HashRouter>
    <ScrollToTop>
      <App />
    </ScrollToTop>
  </HashRouter>
</Provider>

Bonus Features

• Users/Buyers can bid on products
• Users can filter products by category
• Allow users to edit products that they have listed

Credit

• Images are property of StockX
• StockY does not sell any products or merchandise and is intended for display purposes only

stocky's Issues

DB Schema

Let's use the full word for integer and string as those are the actual data types in ruby.

DB Schema

Instead of having a table for cart, consider having a table for cartItems:

The cart would be the index of cartItems.
Each product in the cart would be a cartItem.

When clicking Add to Cart on a product, you would be creating an instance of CartItem with an specific quantity.

User Auth

User Auth

• Backend: DB, model, controller, views
• Redux Loop: ajax, actions, reducer
• Presentational Components
• Styling
  • Should look similar to real site
  • When errors are displayed, the form adjusts properly
• Smooth, bug free navigation
  • Login errors clears when switching from login form to sign up form (and vice-versa)
  • Errors should display for both /signup and/login.
• Adequate and appropriate seeds
  • Demo Login Works

Checklist ✔️

Wiki Page Home

• Is the first page you see upon entering the wiki
• Contains a welcome message
• Contains a link/placeholder for a link to the live page
• All links in the right sidebar should contain each wiki page and link to the correct page
• Correctly formatted
  • each wiki page is listed in bullet points
  • all links route the correct page

---

MVP List

• Should have 7 MVPs.
  • 3 of those are User Auth, Heroku, and Production README.
  • The other 4 are from the MVP List or they have clarified them with you
• Contains a description sentence of the app
• Includes two to three detailed bullets on functionality and presentation of feature
• At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
• Estimates how long it will take the code each MVP
• Correctly formatted
  • MVPs are listed in an ordered list
  • Each MVP is broken down into bullet points

---

Database Schema

• Contains correct datatypes
• Contains appropriate constraints/details
  • primary key
  • not null
  • unique
  • indexed
  • foreign key
• Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • foreign key and table name are lowercased, snake_cased and back_ticked
• Correctly formatted
  • schema is written in a table format
  • the table's name are lowercased, snake_cased and back_ticked
  • the table header column names are bolded
  • columns names are lowercased and snaked_cased and back_ticked

---

Sample State

• State shape is flat!
• State's keys are camelCased
• All keys within the values in the state are accessible in the schema
• Correctly formatted
  • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
  • Top level slices
    • entities
    • session
    • errors (here or in ui)
    • ui (if needed)
  • Should NOT have nested slices, aka comments inside of posts
    • Some info from other tables is ok, for instance:
      • the author username and imageurl for a post. basically any info that the user can't change
      • like count and a boolean on whether the user likes the post instead of a likes slice

---

Backend Routes

• Contains the following sections: HTML, API Endpoints(Backend)
• Each route has a description
• API Endpoint routes contains wildcard variables written in snake_case
• Routes does not contain superfluous routes
• Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
  • probably doesn't need a GET likes api endpoint because that info comes through the post show

---

Frontend Routes

• Frontend routes contains wildcard variables written in camelCase
• Correctly formatted
  • Routes are displayed with inline coding text (backticks)

DB Schema

What is product_listing sopposed to be for?
From looking at your Schema and MVPs it looks like product listing is just an index of products. However, you have a product_id in the DB Schema.

Please add a comment here to describe what it is.

If it is just the index of products, or the products that show in the list of the index of products. They are just part of your products table.

You would have a ProducIndexComponent that renders a list of ProductIndexItem and when you click on one you would send them to a ProductShow page. But they are all part of the product table.

Sample State

After updating the Product Listing (if needed), the Sample State will need an update.

MVP List

After updating the DB Schema (if required). The MVP 3 would just be Products and you would decribe the details of index page, show page, etc.