StudyMate

StudyMate is a web application that helps students track academic progress, plan daily tasks, and visualize analytics. Built with Next.js and Material UI, it includes dashboards, schedules, charts, and video resources.

Features

• Dashboard analytics with progress donuts and cards (src/pages/index.js)
• Subject-specific charts and insights (src/pages/chart.js)
• Daily tasks tracking with reviews and understanding levels (src/pages/dailyTasks.js)
• Profile management and quick links
  • Profile card: sections.account.AccountProfile
  • Details form: sections.account.AccountProfileDetails
  • Quick links: sections.account.Quicklinks
• Schedule view (src/pages/404.js)
• Authentication pages (src/pages/auth/register.js)
• Theming and design system
  • Theme factory: theme.index.createTheme
  • Palette: theme.create-palette.createPalette
  • Components: theme.create-components.createComponents
  • Typography: theme.create-typography.createTypography
  • Shadows: theme.create-shadows.createShadows

Monorepo Structure

• Next.js app (main)
  • Pages: src/pages/
  • Layouts: src/layouts/
  • Sections: src/sections/
  • Theme: src/theme/
  • Utils/components: src/utils/, src/components/
• Create React App sub-app (calendar demo): cal-app/

Getting Started (Next.js app)

• Requirements: Node.js 18+, npm or yarn
• Install dependencies:

  npm install

• Development:

  npm run dev

• Build:

  npm run build

• Start production server:

  npm run start

• Lint:

  npm run lint
  npm run lint-fix

Scripts are defined in package.json.

Running the Calendar Demo (CRA)

From cal-app/:

cd cal-app
npm install
npm start

Build/test scripts in cal-app/package.json.

Key Pages

• Dashboard: src/pages/index.js
• Daily Progress: src/pages/dailyTasks.js
• Charts: src/pages/chart.js
• Videos: src/pages/videos.js
• Profile: src/pages/account.js
• Settings (Calendar placeholder): src/pages/settings.js
• Customers (demo table): src/pages/customers.js
• Companies (analytics variant): src/pages/companies.js

Layouts

• Dashboard layout: layouts.dashboard.Layout
• Auth layout: layouts.auth.Layout
• Navigation:
  • Top nav: layouts.dashboard.TopNav
  • Side nav: layouts.dashboard.SideNav

Charts

ApexCharts via a wrapper component:

• Chart wrapper: components.Chart
• Donut charts: sections.overview.OverviewTraffic
• Bar charts: sections.overview.OverviewSales

Theming

Create the theme using:

• theme.index.createTheme
• Customize palette in theme.create-palette.createPalette
• Global component overrides in theme.create-components.createComponents

Authentication

Stubbed auth context:

• contexts.AuthProvider
• Register page: src/pages/auth/register.js

Development Notes

• Next.js version: 13.1 (package.json)
• Material UI v5
• Heroicons for icons
• ESLint config: .eslintrc.json

Roadmap

• Persist daily tasks and ratings
• Real authentication and user settings
• Integrate calendar into Settings page
• API integration for charts and analytics