📚 TaskShare

Transform file sharing in education.
A course platform where teachers create courses & assignments and students submit their work - all in one place. 💼📚

---

🎓 About the project

This is an academic project, built for the Modern Web Applications course (Współczesne aplikacje webowe, 2023/2024). It was developed by a four-person team split into a front-end and a back-end squad, using Git & GitHub for version control and collaboration.

TaskShare is a system for easily sharing files, projects, and tasks within selected courses. Teachers can create dedicated courses that students can request to join; once approved, students can submit files as solutions to the assignments inside that course.

This repository contains the front-end of the application. The back-end (ASP.NET Core + MariaDB) lives in a separate repository.

• 🖥️ Front-end: https://github.com/kacaleksandra/taskshare
• ⚙️ Back-end: https://github.com/Avenek/taskshare_api

---

✨ Features

TaskShare ships with a full registration & login flow and a role-based experience split between teachers and students.

🧑‍🏫 As a teacher, you can…

• ✅ Create, edit, and delete courses
• ✅ Create, edit, and delete assignments within a course
• ✅ Manage course participants - accept or remove students
• ✅ Review and download the solutions submitted by students

🎒 As a student, you can…

• ✅ Search & browse all courses on the platform
• ✅ Request to join a course (subject to teacher approval)
• ✅ Track your pending and enrolled repositories
• ✅ Submit and edit files for assignments

🔐 New teacher accounts start in a waiting-for-approval state — teacher privileges are unlocked once the account is confirmed.

---

🖼️ Screenshots

Landing page	Sign up
Sign in	Teacher — waiting for approval

🧑‍🏫 More teacher screens (click to expand)

Create a new course	Managed courses
Edit course	Delete course confirmation
Manage members	Create assignment
Course assignments

🎒 More student screens (click to expand)

All courses + search	My repositories
Assignments	Edit a submission

---

🛠️ Tech stack

Front-end (this repo)

Technology	Why we used it
Next.js 14	Core framework — SSR, dynamic routing & the App Router for fast, well-organized pages
React 18 + TypeScript	Component-driven UI with end-to-end type safety
Tailwind CSS	Utility-first styling for a consistent, easily tweakable look
shadcn/ui (Radix UI)	Accessible, customizable UI primitives (dialogs, forms, toasts…)
Zustand	Lightweight global state management
TanStack Query	Server-state fetching, caching & synchronization
React Hook Form + Zod	Performant forms with schema-based validation
date-fns	Date formatting, parsing & comparison
Lucide + Font Awesome	Crisp, scalable SVG icons
react-lottie-player	Lottie (JSON) animations for a livelier UI
next-client-cookies, clsx, tailwind-merge	Cookie/session handling & dynamic class composition

Code quality is enforced with ESLint, Prettier (with import sorting) and Husky git hooks.

Back-end (separate repo)

Written in ASP.NET Core (C#) with a MariaDB database, hosted locally via Docker. It uses Entity Framework (ORM), JWT Bearer authentication, FluentValidation, AutoMapper, and Swagger for API exploration, and follows the Repository / Unit of Work pattern with resource-based authorization.

---

📁 Project structure

taskshare/
├── app/                        # Next.js App Router
│   ├── (auth)/                 # sign-in, sign-up, success
│   ├── (teacher)/              # teacher-only zone
│   │   ├── teacher-dashboard/
│   │   ├── teacher-courses/
│   │   ├── manage-members/
│   │   ├── submitted-works/
│   │   └── waiting-for-approval/
│   ├── course/                 # create / edit / view a course
│   ├── assignment/             # create / edit / submit / view assignments
│   ├── dashboard/              # student dashboard
│   ├── mycourses/              # pending & enrolled repositories
│   ├── _components/            # shared components
│   └── _utils/                 # shared helpers
├── ui/                         # shadcn/ui + Lottie assets
├── public/                     # static assets (logo, hero image…)
├── constants.ts                # role ids & pagination sizes
└── middleware.ts               # auth / route protection

---

🗄️ Database overview

The back-end database models courses and submissions around users and roles. Key entities include:

Entity	Purpose
users, roles, approval_statuses	Accounts, roles (Admin / Teacher / Student) and confirmation status
courses	Courses owned by teachers
course_enrolled_users / course_pending_users	Many-to-many enrollment (approved vs. awaiting approval)
assignments	Tasks within a course (deadline, visibility, description)
submissions / submission_files	Student submissions and their uploaded files
user_actions / user_logs	Audit log of user actions
black_listed_token	Revoked JWT tokens

---

🚀 Getting started

Prerequisites

• Node.js (18+) and npm
• A running instance of the TaskShare API

Run the front-end

# 1. Install dependencies
npm install

# 2. Create a .env file and point it at your API
echo "NEXT_PUBLIC_API_URL=http://localhost:<api-port>" > .env

# 3. Start the dev server
npm run dev

The app will be available at http://localhost:3000.

Handy scripts

Command	What it does
npm run dev	Start the development server
npm run build	Create a production build
npm run start	Serve the production build
npm run lint	Run ESLint
npm run format	Format the codebase with Prettier

ℹ️ To run the back-end, build the Docker image from its Dockerfile, bring the stack up with docker compose up, import the database schema, then restart the containers. See the API repository for full instructions.

---

👥 Team

Name	Role
Aleksandra Kacprzak	Front-end developer
Rafał Maciończyk	Front-end developer
Jakub Machnik	Back-end developer
Piotr Karolak	Back-end developer

---

Built with ❤️ as a university project · 2023/2024