Skip to main content

🚀 Frontend Overview

Hey, Inner Journey frontend creators! This document provides a high-level overview of Inner Journey’s frontend – a React and TypeScript web application styled with Chakra UI. It connects to our backend via APIs, utilizes Firebase Authentication for user management, and is deployed on Firebase Hosting. Let’s craft a stunning user experience! 🌟

🏗️ Architecture Overview​

Here's a breakdown of the core technologies and concepts used:

  • Framework: React with TypeScript for building a robust and scalable user interface.
  • Styling: Chakra UI provides a library of accessible and composable components for consistent design.
  • Authentication: Firebase Authentication handles secure user sign-up, login, and session management.
  • State Management: React Context is used for managing global application state, such as the user's authentication status.
  • Deployment: Firebase Hosting ensures fast and reliable delivery of the static frontend assets.

📁 File Structure​

The project follows a standard structure for React applications:

Diagrammet visar huvudkatalogerna och konfigurationsfilerna i frontend-projektet.

🛠️ Key Responsibilities​

The frontend is responsible for several key aspects of the user experience:

  • User Interface (UI): Rendering all pages and interactive components for features like user onboarding, journal entries, AI coach interactions, and viewing coach profiles (e.g., the /coaches page).
  • API Communication: Securely calling backend API endpoints (e.g., /onboarding/chat, /gemini/getActivation) to fetch and send data.
  • Authentication Flow: Managing the user login process, handling authentication tokens, and protecting routes using Firebase Auth.
  • User Experience & Animations: Implementing smooth UI transitions and interactions, potentially using libraries like Framer Motion (as seen on the /coaches page).

🚀 Development and Deployment Workflow​

  • Local Setup:
    1. Clone the repository from Git.
    2. Install dependencies using npm install.
    3. Run the development server with npm start for live reloading.
  • Deployment:
    1. Changes are pushed to the main branch on Git.
    2. A GitHub Actions workflow automatically builds the application.
    3. The built assets are deployed to Firebase Hosting using the firebase deploy --only hosting command.
  • API Proxy: During local development (npm start), requests to /api are proxied to the backend server (typically http://localhost:8080) as configured in package.json. In the production environment, the frontend calls the deployed backend URL directly.

For detailed code implementation and specific setup instructions, please refer to the frontend/ directory within the main GitHub repository.