Oney is a shopping web-app for handmade products. You can check out the web site by going to the link below.
🔥Browse selected items and categories on the home page🔥
🔥Navigate through a list of 250+ product categories🔥
🔥Search for items using the search bar🔥
🔥View specific items and read reviews!🔥
🔥Add or remove items from the shopping cart & checkout!🔥
Oney includes MVP functionality for the following features:
- Product listing
- Customers can add, edit, and delete their own products to the shop
- Customers can browse other users' product listings
- Product reviews
- Customers can leave product review
- Customers can edit or delete their own reviews
- Customers can read reviews left by other users
- Product / Category browser
- All products belong to one of 253 categories and sub-categories
- Customers can browse products within specific categories using the category browser
- Shopping car
- Customers can add or remove products to/from their shopping cart
- The shopping cart persists between visits
- Customers can check out their cart
- Search
- Users can search products by name and description
Detailed documentation with the database schema, back-end routes, front-end routes, user stores, and feature overview can be found in the wiki 🔥🔥🔥
The app is a combination of a Python back-end, wrapped over a relational database, and a React front-end.
- Database
- PostgresQL as the main (and only) data store
- SQLAlchemy for object mapping
- Alembic for easy migration management
- Back-end API (Python)
- Flask with assorted libraries such as WTForms
- Served with gunicorn from a Docker container
- Front-end client (JavaScript)
- UI is written in React using functional components
- Redux state management
import './ProductCard.css'
import { NavLink } from 'react-router-dom';
const ProductCard = ({id,price,images,title}) => {
let image = images[0]?.url_570xN
if (image) {
return (
<div className="prod">
<NavLink to={`/products/${id}`}>
<div className='product_card'>
<img className= 'productImage' src={image} alt="Product Photo"/>
<span className='productTitle'>{title}</span>
<span className='productPrice'>${price}</span>
</div>
</NavLink>
</div>
);
}
return null
};
export default ProductCard;
The app is seeded with mock data from this paper.