The project focuses on building a full-stack web application using: Backend: Laravel (PHP) Frontend: React.js with HTML, CSS, and JavaScript Rendering: Client-Side Rendering (CSR) DevOps Practices: GitHub Project boards, version control, deployment preparation.
PorteHobe is a smart study time tracker that helps students manage their academic routines with personalized study planning, a built-in calendar, session timer, goal tracking, badge achievements, and intelligent summarization. It’s built using Laravel (backend) and React.js (frontend) with Client-Side Rendering (CSR).
View our UI prototype on Figma: PorteHobe Figma Design
- Project Title: PorteHobe
- Objective: Help students manage their study time efficiently with smart planning, motivational tracking, and AI-assisted tools.
- Target Audience: School and university students seeking structured, distraction-free, and personalized learning support.
- Rendering Method: Client-Side Rendering (CSR)
- AI-Powered Note Summarization
- Smart Study Plans
- Goal & Streak Tracker
- Smart Resource Finder (YouTube/Articles) & Quizes
- Backend: Laravel (PHP Framework)
- Frontend: React.js with Tailwind CSS
- Database: MySQL
- APIs:
- Mock AI API / DeepSeek API (summarization & quiz generation)
- YouTube API (resource finder)
- Deployment: Vercel / Heroku / Render / AWS
- Version Control: Git + GitHub
- Authentication: Laravel Sanctum / JWT + OAuth (Google)
| Roll Number | Name | github account | WakaTime |
|---|---|---|---|
| 20220204035 | Sadia Sultana | Steadfast404 |  |
| 20220204039 | Jerin Jalal | JerinJalal |  |
| 20220204051 | Md. Nafiun Alom | NafiunAyon |  |
| 20220204052 | Prionty Kundu Aurin | Source-Soul |  |
- Login & Register Pages
- Google Sign-In
- Password-based login
- Role-based access: Student / Admin
- 2-column layout:
- Left: Welcome message, branding
- Right: Setup form:
- University/School toggle
- Term name, start/end dates
- Study goal (weekday/weekend)
- Live summary of term length and goal
- Sidebar Navigation:
- Home, Subjects, Study Plan, Resources, Summarizer, Progress, Calendar, Badges, Profile, Logout
- Home Panel:
- Daily tasks
- Motivational quote
- Quick action cards
- Add/Edit/Delete Subjects
- Set deadlines & individual goals
- Display as responsive cards or table
- Select subjects
- Set deadlines
- Input available hours/day
- Search bar with keyword input
- Filter by content type (YouTube, Articles, Quizzes)
- Display in card layout with thumbnails and links
- Paste text box
- Summarize via Mock AI API or DeepSeek API
- Show bullet-point summary
- Two-column layout:
- Left: Create session
- Right: Session history with illustration if empty
- Session Form includes:
- Date, Start/End Time, Course, Activity, Notes
- Break time and submit button
- Header shows:
- Date, Goal status, Average study duration
- **Top Right: Timer **
- Progress bar
- Heatmap calendar (study streaks)
- Calendar color boxes by intensity
- Categories:
- Daily, Weekly, Milestone
- Examples:
- Gold Medal (>300min)
- Early Bird (Before 7 AM)
- Golden Week (Daily Gold for 7 days)
- Lock icon for locked badges
- Modern cards with trophy icons and shadows
- Name, email, profile photo
- Change password
- Set preferences
- Add/edit motivational quotes
- View platform usage stats
- Post announcements or updates
- Dark / Light Mode Toggle in Navbar
- Fonts: Inter or Poppins
- Colors: Soft pastels (violet, green, yellow, blue)