SPOTIFY CLONE

Made with React Js, Node Js, Tailwind CSS, Zustand and Typescript/

What I learnt from building this porject

1. Global state management with zustand - In some cases some logic that fetches data from the backend would be used more frequently, That's why we create a global state is required

For Context, This just a demo sha

import { create } from "zustand";

interface Store {
user: User[]
  isLoggedIn: boolean;
  password: string | null;
  error: string | null;
  checkUser: () => Promise<void>;
  isLoading: boolean;
}

export const useStore = create<Store>((set) => ({
  user: []
  isLoggedIn: false,
  password: null,
  error: null,
  isLoading: false,
  
  checkUser: async () => {
    set({ isLoading: true });
    try {
      const response = await axiosInstance.get("/hello");
      set({ user: response.data, isLogged: true });
    } catch (err: any) {
      set({ error: err.response?.data?.message || "An error occurred" });
    } finally {
      set({ isLoading: false });
    }
  }
}));

2. Authentication with Clerk/Express JS - Useful clerk functions like, useUser(), useSignIn(), useAuth() were used to implement auhentication kind of seamlessly

3. AuthProviders for the entire application, this basically provides the application with auth tokens gotten from clerk

4. React Singleton design pattern

Auth Call backs and SSO callback

advanced grid Layout

React router dom

And More...