Ecommerce MERN stack done

// ------------------------------------------- Archived


Taking a first glance at the interface i noticed that your categories filter is displayed as a radio button instead as of a checkbox collection.

When I see this:
i expect to function like radio buttons. Think you have used the wrong display representation on page.
If you take out the p-round class from <div class="pretty p-default p-round p-smooth"> the checkboxes will look more natural.

Another thing in terms of UX is the breadcrumb navigation. When I am, lets say, here:

i expect to be able to click on polos and get back right to the polos category not to pass again through home.

Just checked a couple of things:

In the checkout:

  1. Make sure to validate the email, so far it passes as long as I finish with a dot, even if I don’t specify the domain extension, like “hello@hello.”
  2. Continuing as guest apparently works, but I still need to provide email before it’s clickable. I Imagine you shouldn’t have to?
  3. Validate the fields in the shipping, names shouldn’t have numbers, postal code and phone number shouldn’t have letters
  4. Implement some dummy payment system, like Stripe’s or Paypal’s sandbox, so it’s easy to test.
  5. Implement accounts and auth.
  6. Also, problem with showing prices in the order summary:

// I’m mentioning payments and auth because you said you’re learning MERN, but there doesn’t seem to be much back-end implemented.

thanks, nice. Yeah I am going to do the complete system in back end

Hello NielsDom, I saw your project and is really awesome. If you don’t mind can you share the code to me, as I would like to contribute changes in your project and add some enhancements.

1 Like

good job. nice project

1 Like

Hi, yeah here is the repo:

The website is running well. But the code is not very beautiful, as it is my first fullstack app.

Here is a cool small app that I made (I got my job thanks to this one):
(I just tried, not working, maybe api changed)

If you need my help tell me

was there any tutorial that helped build this

eCommerce? To be honest I don’t really like it. Because it’s hard to use it. For me at least

@NielsDom It has been four months since your post, I want to focus on e-commerce too, but I have only been learning react for three weeks.

How did your job search outcome?
What did recruiters tell you about your project?

Inspire us, please!

Nice tip!

Can you give me an example and where to check if I am using best practices? I tried to follow FCC for React, but I see on youtube there are other ways to structure components.

Any hint on how to do this for a remote position?

Thanks for the advice, this let me advance to the next topic.

100% true for me too

You are very kind man, I’ll contact you for that.

I just started the drum machine challenge (3rd project of Front-End libraries cert), and my goal is to advance and get full stack certification and skills as fast as possible, and then start coding the e-commerce app and others I have in mind.

What do you think on this approach?
Or do you think I must stop and build several Front-End apps before getting to node.js, express, mongoDb, etc?

Thanks for your comments and is very nice to see you have a job with a correct salary!

Container folder with stateful components, component folder with stateless.

I dont know, my writing skill and resume skills are not good, so my only chances I guess was to meet people. To do this, I have participated to tech meetups. It is like lottery, I talk to many people hoping someone would give me opportunity.

I didnt do any FCC projects, or finish any certification. Because I did not have enough time to do it, instead I directly start a ecommerce website and try to solves problems I encountered one by one. I used FCC for basic JS + forums for motivation, which was very helpful.

About drum project, seems to be fun. But in real life chances that you will do pure vanilla JS are low, and a drum machin even lower. Also, there are already many people on market who use vanilla daily on production, those who use jQuery (PHP developers I guess). I find DOM manipulation not pleasant, and React manage it for you automatically, so there is no reason for me to learn it.
And about advanced algorithms, there are plenty NPM packages to help you.

I would indeed start to learn node, express, mongoose (this ORM manage the mongoDB queries for you) + react, as it would be the technology you would use every day for few years.
My advice is to learn how to manipulate objects and arrays, map, filter and start a real life project, so that your boss could assimilate to one of his projects.

Maybe my learning advices are bad, but just believe on your convictions and go 100%

1 Like

@NielsDom great project!

I know I’m super late to this but I just finished a demo of my own Ecommerce app and after a few Google searches I ended up here hehe,
I was wondering how exactly is your client suppose to add/edit/delete products and all of that? I’m working on a dashboard that directly interacts with the Mongodb so I was wondering if you did one aswell


Cool, you can add/edit/delete on client state and update your database same time.
On my repo I was lazy, I think I just refreshed the browser when I sent requests to not deal with the state… so it would fetch data again from database, not good to do so.

You can show your project if you want :slight_smile:

First of all please excuse my english, it’s not my first language,

By client I meant the actual client, the person/company you are selling the ecommerce to, how are they gonna add/edit/delete new products after you “give” them the website. Do they have to call you each time they want to add new stuff or do you give them some sort of dashboard where they can do it themselves?

Yes I would love some feedback,
Since I’m from México the website is in spanish but you can always translate the page :slight_smile:

(remove square brackets)

I built an admin page where you can update your products:

But I don’t sell this, If I would have to do a ecommerce website I would just download a wordpress template. The purpose of this was to train and find a job.

Your website is very beautiful congrates. Recruiters will love it, I am sure.

What React UI libraries do you guys use in general? Or you build the whole CSS from scratch?

Have you ever tried Ionic? I heard that it s also good, it provides some nice UI elements as well.

Ionic is not for mobile? If I have to do an app I would use react native not ionic.