About the Portfolio Project: E-Commerce Website II category

The E-Commerce Website II Project

Welcome to the subcategory for the E-Commerce Website II Project. This portfolio project can be found in the following courses or paths:

  • Full Stack Engineer Path

How to Get Feedback on your Project

Congratulations on finishing your portfolio project! Now you’ll want to follow these steps to get feedback on it.

  1. Post a link to your git repository :slight_smile:
  2. Give us a few sentences about your experience. Was this fun? Difficult? How long did it take?
  3. Check back in—if someone has replied to your post, come see what they have to say.

How to Give Feedback on Another Learner’s Project

Reviewing someone else’s code isn’t just a nice thing to do; it’s also a great opportunity to sharpen your skills by viewing a different perspective.

  1. Refer to the article in your Career Path on How to Review Someone Else’s Code
  2. Click through topics in this subcategory to view other submissions of this project.
  3. Reply to a thread with feedback, encouragement, or letting them know if they did something in a way you hadn’t thought of before!
2 Likes

No one has completed this project yet?

  1. Github link: https://github.com/dhatGuy/PERN-Store and Demo link: https://pern-store.netlify.app

  2. I spent so much time(about one week) on how to structure the database because I was confused about how to connect with the frontend. Also took a while to figure out how to implement the cart and order logic.
    Working on the frontend was easier for me compared to the backend.

Though I’m still working on it, I have implemented the most important features.
I added some features also which includes

  1. Reviews

  2. Signup email

Features to implement

  1. Sign in with Google

  2. Add seller role

  3. Integrate stripe payment

  4. Forgot password and reset the password (In progress)

2 Likes

Many people probably don’t go till this level . Sad :pensive:

Great work on being first to complete this! The task was not easy and it requires skills in many different areas. I have not started on it yet but it is great to be able to see some of the tools you choose. One small idea for improvement would be to make functionality so that items can be added to shopping cart before creating an account. But I realize that it would add some complexity to the cart logic…

Yes, I have thought of it before and I’m aware how complex it will be. I don’t really have an idea how to implement it yet. Maybe by creating a temporary table💭. I’ll make research how to.
If possible also, guests will be able to make purchase without creating an account.

I have seen some suggestions to use localStorage or cookie first for anonymous users and then sync this cart with database once users log in… For example here:
https://stackoverflow.com/questions/2827764/ecommerceshopping-cartwhere-should-i-store-shopping-cart-data-in-session-or

1 Like

Hi everyone!

I really enjoyed this challenge, and I think I learned a lot, I would like you to share your opinions with me if you want.

Please take a look at my e-commerce app in github: Postres de la abuela
Note: if you want to see the live version take a look at the readme.md file and click the link in the setup section

1 Like

Hi! I think it would be a good idea to add English language support. It would make it easier to navigate the app for many on here. Google translate does an ok job but not the same as native language support…

Its very important to know that Google translate its not working as well as expected with my app. Thank you very much!!

Hi! Your app looks really good, I like the shadow, the proportions and the font. I think the app would be easier to navigate if the logo was also a link to the home page. :ok_hand:

1 Like

This was a big challenge but finally got it deployed. Here is the link:
https://treasurespace.netlify.app/

Github repo: https://github.com/mikejoh12/e-commerce
API Docs: https://e-market-api.herokuapp.com/api-docs/

It took 2 months (part-time) and some of the bigger challenges were: database-schema design, structuring the Express code into controller/service/db-layers, managing the JWT authentication, Google OAuth/Stripe-integrations, and handling the cart logic in different scenarios (logged out vs logged in). Think about which Express routes your front-end will need and consider only designing those. I created CRUD routes for pretty much all the tables which was a bit of unnecessary work unless also designing an admin-site. I debated going with AuthO for the authentication and it probably would have been a bit easier since the docs seem great. With passport it was a lot of looking around for info outside of the docs but it was a learning process. Ended up using Redux and it’s probably a good fit for the project. If using Redux, the redux-persist library was really helpful for storing the shopping-cart in localStorage before a user logs in and the database can be used.

Todo: Password reset, user-account-edit, e-mail notifications, tests, optimize images, create welcome/category-page.

Appreciate any feedback!

2 Likes

Hi [mike7127143742]! was playing around the magic you’ve done trying to run it on my local machine but keep getting " Problem connecting with the server. Please try to refresh the page". Please I want to know where your database connection actually happens. Your help will mean a lot as I’m new to this and curiously trying to figure things out. Thank you and waiting for your reply.

I am getting this warning at the console:

Failed to load resource: the server responded with a status of 404 (Not Found) :3000/api/products:1
You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. :v3:1

You will need to create a file called .env in the server directory (if you did not do this already). It needs to hold several environmental variables that are used to set up the configuration and these will be used when running it locally. When deployed, these same environmental variables will be configured in heroku. There should be a readme in the gitrepo with the required contents of the .env but here they are (I have changed/erased the passwords):

DB_USER=web_app_user
DB_PASSWORD=database_password
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=e_commerce

GOOGLE_CLIENT_ID=google_client_id
GOOGLE_CLIENT_SECRET=google_client_secret

STRIPE_KEY=stripe_test_key

JWT_KEY=your_jwt_key

NODE_ENV=development
PORT=5000

Replace these passwords/variable names with your actual ones. To start the project you can then either start the 2 scripts (in client and server directories) separately. Or you can use the script called dev (npm run dev) in the client directory if you have concurrently installed globally (will start them both). A database also needs to be configured and running in the background. Please let me know if this works as I have been busy working on some other stuff lately but curious if instructions work for it.

Please should the values in the environment variables be in a string or should I leave them like that? I’ve started the postgres server and started the npm both seperately but it only loads the contents in the Nav and Footer but cannot load data from the database. Now I have the .env file containing the environment variables in the server directory but still the front end is not getting connected to the database Can you help me figure out what is possibly wrong?
Thank you very much.

This is what i see when i run npm start

The values in the .env file do not need to be in quotation marks. But you should change them to match your settings. For example, change database_password to your password. Errors with the server will show up in the terminal. Do you have any errors in the terminal output? Also, are there any other errors in the browser console? Also, make sure to run npm install in both client and server directories if you didn’t do so already.

Please can you edit your environment variables and zip and send me the one working on your local machine right now to me so that I’ll just connect to my database with my own variables directly. I really want to get the whole concept of this project of yours. This is my email: ansahadeabaj45@gmail.com I appreciate your response a lot. Thank you.

Ok. I can edit the private information out (client IDs and secrets) and send you the .env file. This file needs to be placed in the /server directory. I won’t worry about zipping it since it’s just one text-file. The terminal should have some text output including the line “Server listening on Port 5000” when the server is running. Make sure that this is present in the terminal and no errors are showing.

Thank you very much. Will get back to you when things are working.

console log




At first if i tried running with npm, it gave me “index.html file not found” so i changed the file structure by removing folders and files in the /client directory and placing the /public and /src in the e-commerce parent dir. [ e-commerce/public] & [e-commerce/src]. before it could run and gave me the errors I’ve sent you. This means I only did the “npm install” in the /server and the root directory. I deleted the client folder because i left it empty.

I am assuming the problem to be coming from my server since it cannot load the resource when it runs. I didn’t start the server and did npm start and still got these same errors which means the problem is from my server. I am still figuring out from the server side. will get back to you when things are okay. Thank you a lot

I will send you a personal msg to discuss a bit more and hopefully we can get this working.