LearnFlow FRONTEND

Welcome to the LearnFlow frontend repository! This React Vite + TypeScript application serves as the responsive, user-facing interface for a dynamic learning platform. It offers goal tracking, AI-recommended resources, progress visualization, and integrates with a Node.js backend for secure JWT authentication.

Report Bug · Request Feature

---

Table of Contents

1. About The Project
   • Key Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation and Setup
   • Usage
3. API Documentation
4. Backend Repository
5. License

---

About The Project

LearnFlow is designed to help self-learners stay motivated and organized. By leveraging basic AI/NLP techniques, it recommends free online resources (articles, videos, courses) based on user-defined learning goals (e.g., “Learn Python,” “Master React”). The frontend provides an intuitive interface for users to set goals, log progress, maintain streaks, and receive personalized weekly recommendations.

Key Features

1. Goal Management

   • Create, edit, and track learning goals and subtasks.

2. AI-Powered Recommendations

   • Basic AI/NLP suggests relevant resources from external APIs (Wikipedia, MDN).

3. Progress Visualization

   • Interactive dashboards and charts to view goal progress, and user analytics.

4. Secure Authentication

   • Integration with JWT-based authentication for user login and access control.

5. State Management with Redux

   • Centralized state management using Redux Toolkit & Thunk for predictable data flow.

6. Responsive Design

   • Mobile-first, responsive layout with Tailwind CSS for rapid UI development.

(back to top)

---

Built With

This project uses a modern frontend stack to ensure high performance, scalability, and a great developer experience:

(back to top)

---

Getting Started

These instructions will help you set up the LearnFlow FRONTEND locally for development and testing.

Prerequisites

• Node.js (v22+ recommended)
  Download & Install Node.js
• npm or yarn (npm is bundled with Node.js; Yarn is optional)
  Install Yarn if you prefer Yarn

Installation and Setup

1. Clone the repository

   git clone https://github.com/gayanukabulegoda/LearnFlow-FRONTEND.git

   Navigate to the project directory:

   cd LearnFlow-FRONTEND

2. Install dependencies

   npm install

   or

   yarn install

3. Configure Environment Variables (Optional)

   • If needed, create a .env or .env.local file in the project root.
   • Vite uses environment variables prefixed with VITE_. For example:

     VITE_API_BASE_URL="http://localhost:5000"
     VITE_OTHER_CONFIG="some_value"

Usage

1. Start the development server

   npm run dev

   or

   yarn dev

   The application will be available at http://localhost:5173 by default.

2. Build for production

   npm run build

   or

   yarn build

   This command creates an optimized production build in the dist folder.

3. Preview the production build

   npm run preview

   or

   yarn preview

   This will serve the contents of the dist folder locally so you can verify the production build.

(back to top)

---

API Documentation

For detailed information on available API endpoints, request/response formats, and usage guidelines, refer to the official Postman Collection. Ensure the backend server is running and configured correctly before making requests.

---

Backend Repository

The LearnFlow BACKEND is built with Node.js, Express.js, TypeScript, and Prisma. Visit the repository for more details:

• LearnFlow BACKEND

---

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

---

© 2025 Gayanuka Bulegoda

---