# ZenKanji

ZenKanji is a web and mobile application designed to help users learn and review Japanese Kanji effectively. It provides a modern and intuitive interface for studying, tracking progress, and staying motivated on your language-learning journey.

## Project Structure

This project is a monorepo containing two main packages:

- `client/`: A Vue.js 3 application built with Vite that serves as the frontend. It is also configured with Capacitor to allow for native mobile builds.
- `server/`: A Node.js and Express application that provides the backend API for user authentication, data synchronization, and study progression.

## Getting Started

To get the application running locally, you will need to set up both the `client` and the `server`.

### Prerequisites

- [Node.js](https://nodejs.org/) (v18 or higher recommended)
- [npm](https://www.npmjs.com/)
- [Docker](https://www.docker.com/) (for running a local database)

### Server Setup

1. **Navigate to the server directory:**

    ```bash
    cd server
    ```

2. **Install dependencies:**

    ```bash
    npm install
    ```

3. **Set up environment variables:**
    Create a `.env` file in the `server/` directory and configure your database connection and any other required variables.

4. **Start the development server:**

    ```bash
    npm run dev
    ```

    The server should now be running on the port specified in your configuration (e.g., `http://localhost:3000`).

### Client Setup

1. **Navigate to the client directory:**

    ```bash
    cd client
    ```

2. **Install dependencies:**

    ```bash
    npm install
    ```

3. **Configure environment variables:**
    Create a `.env` file in the `client/` directory to point to the correct backend API URL.

    ```
    VITE_API_URL=http://localhost:3000/api/v1
    ```

4. **Run the development server:**

    ```bash
    npm run dev
    ```

    The application should be accessible at `http://localhost:5173`.

## Technologies Used

### Frontend (Client)

- **Framework**: [Vue.js 3](https://vuejs.org/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Mobile**: [Capacitor](https://capacitorjs.com/)
- **Styling**: [Sass](https://sass-lang.com/)
- **State Management**: [Pinia](https://pinia.vuejs.org/)
- **Internationalization**: [Vue I18n](https://vue-i18n.intlify.dev/)

### Backend (Server)

- **Framework**: [Express.js](https://expressjs.com/)
- **Database**: [MongoDB](https://www.mongodb.com/)
- **Authentication**: JWT-based and using your Wanikani API Key for login

## Features

- **Kanji Drawing**: Interactive canvas for practicing Kanji writing.
- **Spaced Repetition System (SRS)**: Smart review scheduling to optimize learning.
- **Progress Tracking**: Dashboard with widgets for accuracy, streaks, mastery, and more.
- **Cross-Platform Sync**: Synchronize your study progress across web and mobile devices.
- **Collections**: Browse and study Kanji by levels or themes.