Skip to content
BranchesTags

Repository files navigation

A-Partner Frontend

A-Partner Frontend is the user interface for A-Partner, an accountability and goal-tracking application that helps users create goals, break them into milestones, track steps, earn XP, and view progress analytics.

The frontend is built with React, TypeScript, Vite, and Tailwind CSS.

Table of Contents

Overview

The frontend provides a clean and responsive interface for users to manage their goals, milestones, and steps. It connects to the A-Partner backend API for authentication, data management, analytics, and gamification.

Users can create goals, organize them into milestones, add steps, complete tasks, track XP, view streaks, and monitor their progress through the dashboard and analytics pages.

Features

  • User registration and login
  • Password reset flow
  • Dashboard overview
  • Goal creation and editing
  • Milestone creation and editing
  • Step creation, editing, completion, and deletion
  • Timeline validation messages
  • Today focus section
  • Overdue steps section
  • XP and level display
  • Streak tracking display
  • Goal progress indicators
  • Milestone progress indicators
  • Analytics page
  • Settings page
  • Password change form
  • New-user onboarding tour
  • Responsive layout for desktop and mobile
  • Animated UI interactions

Tech Stack

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • React Router
  • Framer Motion
  • Lucide React

Project Structure

Frontend/
  src/
    components/
      ConfirmDeleteModal.tsx
      CreateGoalPrompt.tsx
      FloatingElements.tsx
      GoalCard.tsx
      MilestoneCard.tsx
      OnboardingTour.tsx
      ProgressRing.tsx
      Sidebar.tsx
      StepCard.tsx
      TodayFocus.tsx
      XPToast.tsx

    lib/
      api.ts
      auth.tsx
      config.ts
      store.tsx
      types.ts
      utils.ts

    pages/
      AnalyticsPage.tsx
      AuthPage.tsx
      DashboardPage.tsx
      GoalDetailPage.tsx
      GoalsPage.tsx
      MilestoneDetailPage.tsx
      SettingsPage.tsx

    App.tsx
    index.css
    index.tsx

  index.html
  package.json
  tailwind.config.js
  vite.config.ts

Getting Started

Prerequisites

Make sure you have the following installed:

  • Node.js
  • npm

The backend API should also be running.

Installation

Clone the repository:

git clone https://github.com/Julia-A/A-Partner-Frontend.git

Move into the frontend folder:

cd Frontend

Install dependencies:

npm install

Environment Variables

Create a .env file in the Frontend directory.

VITE_API_BASE_URL=http://localhost:3000

Environment Variable Description

Variable Description
VITE_API_BASE_URL Base URL of the backend API

For local development, the backend usually runs on:

http://localhost:3000

Available Scripts

Start Development Server

npm run dev

The app should run on:

http://localhost:5173

Build For Production

npm run build

Preview Production Build

npm run preview

Lint Project

npm run lint

Pages

Auth Page

Handles:

  • Login
  • Registration
  • Forgot password

Dashboard Page

Shows:

  • Current streak
  • Best streak
  • Weekly step completions
  • Completion rate
  • Overdue count
  • Today focus
  • Recent goals
  • XP and level progress

Goals Page

Shows all user goals and allows filtering by:

  • All goals
  • Active goals
  • Completed goals

Goal Detail Page

Shows a single goal with:

  • Goal details
  • Goal timeline
  • Overall progress
  • Milestones
  • Goal completion state
  • Goal editing
  • Goal deletion

Milestone Detail Page

Shows a single milestone with:

  • Milestone details
  • Step list
  • Step creation
  • Step completion
  • Milestone completion state
  • Goal completion success card

Analytics Page

Shows:

  • Streaks
  • Completion rate
  • Steps completed in the last 7 days
  • Steps completed in the last 30 days
  • Goal completion rate
  • Daily completion chart
  • Weekly completion chart

Settings Page

Shows:

  • User account details
  • Password change form

Application Flow

User signs up or logs in
  -> User lands on dashboard
  -> User creates a goal
  -> User adds milestones to the goal
  -> User adds steps to each milestone
  -> User completes steps
  -> XP and streaks update
  -> Milestones complete automatically
  -> Goals complete automatically
  -> Analytics update over time

State Management

The app uses React Context and Reducer for global app state.

The main store manages:

  • User profile
  • Goals
  • Milestones
  • Steps

State actions include:

  • Set profile
  • Set goals
  • Add goal
  • Update goal
  • Remove goal
  • Set milestones
  • Add milestone
  • Update milestone
  • Remove milestone
  • Set steps
  • Add step
  • Update step
  • Remove step

The store is located in:

src/lib/store.tsx

API Integration

All backend API calls are handled in:

src/lib/api.ts

The API utility handles:

  • Base API URL
  • Authenticated requests
  • Access token attachment
  • Refresh token flow
  • Error handling
  • MongoDB _id normalization to id

Example:

getGoals: () => fetchWithAuth('/goal')

The API base URL is configured in:

src/lib/config.ts

Authentication

Authentication state is handled in:

src/lib/auth.tsx

The app stores tokens in local storage:

a-partner-access-token
a-partner-refresh-token

Protected pages redirect unauthenticated users back to the auth page.

Authenticated users can access:

  • Dashboard
  • Goals
  • Goal details
  • Milestone details
  • Analytics
  • Settings

Routing

Routing is handled with React Router.

Main routes:

/                 -> Auth page
/dashboard        -> Dashboard
/goals            -> Goals page
/goals/:goalId    -> Goal detail page
/goals/:goalId/milestones/:milestoneId -> Milestone detail page
/analytics        -> Analytics page
/settings         -> Settings page

UI Components

Important reusable components:

Sidebar

Main navigation for desktop and mobile.

GoalCard

Displays goal title, description, progress, milestone count, and timeline status.

MilestoneCard

Displays milestone title, step progress, completion status, and timeline warnings.

StepCard

Handles step display, editing, completion, deletion, overdue status, and timeline warnings.

TodayFocus

Displays steps due today and overdue steps.

CreateGoalPrompt

Multi-step form for creating a goal.

OnboardingTour

Guides new users through the main app areas.

XPToast

Displays XP reward feedback after progress actions.

Timeline Validation

The frontend gives users feedback when timelines are invalid.

Examples:

  • Goal target date must be after the start date.
  • Step start date and end date are required.
  • Step end date must be after the start date.
  • Step dates must stay within the parent goal timeline.
  • Milestone dates are optional.
  • If milestone dates are added, they must stay within the parent goal timeline.

Invalid actions are blocked by disabling the relevant buttons.

Styling

The app uses Tailwind CSS for styling.

Global styles are located in:

src/index.css

Tailwind configuration is located in:

tailwind.config.js

The UI uses:

  • Soft cards
  • Progress bars
  • Responsive layouts
  • Icon buttons
  • Animated transitions
  • Status badges
  • Modal confirmation flows

Future Improvements

  • Email verification UI
  • Recurring steps or habits
  • Notification reminders
  • More advanced analytics
  • Profile editing
  • Dark/light theme toggle
  • Improved onboarding customization
  • Tests for major user flows

Author

Built by Julia Aderemi.

About

Frontend of My accountability app

a-partner.netlify.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages