- React
- Node.js
- Redux
- React-Router
- Custom CSS
- Heroku
- MongoDB Atlas
- Mongoose
- Express
An eCommerce site built for my portfolio, part of the Strange Industries Network. The site is built on React using Node, built entirely from scratch. It uses extensive components and state management for full interactivity. Interaction with MongoDB API managed through async Redux actions.
+-- Header
+-- Footer
+-- Landing Page/Home Page
+-- Product Listings
| +-- Product Detail
| | +-- Description
| | +-- Photos
| | +-- Ratings & Comments
| | +-- Quantity selection
| | +-- Add to basket
| | +-- Add to wishlist
| `-- Pagination
+-- About Page
| +-- FAQ
| +-- Disclaimer
| +-- Returns
| `-- Delivery
Version logs for the project are below...
- Define display & body fonts
- Define color palette
- Mock up main page to display choices
- Transfer choices to
:root
- Mock up main page on Codepen
- Add sections menu skeleton
- Add submenu from Codepen
- Install react-router
- npm install
- import components
- wrap app
- wrap relevant switches
- replace internal links with components
- rearrange file structure as needed
- create seeds based on readme model
- create product list component
- dynamically render based on url
- split into seperate files
- Create Product Card component
- Style product cards
- Add components for cart/wish buttons
- Basic conditional rendering click functions
- Add buttons for list layout options
- Put layout in ProductList state
- swap out styling
- Add Mini Menu component to header
- Style
- Show/hide as required
- Add nav component to header
- Show/hide as required
- Refactor Landing Submenu component for reuse in header
- Reorganise files as needed
- Factor out components from new Nav
- Make section/colors object global
- About Page
- FAQ Page
- Delivery Page
- Returns Page
- Disclaimer Page
- install redux
- add to App.js,create store
- add basic rootReducer
- add actionCreators for add/remove
- import to HeaderButton
- pass as props to MiniBasketItem
- import actionCreators to ProductCard
- basic add to cart/wish
- conditional formatting
- advanced add/remove
- add page components
- change header buttons to links to above
- render ProductCards for lists
- custom styling for each
- viewport in head
- Header
- Main
- Hide Landing NavSection
- Footer
- Header NavSection
- MobileHeader Component
- Hide regular Header
- ProductCard
- Render relevant components based on window.innerWidth
- Create basic component
- Add SVGs for icons
- Show/hide DropUp form MobileMenu
- Refactor Cart & Wishlist to single component
- Change Router to pass prop to List for rendering
- Convert all color refs to root variables
- Remove unused/unneeded styling
- Link & Button resets
- Switch/Case rendering on types of product card
- Swap out NavSectionItem for Product Card & style
- Rough templates for each page with basic styling
- Expand Landing page to multiple sections
- Style odd/even sections
- Animate hover styling
- Contextual based on product type
- Factor out to Component
- Put landing content as seeds
- Stop blur effect from overflowing
- Change delivery from local state to redux store
- Add action, reducer to handle change
- Implement in Cart, change refs
- Change first column to blurb
- Remove unused css
- Checkout component skeleton
- Add styling
- React rendering for cart summary etc
- Pass form content to state
- Move getItems from cart & checkout etc to middleware
- destructure seeds exports to only import as needed
- move componentDidUpdate from HeaderButton/MobileMenu
- Rewrite HeaderButton to use same rendering logic as Carts
- Factor MiniCart out of HeaderButton
- put route matching in Products switch
- pass ID from switch to ProductDetail as hook via router
- template page to render details
- split reducers
- split actions
- split actionTypes
- add index compilers
- change file refs
- change mapStateToProps destructuring
- make proto component in prodDetail for button
- pass prodID
- add redux actions & state to proto
- add click handler from ProductCard
- add inCart from same
- change props
- switch from proto to main component
- remove now-unused code from ProductCard
- as above for Wish button
- Add newly functional buttons to ProductDetail
- Create alternate add to wish button for ProductDetail
- Add action/reducer/actionType for gridColumns
- Add Redux to ProductList
- Switch click handlers to Redux actions
- Remove old local state handling
- Expand cart action to handle quantity of id
- Expand reducer to add {id,qty} object to cart
- Modify remove reducer to search by id
- Modify middleware & inCart to search by id
- Add static defaultProp to ensure qty > 0
- Pass qty to onClick, reducer
- Show qty in carts
- Quantity in details page as state via hook
- Pass to addToCart
- Edit qty action,reducer,actionType
- Create EditQuantity component to handle quantity changes
- Render in Cart ProductCard
- Add function & button to ProductDetail (can't reuse, parent needs qty)
- Show/Hide when in cart
- redo edit function to pure edit
- add stock limit to seeds
- add max limit to quantity
- disable button + quantity if 0 in stock
- add subscriber to monitor store
- add middleware to import localStore
- Change wishlist to Productlist
- Change Productlist to handle wish list
- Remove unneeded code in Cart + rename
- Rename components
- Move isMobile to middleware for easier management
- split out getTotal from getItems
- getItem to retrieve single id
- Set max height
- Overflow to scroll
- Clean up pseudo & hover CSS
- Reorganise inline styling
- CSS styling, mainly reviews table & info rendering
- Change button animation
- Clean up AddToWish click handler
- Show/hide nav submenu via transform
- Simplify display of elements
- Fix responsive styling
- Summary styling
- Input field styling
- Add edit cart link
- link hover styling
- productList padding
- hide minicart from tablet down
- hide cart content if empty in mobilemenu
- Cart styling
- ProductDetail styling
- Swap section-stripe to pseudo
- Change animation to transition
- Tweak transition
- Change CSS classes to BEM naming
- Rearrange ProductCard css
- Add SVG from Codepen
- Style hover
- Tweak minicart styling to fit
- Change to fixed height
- Tweak card styling to accommodate longer titles
- Color ProductList header
- Add Star to review scores
- Move average to const
- Add fill prop on Star w/default
- Redesign reviews from Codepen
- remove inCart from stock limit (middleware, hacky)
- FAQ to button sections
- Show/hide on click
- Install react-helmet
- Import to App for defaults
- Replace any document.title with Helmet
- Add Social links
- Add newsletter signup
- Rearrange layout
- Responsive design
- Run all colors through accessibility contrase checker
- Change footer color for white contrast
- Change About link in navs for contrast using class
- Increase text shadow on LandingSections
- Add
<title>to all SVGs - Add
role=imgto all decorative SVGs - Hide decorative SVGs
- Add aria-label to icon-based links
- Ensure all inputs labelled
- Add aria-pressed & handler to FAQ + MobileMenu buttons
- Add sr-only alternatives to ratings
- Add focus to current hover styles
- Add focus/hover to MobileMenu icons, FAQ questions
- Create HeaderButtonContainer component
- Move all variables for rendering HeaderButton to parent
- Add shoudComponentUpdate to cut down rendering
- Reflect variable/props changes in HeaderButton & children
- Refactor animateIcon (To redo with React.ref())
- Add Hamburger from Codepen
- Replace old button with Hamburger
- Create MobileHeaderButton for icons
- Rework MobileHeaderButton styling
- Convert About components to functions
- Convert NavSection components to functions
- Convert Footer component to function
- Convert most Header components to functions
- Convert ProductCard component to function
- Convert App component to function
- Convert Cart component to function
- Convert Checkout component to function
- Convert MobileMenu component to function
- Convert ProductList component to function
- Install thunk & axios
- Add api call function service worker
- Add proxy to package.json
- Add Products Reducers, Actions files
- Add fetch & load functions to get all/category products
- UseEffect in ProductList
- Add pop by id to MiniCartItem
- Clear previous non-api functions
- this could be a lot better
- Move remove handler to MiniCartItem
- Pass full id/qty object to MiniCartItem
- Add price to Cart actions, reducer
- Include total in Redux Cart, handle through reducer
- Add price to AddToCart & props
- Build Wishlist component
- Populate list from ids using apiCall
- Modify fetchOneProduct to add to Products.search array
- Add Clear function to clear results of search on component unmount
- Add to Wishlist to replace apiCall
- API call to get category objects
- Change backend to sort response
- Swap static seeds in Nav
- Swap static seeds in MobileMenu
- Remove static seeds
- Add fatchProducts, filter & pass to sections
- Add 'featured' Products attribute
- Add getFeaturedProducts route & handler
- Edit fetchproducts to new route
- Add navProds to products store
- Catch fetchCategoryProducts("about")
- Add async API call to populate product detail
- Render on page
- Return blank detail page if no product found
- Create fetchDeliveries action
- Populate delivery options in 'other' reducer
- Update DEFAULT_STATE
- Add useEffect to populate cart items from reduxState
- Fetch delivery options & populate
<select>
- Remove seeds & set js
- Add population from Cart
- Change JSX to handle api data & include api fns in redux
- Include quantity to items via find fn hacky
- Refactor API population
- Add fetch actionType
- Add landingSection fetch action
- Add landingSection default state, fetch reducer
- Include in reducer index
- connect fetchLandingSections, sections to Landing
- Call if sections is empty
- Map sections to seperate const, splice in email cta
- Create emailRef hook in top App, pass to components
- Assign emailRef to email
inputin Footer - Swap DOM to Ref in Landing cta
- Remove seeds.js
- Remove seeds import & functions from middleware
- Remove any remaining imports of seeds in components
- Clear dependency errors
- Simplify wish redux state as array
- Rename "other" as "delivery"
- Add qty from cart to 'cart' type product cards
- Product type switched to id ref of Category in API
- Category.type to match Product.type
- Update var names in product actions to reflect changes
- Use product.type as needed
- Hide checkout link if cart empty
- Remove scale animation on cards
- Tweak CSS in ProductCard
- Change to full width
- Reposition image as offset
- Change hover to greyscale (redo with pseudo + opacity)
- Change pseudo hover to block (redo to fit text width)
- Move ::before to text to match text width
- Add flex to mobile
- Change mobile positioning, hide ::before
- Seperate links to own container & position
- refactor into HeaderButton
- Add mobile prop
- remove unused MobileHeaderButton
- Add reduce function to get total quantity of items
- Simplify shouldUpdate to allow quantity changes
- Add update total to EDIT_CART
- Add comments
- Ensure qty is number
- Fix updateCart in ProductDetail
- Class based dark/light/section coloring
- (Hacky, but needed to get around pseudo styling in React)
- Reduce section width & push to sides
- Further offset image
- Increase x offset on mobile
- Add section-links pseudo
- Make section-text pseudo full & translucent on mobile for contrast
- Add middleware function to calculate total qty, value
- Import to Cart reducer
- Refactor reducer to use function & clean up code
- Simplify components using cart as needed
- Remove minicart for now
- Remove border, overcomplex styling
- Refactor elements
- Refactor JS rendering
- Hide text until hover
- Recenter sections
- Reposition pseudos
- Remove any references in other components
- Move all files to seperate folder
- Add ref for buttons
- Use to add/remove
.updatedclass - Remove redundand middleware function
- Tweak update animation & pseudo
- Add animation for quantity mounting
- Refactor expansion handling
- Tweak styling
- Add static.json with proxy
- Add error handling through Redux store
- Add new Heroku project
- Add buildpack
- Add remote heroku branch & push
- Call categories as first API call to trigger rendering in App
- Catch API hang/empty store errors
- Add Loader component to cover API call time
- Display in App while awaiting API
- Change CTA link to scrollIntoView
- Create IntersectionObserver to watch for email field in view
- Focus email field when in view & disable after
- Change Header + MobileMenu to position: fixed
- Add calculated heights to
<main>and<footer>elements when needed - Change grid-rows at breakpoints
- Fatten up options
- Spread link over entire
<li>
- Create & render Loader component before initial API call
- Render at App level
- Create fullscreen option
- Conditionally catch errors in apiCall
- Add error status code to errors redux store
- Move nth-of-type stuff over to JS for flexibility of content
- Add alternate exp/min transition delays and transforms within JS style
- Change transition delay on .dropup to wait/anticipate animations
- Add big SVG animation for a bit more interest
- Reposition as
<main>element - Tidy up CSS
- Return using isLoading
- Install react-transition-group
- Wrap Loader in TransitionGriou, CSSTransition
- Remove unneeded API duplicate call
- Remove old one-time firing function
- Replace with eventListener for media query
- Move App local states to top of component
- Pass isLoading to useEffect
- ONLY call getCategories if loading
- Add basic Authfrom component with simple state
- Add route to App
- Add auth action
- Add currentUser reducer
- Pass Redux functions to Authform
- Add handleSubmit function
- Add User SVG
- Add User HeaderButton
- Tweak HeaderButton to hide totals etc on user
- Rewrite apiCall to handle message/status from api
- Handle this object in errors action/handler
- Show errors in Authfrom
- Add removeError cleanup function to Authform to clear errors
- Reformat message div - positon relative, work out header margin
- Change colouring, blends in with Nav
- Tweak elements
- Add styling
- Add to MobileMenu
- Logout button
- Cart
- Wishlist
- fill/unfill user icon
- pass isLoading from App to fetchCategories to set
- Tweak error checking for res data on apiCall
- Add fill prop to MobileMenu icons
- Remove fetchCategories from Mobilemenu
- Fix key assignment to proper element of dropups
- Refactor
.errorsas component - have removeError attached to history listener
- call ^ as cleanup fn to clear listener
- join local & api user lists on login
- clear all on logout
- update user on db with local wish/store on logout
- Add classes for background colors
- Add classes for left/right light/dark gradients
- Reassign block backgrounds as classes
- Pass index through LandingSection map for gradient direction
- Add classes to style pseudos
- Remove all button style variations
- Reset to a universal default style
- Add classes for button variation
- Add to components, pass as props if needed
- Handle exceptions
- Move "partials" out to individual folders
- Split ProductCard/Detail/List to individual folders
- Refactor Header & MobileHeader to single component
- Convert AddToCart to functional component
- Convert AddToWish to functional component
- Convert cart product cards to grid
- Reposition card elements
- Restyle as needed, in tandem with mobile view
- Refactor ProductCard CSS
- Add new route in api to return cats & featured prods in 1 call
- Create new action to handle new route
- Remove unneeded calls from components
- Install prop-types
- Import into components
- Add propTypes to supplied props
- Fix raised errors
- Put RegExs in middleware for props
- Import RegExs where needed
- Include in PropTypes
- Fix raised errors
- Add review handlers in API
- Populate reviews in getProduct
- Populate review authors
- Add basic ReviewForm component
- Add component path to Product
- Add link from ProductDetail to ReviewForm when logged in
- Add postReview action
- Add deleteReview action
- Add push/pop action+handlers to update Redux state
- Move Review to seperate component
- Hide post review link if review already left
- Create seperate ReviewForm to embed on ProductDetail page
- -Refactor both review forms
- -Style forms
- Edit route
- Move get route out of auth
- check if stock > 0 on login & cart component load
- pass to add wish & raise error if so
- Create new product/category route which accepts page num, page size
- Add redux action to new route which takes category, page num, page size
- ProductList needs startIndex, endIndex, pages, currentPage, totalPages
- LandingSection animation as CSSTransition
- ProductCard opacity CSSTransition
- Review semantic HTML inc. component refactoring (containers), details/summary(?)
- Change icons
- Pass fill style to add-to-wish instead of class? or would it remove transition?
- Class backgrounds in ProductCards
- Possible PC refactor of nav/default
- Destructure LandingSection data for PropTypes
- Full width productDetail buttons on mobile
- LandingSection
- Parallax scroll - fast images, slow section
- Loading animation - content from left, image fade from above
function setVars() {
let root = document.documentElement;
root.style.setProperty("--headerHeight", `${root.getElementById("header").height}px`);
}
let OoS = localStorage.reduxState = "{\"cart\":{\"cart\":[{\"id\":\"5ee7765e8265482fe01a5026\",\"qty\":1,\"price\":\"48\"}],\"total\":{\"qty\":1,\"val\":48}},\"wish\":[]}"
let Overstock = localStorage.reduxState = "{\"cart\":{\"cart\":[{\"id\":\"5ee7765e8265482fe01a501b\",\"qty\":10,\"price\":\"11\"}],\"total\":{\"qty\":8,\"val\":88}},\"wish\":[]}"