Chaliced is a web application inspired by Grailed and was built using Express & React.
Chaliced gives users the ability to:
- Create an account & upload a profile image
- Log in and log out
- Test the application as a guest user
- List items they want to sell & upload product images
- Shop items to buy from other sellers
- Add items they want to their Favorites (Wishlist)
- As a buyer, leave reviews on a product for the seller
- Create, read, update, and delete products
- Create, read, update, and delete reviews
I will start by exploring possible database schemas using Dbdiagram.io. Once a final draft has been decided, I will implement said schema and create the models & migrations, as well as the seed data appropriate for this application.
In this phase, I will create all routes needed for the features I will implement and require user authorization in routes which should only pertain to the logged in user by making use of JWT's. I will also handle any validation errors within a POST or PUT requests using Express' validator.
Next I will begin setting up a React frontend that will employ the API's routes to handle client requests such as:
- Login, Signup, and Logout
- List, Read, Edit, and Delete Products
- Create, Read, Edit, and Delete Reviews
I will also manage the application's state by creating a Redux store, constructing the necessary reducers and actions to update & display the app's current state.
In this phase, I will create an app-wide navigation component with links that route to all components needed to successfuly sign up, log in/out, and perform CRUD actions on products, reviews, favorites, & orders. In this phase, I will also style said components to create a layout similar to Grailed.
[Functional Component List](link to components)
By this phase, create actions for products, reviews, favorites, & orders will be functioning and I will update user profile images and product creation to accept image file uploads from the client through AWS.
No empty Image! I've provided a default image using state on the frontend for all creations. If an image is not provided, the uploaded song/album will have a neat default.
// backend
let { name, description, size, price, userId, categoryId, imageUrl } = req.body;
if (req.files.imageUrl) {
imageUrl = await singlePublicFileUpload(req.files.imageUrl[0]);
}
const newProduct = await Product.create({
name,
description,
size,
price,
userId,
categoryId,
imageUrl
});
I will also add functionality to the search bar, allowing users to search for clothes by name.
Now, I will deploy the functioning application.
- Follows
- Payment
- Filter Clothes