srivenkat13

Best Practices for Connecting FE and BE

1. Creating a backend

• creating a simple backend using express should look like below.

In the `server.js` ( or whatever file that runs on node)

import express from 'express'
//  if importing as module, instead of commonJS, set property "type": "module" in package.json

srivenkat13

Step 1: Install gh-pages

npm install gh-pages --save-dev

Step 2: Add below scripts to package.json

"predeploy": "npm run build",

"deploy": "gh-pages -d dist",

Step 3: In vite.config.js add this configuration

base: "/YOUR_REPOSITORY_NAME",

eg:base: "/my-new-app",

srivenkat13

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

app.get("/hello", (req, res) => {
  return res.json({ msg: "hello there 3" });
});

srivenkat13

{
  "version": 2,
  "builds": [
   {
    "src": "server.js",
    "use": "@vercel/node",
    "config": { "includeFiles": ["dist/**"] }
   }
  ],
  "routes": [

srivenkat13

const Elements = document.querySelectorAll(".badge-shape-wiz__text");

const times = Array.from(Elements).map((ele) => ele.textContent);

function timeRemaining( {times,count = 0}) {
    
  const selectedTimes = times.slice(count);
  const totalSeconds = selectedTimes.reduce((acc, time) => {
    const [min, sec] = time.split(":").map(Number);
    return acc + min * 60 + sec;

srivenkat13

/* from heropatterns.com */

/*  Plus signs */     

background-color: #1d1d1b;
       background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23121112' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");


/*  Heart */