Achraf-Elh22 / whats-app

Home Page:https://whats-appfgh.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TODO:

information's:

  • link to the Db model design link

Front-End

  • Sign up page
    • Build the Sign up page "Mobile version"
    • Country code Input
    • build a validator for email
    • build a validator for password
      • At least one digit [0-9]
      • At least one lowercase character [a-z]
      • At least one uppercase character [A-Z]
      • At least 8 characters in length
    • Add password show toggle
    • Build the Sign up page "Desktop version"
  • Log In Page
  • remove the duplicated code in css
  • Build the verify User page
  • Build the new password page
    • "Mobile version"
    • "Desktop version"
    • validate the new and confirm password using js
  • Build the Contact page
    • "Mobile version"
    • "Desktop version"
  • Build the Contact page Messages side
    • "Mobile version"
    • "Desktop version"
  • [ ]
  • [ ]
  • Add animation to pages
    • search icon in contact page
    • add favicon like in the real whatsapp
    • [ ]
  • implement parcel html and css and js
  • Build the validators of:
    • intl-tel-input
    • Sign up
    • Login
    • Verify
    • reset password
    • add the email and password validator
  • Refactors js files to be server from nodejs server
  • implement the error and success flags popup
  • Build the Intro
  • implement local storage
  • Performance
  • Accessibility

Back-End

  • implement the basic structure of express app

  • Set up the mongodb DB

  • Build User Model "basic version"

  • refactor the pages to pug

    • sign up page
    • login page
    • Verify
    • reset password
  • Build the view controller:

    • sign up
    • Login
  • Build the logic of API:

    • sign up

      • Get Data
      • validate the Data
      • check if the user is already exist
      • Encrypt information's
      • save User
      • POST the user data from form
      • Send him to the next stage "Verify"
      • Generate Otp and Build the logic behind it
      • Check the OTP
      • send the otp from the front end
      • Send OTP in SMS
      • Protect the verify view
      • Build the error page
      • remove the token from session and replace it with simple property of time
      • Implement the time still for the otp in back and front end
      • implement the feature of send the otp in email if his phone isn't near him
      • Finish building verify process
      • Pass the User to Stage 3
      • Build the Stage 3 UI "Create Profile"
      • Build the over layout to show the user his contact (ui)
      • Protect the profile route and get the username, photo and description
      • implement the functionality to upload profile image (multer)
      • optimize the picture with (sharp)
      • Save the User Information in Db and destroy session
      • Send welcome email to the user via Email
      • Sign in the User using passport js and protect the contact route
      • redirect the user every time accessing the sign up process (/sign up, /verify, /profile)
      • implement the Create profile api with the UI
      • implement flash in the UI
    • Login

      • local strategy
      • login in with:
        • google
        • facebook
        • instagram
    • Contact:

      • Build the UI
      • Refactor to Pug
      • build the import-dev-data for development purposes ( import fake users to db)
      • Create functionality to handle and deliver the init data need for the user when they enter the /Contact route (utility function)
      • Build automation script for import Development data
      • Build automation script for push the project to repository data inspired from https://github.com/franciscop/happy/
      • show all init data coming from the /contact route a show them in Ui
      • Sort the contact by the time of lastMsg
      • add functionality of search of users
      • Enhance the performance of Db (read this article => https://itnext.io/performance-tips-for-mongodb-mongoose-190732a5d382)
    • show the flags in Ui

    • Build error handle controller and handle the message show to the user in more user friendly messages

    • Security

      • cookies
    • Compare the validation in backend with frontend

    • Performance

  • copyrights

Error to fix

  • fix the bug in profile middleware

Errors To handle

  • Mongo DB Errors

TODO: Learning version

  • know more about Parcel and @babel/polyfill
  • know more about how to create perfect model in mongodb
  • Pug
  • Handle Errors
  • Passport js
  • Learn jquery
  • connect-flash
  • learn more about Production best practices: performance and reliability
  • session best practices session best practices

About

https://whats-appfgh.vercel.app


Languages

Language:JavaScript 93.9%Language:Pug 2.5%Language:HTML 2.4%Language:CSS 1.2%