Research Compass

Build a modern, professional research team collaboration and project management web application.

The platform is designed for a university/research team to organize research papers, links, tasks, screenshots, notes, voice notes, meetings, deadlines, and research progress in one place.

The design should feel like a combination of:

• Trello for task management

• Notion for notes and research documentation

• Google Drive for files

• Google Calendar for scheduling

• A lightweight research knowledge-management platform

The website must be responsive and work beautifully on desktop, tablet, and mobile.

==================================================

1. OVERALL DESIGN

==================================================

Create a modern academic/technology interface.

Style:

• Clean

• Minimal

• Professional

• Modern

• Slightly futuristic

• Easy to navigate

• Not overly colorful

• Strong visual hierarchy

• Rounded cards

• Subtle shadows

• Smooth animations

• Excellent spacing

• Responsive layout

Use a light theme as the default.

Primary colors:

• Deep navy / dark blue

• White

• Light gray backgrounds

• Blue accent

• Green for completed tasks

• Orange/yellow for warnings and deadlines

• Red only for urgent items

Include:

• Sidebar navigation

• Top navigation bar

• Search

• Notifications

• User profile

• Team selector

• Dark/light mode toggle

==================================================

2. MAIN DASHBOARD

==================================================

Create a dashboard showing an overview of the research project.

Top section:

"Research Workspace"

Display:

• Project name

• Research topic

• Team members

• Current research phase

• Overall progress percentage

Dashboard cards:

1. Tasks

• Total tasks

• Completed

• In progress

• Overdue

2. Research Papers

• Total papers

• Papers being reviewed

• Papers fully analyzed

3. Upcoming

• Upcoming deadlines

• Meetings

• Research milestones

4. Team Activity

• Recent uploads

• New notes

• Completed tasks

• Comments

• Added papers

5. Research Progress

Show a progress chart over time.

6. Quick Actions

Buttons:

• Add Paper

• Add Task

• Add Note

• Upload Screenshot

• Record Voice Note

• Add Meeting

==================================================

3. RESEARCH PAPERS SECTION

==================================================

Create a dedicated research papers library.

Users should be able to add:

• Paper title

• Authors

• Publication year

• Journal/conference

• DOI

• URL

• PDF upload

• Research category

• Keywords

• Abstract

• Research methodology

• Dataset used

• Main findings

• Limitations

• Team member responsible

• Status

Paper statuses:

• To Read

• Reading

• Analyzing

• Completed

• Important

• Rejected

Display papers as cards or table rows.

Each paper should show:

Title

Authors

Year

Tags

Status

Assigned Member

Progress

Allow:

• Search papers

• Filter by year

• Filter by Member

• Filter by status

• Filter by category

• Sort by newest

• Sort by importance

Add a "Paper Details" page.

Paper details should contain:

Abstract

Research Question

Methodology

Dataset

Results

Limitations

Important Findings

Our Comments

Related Papers

Screenshots

Notes

Links

==================================================

4. RESEARCH PAPER ANALYSIS

==================================================

For every paper create an analysis workspace.

Divide the page into sections:

Paper Information

Research Problem

Research Question

Proposed Solution

Methodology

Dataset

Machine Learning / AI Models

Evaluation Metrics

Results

Limitations

Advantages

Disadvantages

What We Can Use

What We Can Improve

Research Gap

Important Quotes

References

Allow team members to collaboratively edit these fields.

Add comments to individual sections.

==================================================

5. TRELLO-STYLE TASK MANAGEMENT

==================================================

Create a Kanban board similar to Trello.

Columns:

BACKLOG

TO DO

IN PROGRESS

REVIEW

COMPLETED

Users can drag and drop cards between columns.

Each task should contain:

• Task title

• Description

• Assigned person

• Priority

• Due date

• Labels

• Checklist

• Attachments

• Screenshots

• Comments

• Voice notes

• Related research paper

• Related project milestone

Priority levels:

LOW

MEDIUM

HIGH

URGENT

Allow task labels such as:

Research

Development

Dataset

Paper

Meeting

Documentation

Presentation

Testing

Add task progress indicators.

==================================================

6. CALENDAR

==================================================

Create a full research team calendar.

Views:

• Month

• Week

• Day

• Agenda

Calendar events should include:

• Research meetings

• Paper deadlines

• Presentation dates

• Assignment deadlines

• Team milestones

• Personal tasks

Allow users to:

• Create events

• Edit events

• Delete events

• Assign attendees

