refactor API_URL for easier development

client/.env.example

@@ -1,3 +1,5 @@
 VITE_API_URL=
-# # VITE_API_URL=http://localhost:3000/api
-# VITE_API_URL=https://snip-shell-2.onrender.com/api
+# VITE_API_URL=https://snip-shell-2.onrender.com
+
+VITE_ENV="development" 
+# VITE_ENV="development" or VITE_ENV="deployment"

client/src/hooks/AddContext.tsx

@@ -2,7 +2,8 @@ import React, { useContext, createContext } from "react";
 import axios from "axios";
 import RedAlert from "../components/Alert/RedAlert";
 import BlueAlert from "../components/Alert/BlueAlert";
-const API_URL = import.meta.env.VITE_API_URL;
+import { API_URL } from "../utils/constants";
+
 interface ContentData {
   title: string;
   type: string;
@@ -28,7 +29,7 @@ export const AddProvider = ({ children }: { children: React.ReactNode }) => {
 
     try {
       await axios.post(
-        `${API_URL}/content`,
+        `${API_URL}/api/content`,
         data, // send data directly or  { title, link, type, description }, // directly create object here
         {
           headers: {

client/src/hooks/AuthContext.tsx

@@ -1,7 +1,6 @@
 import React, { useState, createContext, useContext } from "react";
 import axios from "axios";
-
-// const API_URL = import.meta.env.VITE_API_URL ;
+import { API_URL, environment } from "../utils/constants";
 
 export interface UserData {
   _id: string;
@@ -35,16 +34,11 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       /* we can even write (email: string, password: string) here and use it in the function below */
     }
     try {
-      const res = await axios.post("https://snip-shell-2.onrender.com/api/signin", {
+      const res = await axios.post(`${API_URL}/api/signin`, {
         email: data.email,
         password: data.password,
       });
 
-      // similar one
-      //  const Signin = async (email: string, password: string) => {
-      //   try {
-      //     const res = await axios.post("https://snip-shell-2.onrender.com/api/signin", { email, password });
-
       // Save token
       localStorage.setItem("token", res.data.token);
 
@@ -62,7 +56,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
   const Signup = async (data: AuthData) => {
     try {
-      const res = await axios.post("https://snip-shell-2.onrender.com/api/signup", {
+      const res = await axios.post(`${API_URL}/api/signup`, {
         username: data.username,
         email: data.email,
         password: data.password,

client/src/pages/Dashboard.tsx

@@ -6,8 +6,8 @@ import Card from "../components/Card/Card";
 import axios from "axios";
 import ShareModalContent from "../components/modal/ShareModalContent";
 import { motion } from "motion/react";
+import { API_URL } from "../utils/constants";
 
-const API_URL = import.meta.env.VITE_API_URL;
 // import RedAlert from "../components/Alert/RedAlert";
 interface CardData {
   _id: string;
@@ -35,7 +35,7 @@ const Dashboard = () => {
     const token = localStorage.getItem("token");
 
     try {
-      await axios.delete(`${API_URL}/content`, {
+      await axios.delete(`${API_URL}/api/content`, {
         headers: { Authorization: `${token}` },
         data: { contentId: id },
       });
@@ -55,7 +55,7 @@ const Dashboard = () => {
     }
 
     try {
-      const response = await axios.get(`${API_URL}/content`, {
+      const response = await axios.get(`${API_URL}/api/content`, {
         headers: { Authorization: `${token}` },
       });
 
@@ -72,7 +72,7 @@ const Dashboard = () => {
   }, []);
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
   ) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };

client/src/utils/constants.ts

@@ -37,3 +37,6 @@ export const snipShellIntro: SnipShellIntro[] = [
       "Tweets, threads, YouTube videos, tutorials, blog posts, tools — save anything."
   }
 ];
+
+export const environment = import.meta.env.VITE_ENV;
+export const API_URL = environment === "development" ? "http://localhost:3000" : import.meta.env.VITE_API_URL ;