https://github.com/mehradevesh2022/foodapp_frontend

A food ecommerce web application adapted from the EatFit.in concept.
https://github.com/mehradevesh2022/foodapp_frontend

booking login-system plans razorpay reactjs reviews signup

Last synced: 7 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mehradevesh2022/foodapp_frontend
• Owner: MehraDevesh2022
• Created: 2022-09-12T11:17:16.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-31T17:13:32.000Z (about 2 years ago)
• Last Synced: 2025-02-03T23:31:37.787Z (9 months ago)
• Topics: booking, login-system, plans, razorpay, reactjs, reviews, signup
• Language: JavaScript
• Homepage: https://food-app01.netlify.app/
• Size: 14.3 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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