Catch-Up Frontend

Overview

Catch-Up Frontend is a web application designed to assist with onboarding. This project represents only the frontend part of the entire application. The complete system also includes:

• Backend built with .NET
• Mobile app developed using .NET MAUI

Features

• Application preview
• Authentication and User managment
• [Task Management]
• [Roadmap Management]
• [Schooling Management]
• [Material Management]
• [Preset Management]
• [Feedback System]
• [Notifications]
• [Dark and Light Theme Support]
• [Localization]
• [Admin Tools]
• [Drag-and-Drop Functionality]

Application preview

See more

Home (Admin Panel)

Notifications

View unread messages

\

\

Popup A WebSocket connection listens for new notifications from the backend.

Notification component

Task Manager with drag and drop

Road Maps

Setting

AI assistant

Feedbacks (In some components you can send feedbacks)

FAQ

Material Management

\

Technologies Used

• React
• TypeScript
• Vite
• React Router
• React-Bootstrap
• Bootstrap
• DnD Kit
• Redux Toolkit
• React Context APi
• Axios
• js-cookie
• i18next - For internationalization and localization support.
• LocalStorage
• Confetti 🎉

User management

AuthProvider.tsx is a React Context Provider that manages user authentication, including access tokens, refresh tokens, user details, roles, and avatars. It provides a centralized way to handle authentication across the application using React Context API, Redux, Axios, Cookies, and LocalStorage.

Features

✅ Global Authentication State – Manages user authentication data across the app.
✅ Secure Token Storage – Uses Cookies to store access and refresh tokens.
✅ User Role Management – Fetches and caches user roles from the API.
✅ Avatar Handling – Downloads and stores user avatars in LocalStorage.
✅ Session Management – Handles login, logout, and token updates.
✅ Redux Integration – Dispatches actions upon logout (e.g., clearing user tasks).

How It Works?

Initializing Authentication State

On component mount, retrieves:

• accessToken & refreshToken from Cookies.
• user data from Cookies.
• avatar from LocalStorage.

const [accessToken, setAccessToken_] = useState<string | null>(Cookies.get('accessToken') || null);
const [refreshToken, setRefreshToken_] = useState<string | null>(Cookies.get('refreshToken') || null);
const [user, setUser_] = useState<User | null>(() => {
    const storedUser = Cookies.get('user');
    return storedUser ? JSON.parse(storedUser) : null;
});
const [avatar, setAvatar] = useState<string | null>(loadStoredAvatar());

Managing Authentication Tokens

• Set Access Token: Stores token in Cookies when a user logs in.
• Set Refresh Token: Stores refresh token for session persistence.
• Remove Tokens on Logout: Deletes them from Cookies.

    const setAccessToken = (newToken: string | null) => {
        setAccessToken_(newToken);
        if (newToken) {
            Cookies.set('accessToken', newToken, {
                path: '/',
                secure: true
            });
        } else {
            Cookies.remove('accessToken');
        }
    };

Managing User Data

• Saves user details in Cookies on login.
• Removes user data on logout.
• Fetches and stores user avatars using LocalStorage.

   const setUser = (newUser: User | null) => {
        if (newUser) {
            const { ...userToStore } = newUser;
            Cookies.set('user', JSON.stringify(userToStore), {
                path: '/',
                secure: true
            });
            setUser_(userToStore);
            if (userToStore.avatarId) {
                fetchAndStoreAvatar(userToStore.avatarId);
            }
        } else {
            Cookies.remove('user');
            localStorage.removeItem('userAvatar');
            setAvatar(null);
            setUser_(null);
        }
    };

User Role Management

Fetches the user role from API and caches it to avoid redundant requests.

  const getRole = async (userId: string): Promise<string> => {
        if (!userId) { throw new Error("Invalid userId");}
        try {
            const response = await axiosInstance.get(`User/GetRole/${userId}`);
            const role = response.data || "User";

            setRoleCache(role);
            return role;
        } catch (error) {  throw new Error("Failed to fetch user role");}
    };

Logout Functionality

• Clears all authentication-related data, including Redux state.

const logout = () => {
    setAccessToken(null);
    setRefreshToken(null);
    setUser(null);
    setRoleCache("");
    localStorage.removeItem('userAvatar');
    dispatch(clearTasks());
};

Usage

Wrapping the App with AuthProvider

• Include AuthProvider in the root component (main.tsx) to provide authentication context across the app.

<AuthProvider>
    <App />
</AuthProvider>

In Progress

1 vs 6 solo doing read me :(

POV: you are in the cinema and suddenly you have scenes after the credits

me and my boys