NOTES.txt

**************************************************************************************************
**************************************************************************************************
THIS FILE IS FOR MY UNDERSTANDING PURPOSE 
**************************************************************************************************
**************************************************************************************************

--> First setup node server and express js 
1) give npm init and change index.js to server.js 
2) install express js 
3) put server file in backend folder and import the express module 
4) no need to run the server with long command , change "scripts:start" tag of package.json to "nodemon backend/server.js"
    and run npm start


--> NAVBAR FOOTER LANDING_PAGE
--> Redux , React app (Frontend folder)
1) create react app 
2) Create navbar and Footer 
3) Create Landing Page


--> LINKS AND MAISCREEN COMPONENT
4) Start adding routes and links in landing page as well as navbar
5) create a mainscreen.js file (component )which will hold the title of each page 
6) now the main screen component is tested by adding it above to the mynotes page 


--> MYNOTES PAGE
7) now start creating the mynotes page ... create a button for adding notes 
8) bring data file which is in backend folder into the src folder of frontend folder, so that import can be done 
9 ) use the data file to create static notes by using Card component and iterating them to each note with styles.  
10 ) now when clicking edit button , it should link to that specific note in a new page 
11 ) when clicking delete button, onClick func occurs leading to delete habndler function to delete the note which can be 
    developed later 
12 ) Now add Accordion which is like a table drawer.Documentation is diffrent from Bootstrap V4.Some youtube commenter 
    gave the correct code to bring the design without any error.


-->CONNECTION BETWEEN BACKEND AND Frontend
1) install axios in frontend folder for the 'mynotes' screen
2) for backend connection , go to package file of frontend folder 
3) there insert "proxy":"http://127.0.0.1:5000", where 5000 is the port number for backend 
4) after inserting , restart the frontend server
5) in Mynotes page , bring UseEffect and useState hook. useEffect to run the fetchNotes func() after page render.
   useState to store the content fetched from the func() to the state variable .
   Fetch notes using axios form backend using the link  in the fetchNotes func().
6) we 1st hard coded the date needed to be seen in the screen by keeping a data folder inside thefrontedn folder .Now it is removed 
    since notes data will be received from the api call func().

7) from now on , u can run frontend and backend at a single terminal run . for that 
install " npm i concurrently "
8) change the package file in the common project folder" 
    scripts": {
    "start": "nodemon backend/server.js",
    "client": "npm start --prefix frontend",
    "dev":  " concurrently \"npm start\" \"npm run client\" "
    },
9) run command : npm run dev 


--> MONGODB with BACKEND
1) create a project and a cluster / database 
2 add user and password and IP address( network access )
3) npm i mongoose 
4) in env file , store the mongoose uri in it which u got it from mongodb website 
    create config folder in backend folder , create db.js file in config folder . config => db.js which is for mongoose usage 
5) make changes in server.js and db.js files (works properly if not in college wifi)


**************************************************************************************************
**************************************************************************************************

MOVING TO VERSION 2 :)
--> USER AUTENTICATION in React JS , Node, Express, MongoDB with JWT 
--> REGISTER AND LOGIN APIs

---> REGISTER API <---
1) create 3 folders in backend (controllers , routers, models)
2) create files in controllers ,routers, models 
3) to run only backend , npm start is enough 
4) use postman for chking theb backend if req.body is given and response is returned as POST to browser (http:localhost:5000/api/users)

--> procedure need to do in postman 
create a collection/folder 
create a new request in it 
enter the url ( base url can be set as environment variable )
now give the body content in json format in request tab
see result in response tab

5) install these => npm i bcryptjs express-async-handler jsonwebtoken 
6) encrypt and decrpyt password in userModal 
7) chk with database with new user for encrypted password and already available email .

8) middlewares are introduced to handle errors


--->LOGIN API <----
1) add route in userRoutes
2) in userController , add auth function
3) verify status using postman by adding user to database, chking if user logged in or not , invalid credentials errors

-> models       : it contains the schema of data which is for database ,( requires mongoose )
-> routers      : contains routes of which leads to call functions which are present in controllers , ( requires controllers )
-> controller   : it contains functions playing with requests and responses ,( requires models )
-> middlewares  : it contains error handling codes between requests and responses (converts html error code to normal error )

-->CREATE JSONWEBTOKEN (JWT)
1) create "utils" folder and create generateToken.js file 
2) this JWT token is used to authenticate user and share the credentials with encryption between servers and client

