About the Portfolio Project: E-Commerce Website category

Hi all,

Me and Sironi just finished this project together. It took us around 11 days to complete it. While building this project we shared our knowledge and enjoyed creating our E-Commerce Website, even though we had struggled with some parts of it.

Hi I forked your project yesterday and could give you a feedback if you still wanting it :wink:

Hi, Iā€™d really appreciate it if you can give me feedback. If youā€™d like, I will happily give you feedback about your project too.

Your API is really good and nicely done. Swagger editor yaml file well documented. But there was a few issues that I came up with.

  1. A type mistake in db.sql carts table instead of ā€œquantityā€ it says ā€œquatityā€.

  2. I am not sure how you manage to make a checkout work on your side, because on mine it threw an error straight away.
    When calculating total_price you still have money signs in front, so it doesnt add numbers, it only adds them as if they were strings. Also date and time needed to be changed because I could not run checkout otherwise, kept throwing errors.
    This is how it looks on mine, just to make it work:
    #########################################

    async checkoutCart(){
    const cart = await pool.query(SELECT quantity, price::money::numeric::float8 as converted_price FROM carts JOIN products ON carts.product_id = products.id WHERE customer_id = ${this.schema.customerId});
    if(!cart.rows[0]) return ā€œPlease Initialize a cart or add products to your cartā€;
    let totalPrice = 0;

     for (let item of cart.rows){
         totalPrice+=item.converted_price * item.quantity};
     if( totalPrice === 0 || typeof(totalPrice)=='undefined' ) return "Please add items to your cart";
     if(this.schema.paymentMethod==="Credit card"){
         if(!validateCreditCard(this.schema.creditCardNumber)) {
             return "Please enter a valid credit card number";}
     };        
     await pool.query(`DELETE FROM carts WHERE customer_id=${this.schema.customerId}`);
     await pool.query(`INSERT INTO checked_out_carts (customer_id, total_price, date, time, payment_method) VALUES (${this.schema.customerId}, ${totalPrice}, '1991-11-22', '11:22:12', '${this.schema.paymentMethod}')`);
     return 'Successfully checked out! Thank you!';
    

    }

#########################################

Because we had to focus on creating api and practice on it, it is a very nicely done api!
If we had to focus on creating tables and api all together then, I would suggest to add a few more features. For instance reducing item quantity when a user purchases, as well as not deleting cart items and manage to still have them, so a user would be able to see what he or she exactly bought in their previous orders.
Other then that I have enjoyed reviewing your code, it was a great experience! :slight_smile:

Thank you so much for the feedback! :slightly_smiling_face:

I made a few changes based on what you suggested:

  1. I changed the data type of the price column in the products table to integer, such that when the total price is calculated at checkout, no complex data type changes need to be made.
  2. The query that handles inserting data into the checked_out_carts column now inserts real date and time stamps. (No more checkout errors).
  3. As for the ability of a user to see what he or she bought in their previous orders, thereā€™s a GET /user/history endpoint where a user can see all their past purchases.

Once again, thanks for the feedback. You helped me a lot.

Now, to your API. I read through it, and I really enjoyed. Your database is well designed, and you app is full of nice feature. Here are a few things that I suggest improving:

  1. Before inserting passwords into a database, you should encrypt or hash them (using a dependency such as bcrypt).
  2. In your Database directory, I suggest that you consider SoC (Separation of Concerns). You put your middleware, queries, and connection to the database in the same file. I suggest separating all three things into three different files.
  3. There are a few typos in you README, I suggest reading it over and fixing them (your readme is still very good and very descriptive).

Other than that, your API is very good and reading it was a great experience. Thanks!

1 Like

Thank you for your feedback, I will have a look at your suggestions, especially SoC! :slight_smile:
About this GET/user/history , it returns all their purchases with total amount and date, but a user would not be able to see what kind of items he bought that day. But like I said previously the key of this project was to practice building an API.

1 Like

Hi! Iā€™m looking for some feedback on an error I keep getting when I try to run my app.
Here is my projectā€™s repository.

I also posted my error question here and included relevant code.

My current error is about the register user route.
The error says: Route.post() requires a callback function but got a [object Undefined]

I have a feeling I have either a misspelling or a syntax error somewhere, but Iā€™ve looked through all the files connected to that route multiple times and canā€™t seem to find it. Any feedback would be appreciated. Thank you!

Link to Repo

This was honestly one of my hardest projects Iā€™ve ever done that gave me probably two or three headaches. The biggest of all was the API documentation using swagger-jsdoc. I just wish theyā€™d give more documentation on the latest version of it. I used openAPI 2.0 cause It had some issues with using openAPI 3.0.x.

And then the second thing which took me a while to get through and I knew I would have lack of knowledge and practice of was the configuration of passportjs. Then I had figure out how to authorize in a better way using JWT auth strategy which I gotta say was easy after going through this video. The reason being that passport locale strategy has a different way of authorizing through using view engines in contrast to passport JWT strategy which extracts from the header the Bearer token and authorizes it that way.

The API documentation part was a mess and Iā€™ll try my best to do some changes to it later on.

But after all is said and done, I loved this project and took away a lot from it, on what I have to learn and improve upon.

