Skip to content

README.md

Latest commit

 

History

History
202 lines (157 loc) · 7.96 KB

README.md

File metadata and controls

202 lines (157 loc) · 7.96 KB

DevTinder WebUI FrontEnd

PART - 1

  • Created a Vite + React
  • Remove unnecessary code & create a hellow world app
  • Install TailwindCSS latest (CSS Framework)
  • Install Design Component Library (Daisy UI) & Add Navbar
  • Created a separte Navbar.jsx Component
  • Add Routing (React-Router-DOM), install react-router-dom package
  • created BrowserRouter > Routes > Route =/Body > RouteChildren
  • Created an outlet in body component
  • Created a Footer

PART - 2

  • Created a LOGIN Page with input fields "Email" & "Password"
  • Created state variables for "Email" & "Password" to access values using e.target.value
  • Installed "axios" package for fetching data & sending data from FrontEnd to BackEnd
  • Installed "cors" npm package in backend expressjs server for bypassing CORS Policy from one domain(FrontEnd) to another(Backend) with configurations => origin: "http://localhost:5173", credentials: true,
  • Setup the JSON Token view in Frontend & Backend with parameters(withCredentials: true) object
  • Installed "Redux" & "Redux Tool Kit" for State Managment
    • Configured appStore and "Provider" & passed this appStore in app.jsx above BrowserRouter to access by app
    • Configured userSlice with "reducer" & "actions"(addUser, removeUser)
    • Subscribed to Store with "useSelector" to show LoggedIn User data in Navbar(name & photoUrl)

PART - 3

  • Fetching the current loggedin user profile/view API when user loggedin in body component
  • If user not loggedin then restricted user to access other routes(pages) using err.status(400) while catching error
  • if token is not present then redirecting user to login page from body component
  • Bulding Logout working in FrontEnd
  • Added FrontEnd validations using formik & yup libraries
  • Created Profile page with all details of loggedin user
  • Created Feed component to show data of all users
  • Stored Feed data in Redux
  • Edit Profile component created with form fields & onload prefilled current loggedin user data
  • Worked with PATCH Api for Editing or Updating profile data
  • Show toast message on saving profile data

PART - 4

  • See all my connections list(existing Connections - page) -- Created ConnectionsSlice with add & remove connection reducers -- Fetch existing connections of loggedin user using useEffect hook -- Storing connections in Store -- Render with user card design with array map method
  • See all Requests received from other users(New Requestes - page) -- Created RequestSlice with add & remove Request reducers -- Fetch requests of logggedin user using useEffect hook -- Storing requests in store -- Render the requests with new ui design -- Accepted and Rejected Request

PART - 5

  • Accept or Ignore the usercard from feed -- if Accepted or Rejected for perticular userId then removing that userId from feed alwell as from redux store also
  • Signup page with firstname, lastname, email, password fields created and validation for new user
  • Successful registration showing toast message as success then redicting to login page
  • End to End testing entire application

Episode - 01 Launching AWS Instance & FrontEnd Deployment

  • Signup on aws
  • Launch Instace
  • chmod 400 .pem
  • Connected to AWS Server using SSH Command -- ssh -i "DevTinder-Secret.pem" ubuntu@ec2-13-60-156-175.eu-north-1.compute.amazonaws.com
  • Installed correct node version that im using locally is(v20.18.0), same version on aws server also v20.18.0
  • Git Cloned from my github repo FrontEnd(DevTinder-WebUI)
  • Git Cloned from my github repo BackEnd(DevTinder) -- so now in my ubunto remote repo now i have both FrontEnd & BackEnd
  • FrontEnd folder => cd DevTinder-webUI in server(AWS Console) -- installed dependencies (npm install) -- then npm run build for creating build file for production ready
  • FrontEnd Deployment -- NginX command for updates "sudo apt update" -- NginX command for installation "sudo apt install nginx" -- NginX command for Starting server "sudo systemctl start nginx" -- NginX command for Enabling server "sudo systemctl enable nginx" -- Now copy code from dist folder(build file) to /var/www/html/ using "sudo scp -r dist/* /var/www/html/" -- Enable port 80 of my instance in AWS Console

Episode - 02 Nginx & Backend Node App Deployment

  • BackEnd Deployment -- install node on this backend folder "DevTinder" via teminal -- "npm run start" with this connected to DataBase & server listening successfully -- install "pm2" process manager npm package "npm install pm2 -g" to run server 24x7 -- npm install pm2 -g -- "pm2 start npm -- start" -- pm2 logs -- pm2 list, pm2 stop , pm2 delete -- pm2 start npm --name "DevTinder-backend" -- start

    FrontEnd = http://15.207.222.94/ BackEnd = http://15.207.222.94:7777/

    if we add a custom domain name as devtinder.com then

    FrontEnd = http://www.devtinder.com/ BackEnd = http://www.devtinder.com:7777/ => http://www.devtinder.com/api/

    Nginx Config

    - Nginx proxy pass for mapping portnumber 7777 to /api/
- to get nginx config file use chatgpt query as: nginx proxy pass map path of /api to 7777 node application
- nginx config server_name http://15.207.222.94/
- config nginx and for this command is 
    -- sudo nano /etc/nginx
    -- ls -l /etc/nginx
    -- ls -l /etc/nginx/sites-available/
    -- sudo nano /etc/nginx/nginx.conf
    -- sudo nano /etc/nginx/sites-available/default

    then we need to add below code in nginx config file below the "sever name" line   
      location /api/ {
          proxy_pass http://localhost:7777/;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
    - now restart nginx using "sudo systemctl restart nginx"

    -- Modify the base url in frontend project constants file as from ==> export const BASE_URL = "http://localhost:7777"; to ==> export const BASE_URL = "/api";

Episode - 03 Adding a Custom Domain Name

  • Goto Godaddy.com
  • purchased a custom domain
  • signup on cloudflare.com & add this domain name here
  • change the name servers on godaddy & point it to cloudflare
  • wait for some time till my nameservers updated
  • go to DNS management in cloudflare
  • DNS section remove existing "A name records those are pointing to some random ip's"
  • add new "A Record" with devstinder name with ip address
  • now devstinder.com is working fine
  • Enable SSL as Flexible
  • Edge certificate enable "Automatic HTTPS Rewrites"

Episode - 04 Sending Emails using Amazon SES

  • goto AWS SES console page
  • goto IAM -- create a new user & click next -- select "attach policies directly" -- search "amazonsesfullaccess" select & next -- finally click "createuser"
  • now goto main dashboard console then search "ses"
  • follow instructions -- setup email verification -- setup domain verification -- request for production access
  • now goto IAM in main console -- create security access key for sending emails -- select "other" then create access key
  • COPY access key & secret key to devtinder-backend .env file
  • now search on google as "sending emails aws ses using node"

  • follow instructions -- get started with nodejs -- goto aws ses -- sending email -- create sesClient.js file in backend utils folder as below // snippet-start:[ses.JavaScript.createclientv3] //import { SESClient } from "@aws-sdk/client-ses"; const { SESClient } = require("@aws-sdk/client-ses"); // Set the AWS Region. const REGION = "us-east-1"; // Create SES service object. const sesClient = new SESClient({ region: REGION, credentials: { accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY, }, }); //export { sesClient }; module.exports = { sesClient }; // snippet-end:[ses.JavaScript.createclientv3]