-->FRONTEND FOR LOGIN AND REGISTER PAGEs
1) add routes in App.js
2) add Login and Register page files in Screens folder 

**LOGIN PAGE**
1) add the title via <MAinScreen> tag 
2) create a form using the react bootstrap (search FORMS in react-bootstrap)
3) add functions and states 
4) complete the submithandler function and run both frnotend and backend at the same time (npm run dev)
    when doing this , backend fetches data from database and gives it to frontend 
5) adding Loading file and Error Message files in components of frontend
6) add the useEffect hook for local storage data to check it if it works well and put that in LANDING_PAGE


**REGISTER PAGE**
1) add the title via <MAinScreen> tag 
2) create a form by copying it from the Login page
    dont forget to edit the submit handler function and config paths
3) add functions and states 
4) complete the submithandler function and run both frontend and backend at the same time (npm run dev)
    when doing this , backend fetches data from database and gives it to frontend 
    submit handler checks for password and confirm password similarity and also for other errors in the database 
5) adding Loading file and Error Message files in components of frontend
6) profile photo adding functionality is the remaining task in register page 

7) for image uploading , create an account in Cloudinary which is used to store images and videos 
8) after account creation, settings > upload > enable unsigned uploading > add upload preset > enter project name 
        > change to unsigned mode > click save 
9) Go to dashboard and copy API key ( API environment variable > click more > API base url )
10) create the postDetails function which helps in storing the image in the cloud 

11) now create the logout function and also delete the local storage 
12) go to header file and change the action for logout 
13 ) add an onClick function to remove localstorage and direct to '/' homepage 



?-- PROBLEMS FACED --?
problem in uploading photo to the Cloudinary
logout works but not directing to homepage -> (rectified by changing the syntax of the Routes in App.js and using useNavigate Hook)


?-- TIPS --?
use the way I have used to route between pages (App.js file in frontend folder )
no more usage of useHistory() hook , replaced with useNavigate() hook  



**************************************************************************************************
**************************************************************************************************

MOVING TO VERSION 3 :)
--> Implementing Redux in MERN Stack 
explanation -> https://youtu.be/ZOIdBWPydZY?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo

1) Redux involves Reducers, Store and Actions 
2) Application to Action via useDispatch hook (Action contains Type and Payload) (what type of action application needs )
3) Action is then passed to the Reducers
4) Reducers move to Store and Store implements the change in state 

5) cd frontend; npm i react-redux redux redux-thunk 
   and also npm i redux-devtools-extension(for vscode) + install the same extension in browser to check if redux is 
   working or not 
6) create store.js in src folder 
7) update this in index.js file of src by changing React.StrictMode to Provider store={store}
   and importing Provider from react-redux
8) now run the app and check the extension

9) now create 3 folders in src namely constants, reducers and Actions 
10) userConstants.js in constants folder; userReducers.js in reducers folder; userActions.js in actions folder
11) create constants needed in userConstants.js
12) based on those constants, create reducer in userReducer.js
13) now add this reducer in store.js

14) to fill actions.js , we have already typed the login user logic in LoginScreen.js of submithandler() func.
    Cut the try/catch block of LoginScreen.js and paste it in actions.js with additional few lines (dispatch lines) and 
    also remove the error and loading statehooks and then add useDispatch()
15) Similarly to add logout logic in userActions.js, it is available in Header.js in components folder.Also edit the code in 
    Header.js with handler.

16) now add reducers and actions for registration process just like we did for login/logout process.
    by the way, update the changes in store.js too 
17) most of the work is done in Reducers, Actions, 



**************************************************************************************************
**************************************************************************************************

MOVING TO VERSION 4 :)
--> Notes API with CRUD Operation in Node JS and Express JS 

---ONLY BACKEND PART AND POSTMAN USAGE ... NO WORKING WITH FRONTEND---

1) add route in server.js 
2) create noteRoute.js in routers folder 
3) run npm start in NoteVault folder and go to postman 

how to use postman for this project is shown in this video
https://youtu.be/iw5RSIflYGU
4) GET request for just "{{URL}}" .. output we get "API is running" (checking method)

5) create noteModel.js in Models folder
6) now add routes in noteRoute.js 
7) create noteController.js and update file in noteRoutes.js and now go to postman 

8) in postman , create a folder .. within it add a get request /api/notes to display notes 

9) now add authMiddleware.js -> protect function in middleware is used when a user
   logs in and puts the protect func before the getNotes API ... in simple terms , user has to pass this 
   middleware to reach the getNotes API
