Eatsy
Eatsy is a shopping website for food. This was inspired by Etsy. It uses Rails/PostgreSQL backend with React.js and Redux on the frontend.
The project was built within a two-week timeframe. I do plan on continuing with the project and making improvements over time.
Features
- Secure frontend to backend user authentication using BCrypt.
- Users can create, edit, and see products/food that they have made.
- Users can make purchases to products/food and see their own shopping cart.
- Users can also search for products by their name.
- Products/food support images.
Sign In and Register
Search
Add to Cart
Shopping Cart
User's Profile
Editing A Product
// This will prevent people from hacking to the edit page. If they go to the product show page
// and add edit top of the website.
const ProtectedToOwner = ({ component: Component, path, loggedIn, isOwner, exact, redirectToModal }) => (
<Route
path={path}
exact={exact}
render={props => {
if (loggedIn && isOwner) {
return <Component {...props} />;
} else {
return <MustBeOwner />;
}
}}
/>
);Project Design
Eatsy was designed to be functional and appealing. Food items were chosen based off of images found through Unsplash. The focus was to make the site bug free so that you can see it
Technologies
Rails was chosen due to the short time frame. Because this project is a small-scale, I began building things in a relatively short time, so convenience and speed was prioritized over scalability. The chosen technologies (Heroku, Rails, etc) were determined to be adequate for the amount of material.
Frontend Redux states are set up in so that there were separate reducers and actions for products, users, errors, and shopping cart items. This would help normalize the state and with each action we see changes accordingly.
In addition to the included packages, Cloudinary was used to upload product images.
Additional Resources
Possible Future Features
In the future I would like to add:
- Comments/Reviews
- User is able to change their image
- Add Loading