Started coding in June + How I did it - Authentification with email verification using MERN full Stack

Hello,

I started coding in June 2018, I spent a lot of time on courses (Udemy) and finally started developing for a personal project based on multiple repos on github and courses I took.

I just finished this authentication boilerplate with email verification and password reset features. It took me a lot of time and a lot of refactor to get to this point and I never asked for help or feedback.

Repo : GitHub - flaviuse/mern-authentication: MERN stack authentication boilerplate: password reset, email verification, server sessions, redux, typescript, hooks and docker for dev and prod. . (Star if you liked it, it will help me a lot)
Demo : https://mern-auth-client.herokuapp.com/ .

That’s why i’d love to have your feedback on the code. Do you think I can use it for a real startup project (it’s the reason why I started coding)?

The server and client are independent and need two different heroku apps to work.

Backend : I used Nodejs, express with sessions stored in mongoDB, authentification with passport local and bcrypt, Joi for input validation.

Frontend: React/Redux, Semantic UI and Bootstrap, Google Recaptcha, notification with toastify, SendGrid for emails and Joi for input validation. I should have done custom css but I haven’t taken the time to do it yet.

The improvements I thought of :

  • Coding test.
  • Custom CSS.
  • Type checking with proptype for react components.
  • Real Profile/ Home Page.

Give me feedback about anything you want ! My goal is professional grade app. :grinning:

Do you think I should try to get an internship right now to learn about professional programming or continue working on this project ? My goal is to have a website secure enough to launch a MVP for my startup.

EDIT : Edit: APP load only on root “/” can’t load from any other path. I think it’s the buildpack

EDIT 2 : Some email box block the emails from coming (gmail is working, hotmail don’t). If you don’t receive the email within 2 min try another email box.

EDIT 3: Someone asked me how I learned during that time :

I took some scientific programming in engineering school courses before going on web dev so I had basis. It helped me to understand. It may take longer if you start from scratch

can you share with me what classes you took?

COURSES I TOOK(NEVER PAID FULL PRICE ON THEM):
html css : https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/
JS: https://www.udemy.com/modern-javascript/
Node : https://www.udemy.com/nodejs-master-class/
React : Mastering React 16
Redux: ui.dev | JavaScript, but fun.
YOUTUBE
GITHUB

A lot of youtubes videos, if you want to do a feature first check if there is a youtube tutorial. But do not start by watching it. Take the code on github and try to understand what’s going on. Use documentation from dependencies each time you don’t understand something and you will start to have a better understanding.
General coding videos on boilerplates/how to organise projects code …

I like to search for projects on github, google and articles that use the features I want to implement, it will inspire you. Just check if they are not outdated.

Search for a complex project you want to made that will drive you to learn, if you don’t have a goal it will be very difficult.

And your general schedule for learning code and what you spent more time learning ?

I started with the udemy courses and it really depends on the individual. The first months it was very difficult because there is a ton of new things to learn. I was quickly tired because our brain doesn’t like to learn new things. The more I knew, the easier it was for me to spend time coding.

I’m in a gap year so I’m lucky not to have a constraining schedule, I can’t give accurate advise on this. But the most efficient way is to transform code into an habit. (Read the book : The Power of habits)

Do not try to force yourself to code 4 hours a day every day if you feel you are forcing yourself to do so. Prefer shorter durations at the beginning but code a little more every day. Then 4 hours a day seems fine to me. Today I can code 6 hours a day before I feel really intellectually tired.

For me following tutorials was easy, because you can follow them without really thinking about what you are doing. Don’t do that, try to really understand what you are doing.

AND MOST IMPORTANT BE CURIOUS !

3 Likes

The link to the demo gives me 404.

I fixed it, was a buildpack problem with heroku (will add to the repo later) by adding a static.json with :
{ "root": "build/", "clean_urls": false, "routes": { "/**": "index.html" } }

I gave it a try.

I really like the timed notifications on the side and the bar that shows how long they will last. It looks really smooth and cool. I also like the validation messages in the register screen.

“Did not received our email ?” sounds a bit weird. Maybe “Have not” instead of “Did not”, and there is a space between the ? and the end of the words.

Also, I have not received the email. I clicked the link to send it again, and checked my spam folder. (nevermind, it appeared after a few minutes.)

Once I activated the account it said my user name does not exist when I went to log in. Maybe I just have to wait longer?

1 Like

Thank you for the feedback :smiley: I will fix the message of the “resend link” :slight_smile: I use the free plan on Heroku that’s probably why it’s so slow on API calls. (I got verified accounts in the database so it must be working but with delay).

same here (user not found after registration), just tested it. The notifications are really fast and smooth , I Like it!

Okey guys I checked it and the call to the backend when confirming the user was not using an async function. I “awaited” it and it’s seems to be working, you can now login instantly after confirmation. Tell me if you still get the error :slight_smile:

 this.props.dispatch(attemptGetConfirmation(token));

to

await this.props.dispatch(attemptGetConfirmation(token));

Edit: repo updated with all the fixes

1 Like

Everything seems to be working fine , except it talke a while to login ( new users may think something went wrong) maybe you should sent one of those notifications saying for example :“it may take a while before new users can login”
Also I would suggest you put notifications that concern the input fields right below them IMO this is better for user experience.

1 Like

The server is in the UK are you in the US? Because on my computer it’s pretty fast(200ms), I don’t know why it’s slow for you :confused: How much time it takes to receive to the login call on your computer?
EDIT: I will put a clean loading bar between the navbar and the page
timelogin

For the notifications you mean like this ? I did it for input validation but not for the errors given by the api call, you’re right that will be better that way, I’ll try to add that feature:
Capture%20du%202018-12-12%2012-50-16

Yeah that is what i mean for (input validations)
about the app itself I don’t know but Registration took 6s to respond back.
I’m in Russia by the way

Yeah must be server distance/performance, I will add the loading bar to get visual feedback. Thanks a lot for all your feedbacks :slight_smile:

Glad it helped.
Out of curiosity, is it a real project or just for training ?

Yes it’s part of a real project, I haven’t made much progress on the rest in frontend so I don’t have much to show yet. I hope it’s secure , but I don’t have enough experience to know that.

I can definetively help on ui/ux and the mern stack (even if i have not much experience) You can always pin me , I’'le be glad to help :slight_smile:

1 Like

Very thorough response on Edit 3 :smile: Thanks so much for taking the time to write it! Many thanks and best of luck. I’d be interested to know when you launch your startup!

1 Like

Thank you :slight_smile: For the startup it’s going to take a little while longer haha
I will push soon push all the custom css and UX design I did for the boilerplate.

I just pushed the project with the new UX/UI (semantic UI + CSS modules).
I added the possibility to run the project on localhost. Updated the github repo to make it more attractive.

The only thing I didn’t achieve is the loading bar with redux :confused: and had some problem of responsiveness on small screens with some semantic ui components but for a boilerplate it’s ok.
I feel that the boilerplate is finished now (maybe one day I’ll add some testing).
@Yaovi any feedback ? :slight_smile:

EDIT: Responsiveness has been fixed. Everything is OK now.

Well done! This a very pleasant interface with greater user experience, bravo!!!

1 Like

Last changes have been pushed, I will not update more for the moment. Thanks for all the feedback. If you have any question pm me.