• Add descriptions

• Add attachments

• Add reminders

Use different visual indicators for:

Meetings

Deadlines

Research milestones

Personal events

==================================================

7. NOTES

==================================================

Create a powerful notes section inspired by Notion.

Users can create:

• Research notes

• Meeting notes

• Ideas

• Literature review notes

• Experiment notes

• Brainstorming notes

Support:

• Rich text

• Headings

• Bullet lists

• Numbered lists

• Checklists

• Tables

• Links

• Images

• Screenshots

• Code blocks

• File attachments

Allow notes to be linked to:

• Research papers

• Tasks

• Meetings

• Team members

==================================================

8. SCREENSHOTS / IMAGE BOARD

==================================================

Create a visual research board.

Users can upload screenshots, diagrams, graphs, figures, architecture diagrams, papers screenshots, and other research images.

Each image should support:

• Title

• Description

• Tags

• Source

• Related paper

• Related task

• Uploaded by

• Date

Display images in a visual grid.

Clicking an image opens a large preview.

Allow users to add comments directly below each image.

Also allow images to be attached to tasks and papers.

==================================================

9. VOICE NOTES

==================================================

Create a voice notes system.

Users can record voice notes directly from the browser.

Features:

• Record

• Pause

• Resume

• Stop

• Delete

• Rename

• Playback

• Download

Each voice note should have:

• Title

• Duration

• Creator

• Date

• Related task

• Related paper

• Description

Display a waveform-style audio player.

Example:

🎙 Research Meeting Idea

02:34

▶ ━━━━━━━●━━━━━━

Allow multiple voice notes to be attached to a research paper or task.

==================================================

10. TEAM MEMBERS

==================================================

Create a team page.

Show team members as cards.

Each member should have:

• Profile picture

• Name

• Role

• Research responsibilities

• Current tasks

• Completed tasks

• Papers assigned

• Activity

Roles:

• Team Leader

• Member

• Developer

• Data Scientist

• Documentation

• Supervisor

Allow assigning tasks and papers to members.

==================================================

11. RESEARCH ROADMAP

==================================================

Create a research roadmap / timeline.

Example:

PHASE 1

Literature Review

PHASE 2

Research Gap Analysis

PHASE 3

Dataset Collection

PHASE 4

System Design

PHASE 5

Implementation

PHASE 6

Testing

PHASE 7

Research Paper

PHASE 8

Final Presentation

Each phase should show:

• Progress

• Start date

• End date

• Tasks

• Assigned members

• Deliverables

==================================================

12. LINKS / RESOURCE MANAGER

==================================================

Create a research resources page.

Users can save:

• Research papers

• Websites

• GitHub repositories

• Datasets

• Documentation

• YouTube videos

• Research tools

• APIs

Each resource should have:

Title

URL

Description

Category

Tags

Added by

Related paper

Related task

Allow users to preview/open links.

==================================================

13. FILE MANAGEMENT

==================================================

Create a central research files section.

Support:

PDF

DOCX

PPTX

XLSX

CSV

PNG

JPG

JPEG

MP4

MP3

Organize files using folders:

Research Papers

Datasets

Screenshots

Presentations

Documentation

Meeting Files

Experiments

Provide:

• Search

• Filter

• Sort

• Upload

• Rename

• Delete

• Download

• Preview

==================================================

14. MEETINGS

==================================================

Create a meetings section.

Each meeting should have:

• Title

• Date

• Time

• Participants

• Agenda

• Notes

• Decisions

• Action Items

• Attachments

• Voice recordings

After a meeting, users should be able to create tasks directly from action items.

Example:

Meeting:

"Weekly Research Meeting"

Agenda:

• Literature review

• Dataset progress

• Ontology development

Decisions:

• Use dataset X

• Compare models A and B

Action Items:

• Ahmed → analyze paper

• Abdalla → prepare architecture

• Maria → collect dataset

==================================================

15. ACTIVITY FEED

==================================================

Create a team activity feed.

Show:

"Ahmed uploaded a new paper"

"Maria completed Literature Review Task"

"Abdalla added a screenshot"

"Jumana added a voice note"

"Ziad moved Dataset Collection to In Progress"

Each activity should include:

Avatar

Name

Action

Object

Timestamp

==================================================

16. GLOBAL SEARCH

==================================================

Create a powerful global search.

Search across:

• Papers

• Tasks

• Notes

• Screenshots

• Voice notes

• Files

• Links

• Meetings

• Team members