I had kept a deadline for myself to complete it within 2 weeks time and it took more than that, probably 2.5 weeks. For that is to say, Do not even think of completing this project in a fast pace. Let it take as much time as you need but also make sure you benefit from this project.

I hate the fact that I couldā€™nt get the documentation of the API to be better but this is my first project and I will do better next time.

Please give me some feedback. Feedback mostly on the API documentation using swagger-jsdoc and even on the handling of errors.

Also I want to give a big thanks to [@carokrny] for how she managed to finish the project.

Cheers,
Garrett

1 Like

Hello fellow coders!!

Sharing here with you my project for E-commerce API.
As some colleagues also commented here, this project took me much longer than I had imagined. And also at a certain point in the journey, I realized that I needed to take my time to finish, and delve deeper into understanding the concepts involved.

I looked for inspiration in the work of colleagues here, in the documentation of each library, and even in CodeCademyā€™s own solution code. And in the end, I believe I reached a solution with a creative approach, chosen by me as a solution to this challenge.

After much reflection, I realized the importance of understanding what an API is, and what it is not!
What its role should be in the application as a whole, which processes it should deal with and which should definitely not be part of its role.

I would love to ask for feedback from colleagues, and also to give feedback on other colleaguesā€™ projects. But I realized that for this type of implementation, the process of experimenting the solution is very laborious, as it is necessary to download, install, and how the tests themselves end up being a very manual process, making it difficult for us to take the time to try out each solution.

Anyway, here is the link to the repo, I hope itā€™s useful to anyone else, I tried to do it with great care:

Cheers,
Douglas

Hi,

So I am just getting through part 1 of this project. I have my end points tested, database created and linked up and I am starting to work through the controllers (I have the registration and products completed).

I have two questions. In the final project how are people managing images? Can you store images in SQL - I had a look online and this looked a little complicated.

Also - testing that the database is linked up correctly - what is the best way of doing this? I can only think of loading some data and making a call on the API?

I was also going to start working on my front end at the same time as I work on the back because I thought that will help make sure that I donā€™t end up changing how I want the backend to run later and having to re-do parts. Has anyone had any experience in that regard?

Many Thanks,
Kiernan

Hi,

Did anyone have any trouble using swagger to document their API? (guidance from codeacademy here: Swagger and NodeJS)

I could not get the $ psql -f yourfile.sql' command to run. It says that ā€œpsql: command not recognisedā€, I did some googling and found this: https://www.commandprompt.com/education/how-to-fix-psql-command-not-found-error-in-postgresql/

However I followed those steps and still get this issue. If anyone else found this and has a way round, I would appreciate any guidance. :slight_smile:

Many Thanks,
Kiernan

Hi, this is my live project: https://my-ecommerce-frontend-chi.vercel.app/

I have created a test account for those who donā€™t want to create their own:
email: [email protected]
password: userrr

I would like to have technical and aesthetic feedback, any criticism is welcome.

Thank you :slight_smile:,
Matteo

1 Like

Hi Matteo,

I think that you site looks really good. I have a quick question if that is ok? How did you handle the images? Did you store them, or links to them in Postgres or are they stored in the app and only additional details stored in Postgres? I am a little bit stuck on the best way forward, as I dont believe you can store the images themselves in Postgres?

Happy to have a quick call if that is best?

Thanks,
Kiernan

Hi, Kiernan

Thanks for visiting my project and for the compliment.
I created an array in Postgres with the name of each image for a product, e.g., [1rebook.webp, 2rebook.webp].
Then, from the frontend, I retrieved the image (which I placed in the public folder using Next.js)
e.g., <Image src={/uploads/${key.image_urls[0]}} width={180} height={300} alt={Image of ${key.categoria}}></Image>

I stored all the additional details in Postgres.

I donā€™t think itā€™s best practice, but I found it convenient to do it this way :joy:

If you have any other questions, let me know. Iā€™m going on vacation tomorrow, but Iā€™ll try to respond.

Thanks for getting back to me :slight_smile:

OK, so you have the image name stored in Postgres, the images themselves stored in the client side of the app (I have not used Next.js before to create an app, so if I have miss understood this let me know) then when you go to render, you get the image name from the json returned by Postgres and use this to grab the image from uploads folder?

I was thinking of saving the urlā€™s to the images that I grabbed from a Royalty free image site in Postgres, then using that to render an imageā€¦ Iā€™m worried that I have no control if those images are taken down or that it might affect load speeds as Iā€™ll also have no control how quick the 3rd part site responds.

I might switch to your idea (assuming I have understood it :slight_smile: ), because this way Ill have more control.

Thanks again,
Kiernan

Yes, exactly, you understood it well!
I understand your concern. From my research, it seems that each method has its own advantages and disadvantages.

In this Stack Overflow link, you can find someone who did it the same way I did:

Remember to send me the link to your project once itā€™s finished because Iā€™m curious :grinning:

Thanks,
Matteo

Hi, quick q. Where are people encrypting passwords for this project that the user enters. I had originally encrypted on the back end. But this means that un-encrypted passwords are sent over the server from the front to the back? Do I need to use bcrypt just on the front then to avoid thisā€¦ or both?