Ecommerce MERN stack done

[NielsDom]

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

[sorinr]

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.

[sorinr]

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.

[Gigusek]

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: http://prntscr.com/laqkwz

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

[NielsDom]

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

[Pranav50]

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.

[iiio2]

good job. nice project

[NielsDom]

Hi, yeah here is the repo:

NielsDom/ecommerce-react

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): https://github.com/NielsDom/React-sound-app
(I just tried, not working, maybe api changed)

If you need my help tell me

[Trent-mack-williams]

was there any tutorial that helped build this

[CareLife]

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

[andrescaroc]

@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!

[andrescaroc]

@NielsDom

The interviewer did not believe I did the project by myself because the code was not very bad and also because I did not commit on this repo since beginning (so it is very important to commit to prove your work…)

Nice tip!

@NielsDom

You should focus since beginning on best practices architectures

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.

@NielsDom

Avoid recruiting agencies and HR, speak to the boss directly. If you can show that you get the sh*t done to the boss, you have high chances to get recruited.

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

@NielsDom

About react, do not spend too much time on redux. You should now use React hooks, and with react hooks you cannot apply same classic architecture (actions, reducers folders…) Stay simple: put all your states in containers without redux, then later use useReducer + context…

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

@NielsDom

Be 100% focus on code all day long if you want to improve fast, eat, sleep eat, sh*t code 24h/24h (even today, if I don’t code at evening I feel frustrated, maybe I still got the pressure from 2 years ago haha). If you do not learning new stuff every day it is bad

100% true for me too

@NielsDom

You can show me your project when you finish if you want my code review. But believe me you will not finish before 3 months

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!

[NielsDom]

@andrescaroc

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.

Container folder with stateful components, component folder with stateless.

@andrescaroc

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

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.

@andrescaroc

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

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%

[fsociety00]

@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

[NielsDom]

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

[fsociety00]

Oh…
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?

@NielsDom

You can show your project if you want

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

young-mesa-38921[.]herokuapp[.]com/
(remove square brackets)

[NielsDom]

I built an admin page where you can update your products:
https://demo-react-eco2.herokuapp.com/admin

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.

[Osiris]

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

[Osiris]

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

[NielsDom]

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