Example:

Search:

"ontology"

Results:

Papers

Tasks

Notes

Screenshots

Files

Links

==================================================

17. NOTIFICATIONS

==================================================

Create notifications for:

• Assigned tasks

• Task deadlines

• New comments

• Paper assignments

• New files

• Meeting reminders

• Mentions

• Completed tasks

==================================================

18. ADMIN / PROJECT SETTINGS

==================================================

Create project settings.

Allow admins to:

• Add/remove members

• Change roles

• Create research phases

• Create categories

• Manage labels

• Manage permissions

• Archive projects

• Export project data

==================================================

19. USER AUTHENTICATION

==================================================

Create authentication:

• Login

• Register

• Forgot password

• Google login

Each user should have:

• Name

• Email

• Profile picture

• Role

• Preferences

==================================================

20. DATABASE STRUCTURE

==================================================

Design the backend/database around entities such as:

Users

Teams

Projects

Tasks

TaskComments

TaskChecklists

ResearchPapers

PaperAnalysis

PaperComments

Notes

Screenshots

VoiceNotes

Files

Links

Meetings

CalendarEvents

ResearchPhases

Notifications

ActivityLogs

Tags

Use proper relationships between entities.

For example:

ResearchPaper

↓

PaperAnalysis

↓

Notes

↓

Screenshots

↓

Tasks

↓

TeamMembers

==================================================

21. DASHBOARD UX

==================================================

Make the dashboard highly interactive.

Include:

• Drag and drop

• Modal windows

• Slide-over panels

• Toast notifications

• Confirmation dialogs

• Search

• Filtering

• Sorting

• Progress indicators

• Charts

• Calendar interactions

• File previews

• Audio players

Use smooth but subtle animations.

==================================================

22. RESPONSIVE DESIGN

==================================================

Desktop:

Persistent sidebar + main content.

Tablet:

Collapsible sidebar.

Mobile:

Bottom navigation or hamburger menu.

Make every feature usable on mobile.

==================================================

23. IMPORTANT UX FEATURE

==================================================

Every object should be linkable to another object.

For example:

A task can link to:

→ Research Paper

→ Note

→ Screenshot

→ Meeting

→ File

A research paper can link to:

→ Tasks

→ Notes

→ Screenshots

→ Files

→ Related Papers

A meeting can link to:

→ Tasks

→ Notes

→ Voice Notes

→ Files

This should create a connected research knowledge system rather than separate pages.

==================================================

24. HOMEPAGE

==================================================

Create a polished landing/dashboard experience.

Header:

ResearchHub

"Everything your research team needs, in one workspace."

Navigation:

Dashboard

Research

Tasks

Calendar

Notes

Media

Meetings

Files

Team

Hero dashboard should immediately show:

Today's Tasks

Upcoming Deadlines

Research Progress

Recent Papers

Recent Activity

==================================================

25. TECHNICAL REQUIREMENTS

==================================================

Build the application with a clean scalable architecture.

Preferred stack:

Frontend:

React

TypeScript

Tailwind CSS

shadcn/ui

Backend:

Node.js / API

Database:

PostgreSQL

Authentication:

Supabase Auth or equivalent

Storage:

Supabase Storage or equivalent

Use reusable components.

Use proper loading states.

Use empty states.

Use error states.

Use form validation.

Use optimistic UI where appropriate.

Make the application production-ready.

IMPORTANT:

Do not make this look like a generic task management app.

The identity should clearly be a RESEARCH TEAM WORKSPACE.

The most important areas are:

1. Research Papers

2. Paper Analysis

3. Trello-style Tasks

4. Calendar

5. Notes

6. Screenshots / Images

7. Voice Notes

8. Meetings

9. Research Roadmap

10. Files and Links

11. Team Collaboration

Create realistic sample data so the application looks complete immediately after opening it.

Use realistic research examples involving:

• AI

• Machine Learning

• Medical Informatics

• Ontologies

• NLP

• Data Science

• Software Engineering

Make the interface feel like a professional tool that a university research team could actually use every day.

This project was built with Lovable.

Build with Lovable

Continue developing this project in the Lovable editor.

• Ship faster: describe what you want to build and Lovable handles the code.
• Stay in sync: every change made in Lovable is committed straight to this repository.
• Full ownership: this code is yours. Push to main on GitHub and your changes sync back into Lovable, ready for your next prompt.

Development

Prefer working locally? You need Node.js and npm — install with nvm.

git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev