Skip to content

Latest commit

Β 

History

History
134 lines (95 loc) Β· 4.42 KB

File metadata and controls

134 lines (95 loc) Β· 4.42 KB

πŸ“š StudyPal

Your personal study companion β€” built for students who mean business.

StudyPal helps you organize daily tasks, beat procrastination with Pomodoro timers, track your progress with stats, and build better study habits β€” one focused session at a time.

React Native Expo TypeScript NativeWind


✨ Features

  • πŸ“‹ Task Management β€” Add, organize, and track your daily study tasks from a clean dashboard
  • πŸ“… Schedule View β€” See your study sessions laid out by day so nothing slips through
  • ⏱ Pomodoro Timer β€” Built-in focus timer to help you work in productive sprints and beat procrastination
  • πŸ“Š Stats & Insights β€” Visualize your study habits and track consistency over time
  • πŸ“ Notes β€” Capture quick thoughts, summaries, or anything you don't want to forget
  • 🎨 Custom Tab Bar β€” Floating action button with a smooth, modern bottom navigation UI
  • πŸ“± Cross-platform β€” Runs on Android and iOS from a single codebase

πŸ›  Tech Stack

Layer Technology
Framework React Native + Expo
Language TypeScript
Routing Expo Router (file-based)
Styling NativeWind v4 (Tailwind CSS for RN)
Bundler Metro
Linting ESLint

πŸ“ Project Structure

StudyPal/
β”œβ”€β”€ app/                    # File-based routes (Expo Router)
β”‚   β”œβ”€β”€ _layout.tsx         # Root layout with custom tab bar
β”‚   β”œβ”€β”€ index.tsx           # Home / dashboard screen
β”‚   β”œβ”€β”€ schedule.tsx        # Daily schedule screen
β”‚   β”œβ”€β”€ AddTask.tsx         # Add new task screen (FAB route)
β”‚   β”œβ”€β”€ stats.tsx           # Study stats & analytics screen
β”‚   └── notes.tsx           # Notes screen
β”œβ”€β”€ components/
β”‚   └── TabBar.tsx          # Custom floating tab bar component
β”œβ”€β”€ assets/
β”‚   └── icons/              # App icon assets (home, calendar, stats, edit)
β”œβ”€β”€ app.json                # Expo app configuration
β”œβ”€β”€ tailwind.config.js      # Tailwind / NativeWind configuration
β”œβ”€β”€ babel.config.js         # Babel configuration
β”œβ”€β”€ metro.config.js         # Metro bundler configuration
β”œβ”€β”€ tsconfig.json           # TypeScript configuration
└── nativewind-env.d.ts     # NativeWind type declarations

πŸš€ Getting Started

Prerequisites

Make sure you have the following installed:

Installation

  1. Clone the repository

    git clone https://github.com/MONISHA2876/StudyPal.git
    cd StudyPal
  2. Install dependencies

    npm install
  3. Start the development server

    npx expo start
  4. Run the app

    Scan the QR code with Expo Go (Android) or your Camera app (iOS), or press:

    • a β€” open on Android emulator
    • i β€” open on iOS simulator

πŸ“± Screens

Screen Route Description
Home / Dashboard with today's tasks and quick overview
Schedule /schedule Calendar-style daily schedule view
Add Task /AddTask Form to create a new study task (opened via FAB)
Stats /stats Study session analytics and habit tracking
Notes /notes Freeform notes and quick captures

🎨 UI Design

StudyPal features a custom floating tab bar with:

  • A red floating action button (+) that opens the Add Task screen
  • Purple active state tinting for selected tab icons
  • A card-style bottom nav with rounded corners and a soft shadow
  • Smooth activeOpacity press feedback on all interactive elements

Made with ❀️ by Monisha