/foodApp_Frontend

A food ecommerce web application adapted from the EatFit.in concept.

Primary LanguageJavaScript

Meal Plans delivery website -> EatFit clone

pages

  • Home : ❓
    • Majorly Static
    • Top 3 Plans
    • Top 3 reviews
  • User
    • Login Page
    • Signup Page
    • Forget Password
    • ResetPassword Page
    • Profile Page
      • user details : Email ,Name,img
      • Booked Plans ❓
  • Plans❓
    • All Plans
    • Plan Details
      • Discreption of the plan
      • Buy Now Button
      • Reviews
  • Rest api , Improving response

Backend Architecture: MVC architecture , REST API

Database : MongoDb,Mongoose

Authentication : Json web token

3rd party :

    * Payment GateWay:RazorPay
    * Email:  nodemailer,gmail

Testing : Postman

Frontend : React, Backend : Express

Deployment :

* Backend :Heroku 
* Frontend : Netlify
* Codebase : Github
* Database server : MongoDB Atlas
  • Futher improvement : videos, feedback ,meal level

9/aug/2022

  • How to send automated Email via nodejs -> nodemailer

    • email : html and css -> inline , modern css doesnot work in email
    • mail send -> nodemailer, transport -> gmail

      • 1st step : gmail app -> app id ,apppasword

        • go to your google account ->
        • go to signing in-> enable 2 factor authentication
        • App_password -> generate new app password

      • template -> string form html

      • node mailer use -> send the mail

  • Integrate our frontend to our backend ->

    • postman vs frontend
    • request button-> request || ui button press -> request + loader
    • response you will get || response you will -> then you have do some change on ui
    • React code explain (except->home, plans,planDetails)
      • Step -1 add backend url as proxy to react package.json
      • Step- 2 structuring
        • Top : Header -> Home,plan,login/ user profile
        • Different Pages
          • signup page, profile,login ,forgetpassword
      • AuthProvider:
        • sync -> if you have a user or not on login and logout
        • It also exposes you lossley coupled auth functions -> all the are together
      • Signup Page: completed
      • Login Page : Completed

11/aug/2022

  • login , signup (backend frontend)->bugs -> status code addition
  • Profile Page -> ui -> backend -> ui link
  • Forget password and reset Password -> ui

21/aug/2022

  • Rectifying status code error ->axios ✔
  • Adding Plans to your backend :(skeleteon code)
  1. We are using mvc architecture
    1. api level -> main sub-route with your router
    2. create a planRouter -> remaining route & associating controller fns
    3. create controller functions ->
      1. get,update,delete,
      2. create getall
    4. create model -> db schema
  • you first fill your model -> controller -> router
  • Usage : send data to a particular and following your schema
  • Plans Schema : name,duration,price:discount
  • All Plans Page creation
  • deployment

22/aug/2022

  • To be added later :
  • TO add review feature
    • create reviewModel :
      • desc,rating,createdAt,
      • userId with ref to userModel and planId with ref to PlanModel
    • update PlanModel with two new properties
      • array of reviews : which review are done for your plan
      • averageRating :
    • implementaiton:
      • create review
        • review send all the above entries
        • review's id is added to that plan for quick access
        • average rating of that plan is also updated with the help of current rating
      • get review
        • Find -> populate your planId and userId to get data about them

4th/sep/22

  • Deployment
  • Bought plan + integration razorpay-> fall back route
  • HomePage completion

Deployment

  • Backend: (Heroku)
    • Implement cors : package cors
    • convert your code to work with both process.env ans secrets.js
      • put process.env.[private data key ] || require("../secrets)[private data]
      • Remove static port number : process.env.PORT || 3000
    • rewrite start script in package.json -> scripts:{"start":"node api.js"}
    • push the code to github
    • heroku
      • -> signup -> create new app
      • set Env variables
        • go to setting -> click on reveal config vars
        • enter all the secret key value pair
      • -> go to deploy
      • -> Connect to a github repo -> enable automatic deploy->deploy branch
  • Frontend : netlify
    • code : add full links when making api request to backend
    • Netlify : * signup -> click on add new site -> import an existing project * authorize github -> choose your repo
    • deploy : warnings are converted to errors to prevent that * in next popup -> in build command put : CI=false npm run build

Issues

  • Home Page,PlanDetails,reviews,Bookings : Dynamic version,
  • Config data hiding
  • Security : Theory : integrate
    • Presisting Login -> JWT and maybe will be local storage