I am passionate about hardware and software engineering, particularly embedded systems, networking, the web, and cloud-native. I can effectively self-manage independent projects as well as collaborate as part of a team.
Previously, I worked as a software developer on an open-source internet observability platform known as Internet Health Report as part of Google Summer of Code. Before GSoC, I worked as a software engineering intern at a startup, where I solved optimization problems (in the logistics domain) for a period of 5 months.
For admin, there is an option to create a new product.
Here is the form when you click that "Create Product" button.
For the Image Src field, Freshbey uses ImgBB service. ImgBB is an image hosting service. You can host images and get direct links. If I want to add an image, I'll manually go to ImgBB and upload the image and I will get the direct link. I'll then paste that link into this "Img Src" field. After that when I click the "Update" button the data will be stored in the Database.
As you see this is a very hectic process. I don't want admins or editors to go to that ImgBB service to upload the product image. Create an image upload component so that we can directly upload the image from the local system. That image should directly store in the database.
We have the "Edit Product" option. Take care of the image upload there too.
If you have any queries feel free to reach out. Also, if you have any other solutions do let me know!
Is your feature request related to a problem? Please describe.
Freshbey's footer doesn't have enough information.
Describe the solution you'd like
Create a footer similar to the screenshot attached.
Describe alternatives you've considered No response
Additional context
Note: Image is taken from Flipkart
Take care that the footer should be responsive for smaller displays too. Reference the README file for styling libraries and themes used in this project.
Is your feature request related to a problem? Please describe.
As of now to order a product in Freshbey you can select a quantity in a sequence. For example, If you're going to order a Tomato you can select 1 kg, 2kg, and so on. But in reality, 90% of the customers won't buy more than 2kg. There's an unexpected behaviour here. If an admin updates the count in stock as 100 kg. The quantity input select component renders from 1kg to 100kg. This is shown in the below screenshot.
Describe the solution you'd like
Also, product selection is to be redefined. Currently, the products in Freshbey are vegetables so they're defined as Kg in the quantity input select dropdown. What if the product is a Refined oil? The denotation here is liters. Similarly, if the product is an egg of 6 pieces or 12 (eggs won't be sold as 1 or 2 in Freshbey as it affects the business) appropriate denotation should be rendered.
Take a look at his screenshot. This is taken from Big Basket.
Here for every product, you can find a dropdown with their respective weight. For example, the product carrot will only be sold for 250 g, 500 g, and 1kg. There is another field called Qty (quantity) where you can select how many you need. For example, if you need 3 packs of 250g then you can select 250 gm in the dropdown and you can enter 3 in the Qty input.
Similarly, for Onion, you can find 5 options in the dropdown.
Similarly, for Eggs, we have 2 options.
The conclusion is same functionality should be added in Freshbey. User should have an option to select only the defined grams or kilograms or items of a product. Also there should be a Qty field which is an integer to denote the quantity of the same product.
Some users prefer viewing the website in dark mode for better visibility . So can i contribute to this repository by adding a button which will help to switch between light and dark mode . can you assign it to me .
Sometimes, a customer may be interested in a product but decide to buy it later. Or a customer may find a product interesting and want to check that later for more details. A wishlist allows them to store a list of these products so that they can easily find them next time they visit your site.
If a user bought a product, the count should be reduced from the stock automatically. Till now there is no option like this. Come up with a solution that solves the problem as stated.
Typescript is very powerful. We can find some bugs while developing the project. And also it would be helpful to manage a large project.
With typed system it would be great to build the product.
Describe the bug
when we are in admin/productlist route, when we click on edit button and update a product then we will get again redirected to admin/productlist. Here starts the problem now when we want to edit any other product we will get an error Uncaught TypeError: Cannot read properties of undefined (reading 'name') at ProductEditScreen.js:47:1
To Reproduce
Steps to reproduce the behavior:
Go to admin/productlist
Click on edit button for one product
Edit details of that product
Click update button
It will get redirect again to admin/productlist
Now try to edit any product it will show a blank page
And if we open console we get this message Uncaught TypeError: Cannot read properties of undefined (reading 'name') at ProductEditScreen.js:47:1
Expected behavior
We should see an edit page of that particular product.
In the checkout process, there is no visual indication for the user which step they are in. It will be better if a progress bar or any kind of visual indication is added in the checkout process.
Here's the screenshot of the shipping page where no indication is there for the user,
The backend was hosted on Heroku. It seems that they have stopped the free tier. Suggest a free service provider so that the backend could be hosted on the web.
Describe the bug
On the order page if an admin orders a product, the status of payment and delivery is not updated when the "Mark as paid" button is clicked. The status is updated when the page is refreshed.
updation_bug.webm
To Reproduce
Steps to reproduce the behavior:
Login with the admin account (check the readme.md for the credentials)
Add a product to the cart
Click on the "Proceed to checkout" button on the cart page
Enter the address and select the payment option
Click on the "Mark as Paid" button
Refresh the page
See the payment status is updated
Click on the "Mark as Delivered" button
See the delivery status is updated
Expected behavior
The status message should be updated without refreshing the page.
Screenshots No Response
Desktop (please complete the following information): No Response
Smartphone (please complete the following information): No Response
Currently, clicking on "Login / Sign Up" redirects you to /login with this on the page:
But I don't think it makes any intuitive sense for a search box to be in the /login route.
I can see that the search box is being rendered in the Header.js component. Is there a specific reason as to why the search box is being rendered in that component and not, for example, in the HomeScreen.js component?
Is your feature request related to a problem? Please describe.
On the admin page, we have options to add a product and carousel. In a similar way, create an option to add a category.
Describe the solution you'd like
The category page in the admin route is already there. Add the said functionality to the page.
Note: Recently we have changed the image hosting to Cloudinary for the "admin/createproduct" route.
Describe alternatives you've considered No response
Additional context
Add any other context or screenshots about the feature request here. No response
Search is making request on every key stroke, and the api request is made later, so can implement debouncing to make it better. and when the search is cleared can be redirected back to the previous page state.
Is your feature request related to a problem? Please describe.
Create a sort option so that users can sort the products from low to high or high to low by price.
Describe the solution you'd like
Here is the sort option in amazon.in
Implement the same functionality in Freshbey. As of now we only need "low to high" and "high to low" by price options in the sort dropdown.
Describe alternatives you've considered No response
Render a message similar to this on the Freshbey cart page if the order was above Rs. 400.
else render a message stating that how much extra to add so that the order qualifies for free delivery.
Also, take care of the shipping charges on the place order page. If the user is eligible for free delivery, then the shipping charges should be 0 else the shipping will be Rs. 40.
Is your feature request related to a problem? Please describe.
Feature is not related to a problem, it is just something I'd like to see improved.
Currently, the profile screen info looks like this:
But having a form be displayed under the user profile can be confusing to the user.
Describe the solution you'd like
I would like to change it to something like this:
After clicking on 'Update User Info', it shows the form:
And after you've made changes to your profile and click "Update", it hides the form again:
Describe alternatives you've considered
This is just the first step to improving the UI of the profile screen. I'd like to make more improvements in the future.
Additional context
Add any other context or screenshots about the feature request here.
@roopeshsn I would like to be assigned to this as well.
Is your feature request related to a problem? Please describe.
Currently, the backend and frontend directories are coupled together. As you see, the package.json file belonging to the backend is in the root. I think separating them would be a good option for deploying them in the cloud and scaling in the future.
Also, It would be good if the changes were updated in the docs (README.md).
Freshbey is a self-hostable e-commerce application. Minimum coding experience is enough to host this application by anyone who wishes to create an e-commerce app. Everyone has their own branding and theme color for their e-commerce application. Up to now, there is no single file to update the branding and theme color.
Come up with a solution to update the branding and theme across the application using a single file.
Freshbey's primary color is #34a853. It is declared as a variable "--bs-green" in the index.css file. So we want this color to be referenced as primary all over the application. Be it has hover, focus, etc. we need these shades of color to be referenced. But in the input field, when focused, a shade of blue is shown. This behavior is shown below through a screenshot.
Change this focus color to be --bs-green for every input field.
Is your feature request related to a problem? Please describe.
User can send any thing to the backend and that unwanted data can be stored in the database.
Describe the solution you'd like
In order to prevent the unwanted data to get stored in the database we should be validating the data comming to the backend.
So we should be using Joi as a validation library to validate each request
Describe alternatives you've considered
We could also use custom validation but I thing it would be better to use Joi as it is popular and would be easy.
Hi @roopeshsn Team, I have just found out about this bug, that the Form is not validated properly.
The example I'm living in Canada and we have a Postal code a mix of AlphaNumeric characters.
So, If I enter the Postal Code say "R2M 0T8" and then I proceed to Place Order, it shows an error
Order validation failed: shippingAddress.pinCode: Cast to Number failed for value "R2M 0T7" (type string) at path "shippingAddress.pinCode"
you are actually using the Type of Postal Code in OrderModel as Number
and in Shipping Component you are using the same field as Text only. So this is not a proper validation.
If you will be using this for a country like India, where all Postal Codes are likely to be in NUMBER, then also we need to add the validation for NUMBER in Shipping FORM.
OR
If also for countries like Canada, then we need to add the Validations for TEXT as both in FORM as well as in Order Model
Solving this issue will enhance the User Experience
If you found this as a bug, pls let me assign this issue as Hactoberfest
Provide selected category header, Inside the category can add a sort and filter. Search inside category can only be related to category(search by category).
Latest stocks on demand can be one sort and can include all the available items in the category to the other tab.
I can work on these features
Is your feature request related to a problem? Please describe.
As of now in Freshbey users want to enter the address every time placing an order. To avoid a functionality should be made so that they'll ask to enter the address once and for future orders, the entered address will be used.
Describe the solution you'd like
Here's the address feature in amazon.in
The above screenshots are taken if a user is not signed in. Here are the screenshots if a user is signed in,
Note: The addresses were blurred due to privacy reasons.
I would like you to come up with a solution to implement the same feature in the Freshbey. Also, you need to take care of the address step on the shipping page.
The above screenshot is the shipping page. The application should skip this address step if the user has already given his address.
Here are the consolidated steps,
Implement the address button in the navbar (similar to amazon's button)
A modal should appear to ask to enter the address or pin code (take care of signed-in or not signed-in state)
If the user wishes to enter a new address the application should take him to a "addresses" page
On the "addresses" page, there should be an option to add a new address
Take care of the shipping page too as mentioned already
We need the same functionality implemented in amazon. So, go to amazon. in and take a look at how the functionality is implemented.
Describe alternatives you've considered
I would like you to come up with a solution to implement the address feature in the Freshbey. Incase if you have any queries feel free to reach out.
Additional context
Appropriate screenshots are attached.
As of now the backend and frontend are tied up together. I would like to separate them out so that hosting can be done without hassle. This will help in further scalability.
I have given my own credentials in env variables under "Getting Started - Project setup on your local machine" in the README file. Change those in order to set up those accounts by the developer itself.
Describe the bug
There is a bug in displaying number of total items in the cart.
Number of item is treated as a string, which results in string concatenation.
To Reproduce
Steps to reproduce the behavior:
Let's say add (Apple 1kg)
then add (Onion 1 kg)
Now if you add (Mushroom 2kg).
No. of items in the cart will show 22 instead of 4.
Expected behaviour
There should be increase in total item according to number of items added.
In the profile, there is a "My Orders" section. If a user has not bought anything there is a message below the table stating that "You haven't placed any order yet, Start Shopping!
As of now in Freshbey one can order items using COD and UPI. In both methods, the manual intervention is needed to update the status. In delivery status, there is only one of the two messages "Delivered" or "Not delivered" which are shown to the user.
Here's the order page.
The plan is to give more context about the delivery like where the product is right now when it will get to reach the customer something like that.
Imagine Freshbey has one or more stores in every city. It need not be a store. It can also be a warehouse. So once we get the location from the user, we'll map the nearest store or warehouse to deliver the products to the customer. Accordingly, the details will be shown to the customer as I stated above.
Is your feature request related to a problem? Please describe.
Whenever we enter a route which doesn't exists then the page is shows only navbar and search bar and remains blank below it.
Describe the solution you'd like
I think we need to tell user that the page they are referring doesn't exists.
So i would like to build 404 page which tells user that the page doesn't exists.
Describe alternatives you've considered
And i have an idea to show random recipes to the user on this 404 page.
Additional context
This is how it looks as of now when page doesn't exists -
The user information like email, password, token are saved in local storage which is vulnerable to user privacy. Come up with a solution to address this issue.
Is your feature request related to a problem? Please describe.
The passwords being stored are not hashed, this is a security concern while developing e-commerce websites.
Describe the solution you'd like
Before storing passwords we can hash it, alternatively before making the API request to backend we can hash the password then we can store it.
Describe alternatives you've considered
none.
Additional context
This will lead to breaking changes for existing users, we can either register every user again or we'll have to hash passwords already present in database.
Is your feature request related to a problem? Please describe.
It's frustrating to type whole category name while creating a product and if user misspells category then the product will not belong to expected category and it will not get shown to user unless they search with product name.
Describe the solution you'd like
Instead of manually typing the category name we can show available categories to the user and they can select one among them.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent