About the Portfolio Project: E-Commerce Website II category

Hi there,

I just signed up for an account on your ecommerce website and I am very impressed with how professional it is. I was able to add items to my cart and update my customer profile successfully. I didn’t go through with the transaction, but I was impressed that your transaction page correctly identified that I had entered an invalid postcode.

Well done :slight_smile:

Hi Chris,

Thank you for the feedback, I’m glad you enjoyed my project. I used the Validator.js library on the back-end to make sure phone, postal code, birth date and e-mail inputs are valid. It offers extensive input validation and sanitization. By the way you could go through with the order, the payment information is only illustrative and the application is not integrated to a payment provider.

As for your project, I can see that you put your heart into it and I liked how much functionality you were able to implement, especially with the Stripe integration and wishlist. I’m sure you learned a lot and you should be proud of this achievement.

Cheers!

Hello everyone!
after few weeks I finally got the first complete “working” version of my fullstack e-commerce project…
There’s still lot of improvement to do: design, missing features, small bugs here and there… But I just tested and it works from registration to checkout and order history :slightly_smiling_face:

Would love it if some could review my code and give me some feedback. To know more in general way like structure, libraries, error handling logic and so on what could be improved before I move to the more details fixing part.

All feedbacks appreciated!

if you wanna test it locally you have to enter the following command in root in order to listen for stripe webhook to get payment confirmation:
stripe listen --forward-to localhost:5000/webhook/stripe

Wonder if someone might be able to help me with this issue. My project is just about done but I am unable to test if the features work when logged in.
The problem I found after many hours of trying, is that the cookie with the session is not being set in the browser. Even with the right settings, I found that the browsers I tried with (safari, chrome and Firefox) won’t set a cross site cookie unless the server uses HTTPS. (Front and Back running locally for development). I have also double checked that the session cookie is being sent by using Postman, and it all checks out. Ive tried just about everything to get the browser to store the cookie but haven’t had any luck.
Basically I am able to log in correctly using passport, the session is generated and sent to the browser in a cookie, but then if I use any protected routes I can’t because of the lack of a cookie in the browser.
How can I get around this problem? Hopefully someone can point me in the right direction.

Thank you!

1 Like

Hi Everyone,

It has been a really fun but challenging project, as a matter of fact I did two versions of the app because i was struggling with the authentication process and i decided to start all over again, well i find Sequelize, Passport JWT, and RTK Query very helpful, here’s the v1 version, there’s a loot of room to improve but i’m very happy with the result.

Github Ecommerce

Hi @aherna100 are you planning on uploading a live version of your app?

Hi @ori-bar I cannot view your live link due to cors issues.

@chrislarham Very cool site. I played around with most of it and it seemed to work. would be cool if you had a fake checkout system because I don’t want to enter real credit card info obviously. :wink:

One cool thing I figured out with node-postgress from my app is that when creating a new pool connection. You actually dont have to programmatically type in the db connections if you already have them in the .env file.

for example

const Pool = require('pg').Pool;

const devConfig = {
    user: process.env.PG_USER,
    password: process.env.PG_PASSWORD,
    host: process.env.PG_HOST,
    database: process.env.PG_DATABASE,
    port: process.env.PG_PORT
};

const proConfig = {
    connectionString: process.env.DATABASE_URL,
    ssl: {
        rejectUnauthorized: false,
    },
};

const pool = new Pool(process.env.NODE_ENV === 'production'? proConfig: devConfig);

module.exports = pool;

could just be

const Pool = require('pg').Pool;

const connectionString = process.env.CONNECTIONSTRING;
const pool = new Pool(connectionString);

module.exports = pool;

And if it cannot find the connection string in your production env, it will automatically default to your dev .env variables.
Pretty neat huh?

1 Like

I realise that you posted this back in March so you’re probably way past this, but if it’s any consolation I spent many hours trying to get sessions to work properly as well, both while developing locally and then when deploying (which required a different config,)

You can see the Passport.js and session configs that ended up working in my back-end index.js file if you’re interested: https://github.com/Cmastris/ecommerce-pern-app/blob/main/back-end/index.js

It basically took a lot of Googling/Stack Overflow and plain ol’ trial and error after deploying (commit after commit as that naturally can’t be tested locally… :sweat_smile: )

My project is finally complete!

The styling is fairly basic but I’m pretty proud of the functionality and generally overcoming a lot of challenges (the main ones being Passport.js auth/sessions and checkout functionality integrated with Stripe). I ultimately managed to meet all of the requirements and deploy it. Took somewhere around 100 hours in total I think, partly due to getting stuck a few times but mainly just because even a fake ecom site invovles quite a bit of work! (Who would’ve guessed?) :sweat_smile:

GitHub: GitHub - Cmastris/ecommerce-pern-app: A Codecademy independent practice project: build a PERN (PostgreSQL, Express, React, Node) app with basic ecommerce functionality.
Live: https://ecommerce-pern-app-z9pn.onrender.com/

I already have a huge list of potential improvements that I’ll probably never get around to, but please let me know if there are any significant bugs. FYI the free hosting by Render takes a while to spin up, so you’ll probably have to wait/refresh a few times before it loads (not my fault, except for being cheap :wink:)

1 Like

hi,
I’m currently doing the ecommerce project, and am quite close to finishing but just wanted to ask how you got https to work for your site?

I didn’t have to do anything specific, it was just HTTPS by default when I deployed with Render :slight_smile:

is your database also on render?

Yep! (DB, back-end/API, and front-end are all deployed via Render.) You can find the docs here: PostgreSQL | Render Docs

This was a big challenge but I have finally depolyed my completed Ecommerce Store Project

On the frontend here it is

Frontend Store
Frontend Code repo

Would love your feedback I have also made the admin pages you can see a snippet of it in the screenshot of in my Github repository Markdown. I used Next.js because SEO was important to me and deployed the frontend to Vercel as my membership had ended. Therefore, was not aware that the criteria asked us to deploy to Render.

As for the backend I done in it in the previous project the one called Ecommerce Rest-API here it is

Backend Swagger Page
Backend Code Repo

Would love hear your feedback on my Project which are divided into two.

Hello There,

I can finally say I’ve completed the client side. It was honestly really hard from development to deployment. I took help online and I learnt from it. This project took me almost a month to complete from backend to frontend.

The transition from http (development) to https (production) was quite a headache until I read thru some of the docs on how to do it.

Here are the links:
Backend Repo

Frontend Repo
Live Site

I know the pricing of the products are way off. I’ll change those later but for now its all about the functionality.
I would love to hear your feedback, it’d be a great help. :grin:

1 Like

Alo! This was a huge project, almost a month to complete it but it was completly worth it.
This project clears many topics along the full stack path and it also provides a real and complete vision of how everything connects in a real app.

If I could give any advice to anyone starting this project is to REALLY REALLY start by designing it. I chose the code first option to make the project faster, according to the past me I already had a kinda structure of how to do it, but soon I started regreting it due that many things did not work as expected and it was because the way I was implementing each part could not interact with the rest easily and had to implement more logic, and all of that significantly slowed down my progress. Additionally, I would strongly recommend asking for advice of how to structure the project (project pattern) which is normally the firt big problem when starting. If possible ask for the experiences of others due that for some it is easier to make this project with a Model View Controller pattern but for others not, and with those experiences you can get an idea of what kind of pattern would work for you. In my case I opted for a kinda microservice pattern. At the end is your choise but the most important thing is that you feel comfortable in that pattern, due that depending on that will determine how the deployment process will be.

Hope this has helped.

My E-commerce website name is SellyEvi, a kinda word play of sell and silly. An E-commerce for selling Sily Things Since The Eve.
My app was deployed in Render.

Live app: SellyEvi
Repo: GitHub

Would love to hear your feedback!

Please give me your feedback, thank you