10) go to postman , change auth to "Bearer Token" to check authentication ("https://youtu.be/N4p6qbzt_K0?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=710")


--> LETS MOVE TO CREATE NOTES API 
11) add createNote func() in controller.js and update that in routes file and 
    go to postman and add POST /api/notes/create 
        ("https://youtu.be/N4p6qbzt_K0?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=961")
    this video section explains to add a sample note by giving it in the body section


--> GET NOTE BY SINGLE ID
12) same procedure , add getNoteByID func() in controller.js and update that in routes file and 
    go to postman and add GET /api/notes/:id 
    ("https://youtu.be/N4p6qbzt_K0?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=1174")


--> UPDATE NOTE BY USER
13) same procedure , add updateNote func() in controller.js and update that in routes file and 
    go to postman and add PUT /api/notes/:id 
    ("https://youtu.be/N4p6qbzt_K0?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=1500")


--> DELETE NOTE BY USER
14) same procedure , add deleteNote func() in controller.js and update that in routes file and 
    go to postman and add  /api/notes/:id 
    ("https://youtu.be/N4p6qbzt_K0?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=1678")\


--- BACKEND PART AND POSTMAN USAGE OVER ... FRONTEND WORK STARTED ---
("https://youtu.be/fYBlrsy0cx4?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo")

--> LISTING ALL NOTES UI

1) create noteConstants.js in Constants folder and add NOTES LIST constants
2) now create reducer for it ... notesReducer.js and add noteListReducer function to it 
3) add this reducer to store 
4) now create actions for it ... notesAction.js ..listNote action 

5) go to Mynotes.js and remove states and repplace it with dispatch functions
    fetchnotes function is also replaced ... change useEffect hook too
6) make changes to useEffect hook and navigate to loginpage incase logged out 
7) change the header welcome name dynamically 
8) change footer to add current date 

?-- PROBLEMS FACED --?
    Cannot read properties of undefined (reading 'map')
    TypeError: Cannot read properties of undefined (reading 'map') -> while using map function
    After adding a '?' , the problem got solved 


--> CREATING NOTES UI

1) add NOTES CREATE constants in noteConstant.js
2) add create reducers 
3) add to store 
4) now create actions for it ... notesAction.js ..createNote action 
5) create a route for creating notes 
6) create a createNote in screens folder and run "npm i react-markdown"
    markdown is used similar way we don it in github readme file preview 
7) add dispatch, selectors and changes to useeffect hook


--> UPDATING NOTES UI
1) add NOTES UPDATE constants in noteConstant.js
2) add update reducers 
3) add to store 
4) now create actions for it ... notesAction.js ..updateNote action 
5) create a route for editing notes (SingleNote in screens folder) 

--> DELETE NOTES UI
similar process for update notes except for new page is not displayed 
just asks confirmation if you want to delete or not


--> SEARCHING NOTES 
1) add useState in App.js and a Header with a prop in App.js 
2) pass a prop in Header.js component ... setSearch prop
    similarly in MyNotes.js page too ... search prop 
3) update mynotes route as a function to pass the parameter 
4) go to header component and add onchange function to search bar 
5) go to Mynotes and add filtering function in the notes.map section 


**************************************************************************************************
**************************************************************************************************

SAME VERSION 4 :)
--> User Profile Functionality

1) add router for profile update in backend
2) create controller for update profile 
("https://youtu.be/KrAS6_s-goY?list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo&t=368") for postman testing for updating profile 

3) now moving to UI work ... crete constants, reducers, actions for update profile and put in store 
4) create a ProfileScreen in screens folder and add its route in App.js 
5) we have prevented moving back to login page when user is logged in using useEffect hook in landing page and profile page 


**************************************************************************************************
**************************************************************************************************

FINAL VERSION  :)
--> Project Deployment

1) go to env file and change NODE_ENV = development to NODE_ENV = production
2) change mongodb url for using atlas 
2) go to server.js and add deployment set of codes 
    also add "const path = require("path");" in server.js file 
3) run "npm run build" inside frontend folder
4) /frontend/build -->  add this in gitignore file which is outside

5) before pushing to github, remove the gitignore file from frontend folder 
6) before pushing, check the gitignore file if all are correct or not 
7) add this in outside package.json file 
    -> "build": "cd backend && npm install  && cd ../frontend && npm install && npm run build",
        in scripts section, so that deploy can be made 
7) use render.com to deploy website 
8) use this video for reference ("https://youtu.be/jF0PX9eBRAE"  and "https://youtu.be/MTPb4smwpU8" ) for website deployment