Development

README.md

@@ -1,12 +1,227 @@
-# React + Vite
+# StudyHub Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+![ReactJS](https://img.shields.io/badge/ReactJS-19-blue)
+![NodeJS](https://img.shields.io/badge/NodeJS-20-green)
+![Vite](https://img.shields.io/badge/Vite-6-purple)
+![Status](https://img.shields.io/badge/Status-Development-red)
+
+StudyHub is a minimalist online learning platform designed to increase productivity and promote effective learning through consistent management of educational resources.
+Our goal is to enable instructors and educational institutions to deliver high quality learning experiences efficiently.
+
+## Table of Contents
+- [Project Structure](#project-structure)
+- [Project Overview](#project-overview)
+- [Features](#features)
+- [Technologies](#technologies)
+- [Prerequisites](#prerequisites)
+- [Setup Instructions](#setup-instructions)
+  - [Backend Setup](#backend-setup)
+  - [Frontend Setup](#frontend-setup)
+- [Running the Application](#running-the-application)
+- [Team Members](#team-members)
 
-Currently, two official plugins are available:
+[//]: # (- [Contributing](#contributing))
+[//]: # (- [License](#license))
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Project Structure
+### Frontend (`studyhub-client`)
+```
+studyhub-client/
+├── src/
+│   ├── components/
+│   │   ├── assignment/        
+│   │   ├── common/            
+│   │   ├── course/            
+│   │   ├── module/            
+│   │   ├── resource/          
+│   │   ├── user/              
+│   ├── pages/                  
+│   ├── services/              
+│   ├── store/                
+│   ├── utils/                
+│   ├── App.jsx                
+│   ├── index.css              
+│   ├── main.jsx              
+│   ├── themeConfig.js        
+├── eslint.config.js          
+├── package.json              
+├── postcss.config.js          
+├── tailwind.config.js        
+├── vite.config.js            
+```
+
+## Project Overview
+StudyHub is a platform that enables:
+- **Students**  
+  - Signup  
+  - Login  
+  - View:  
+    - Enrolled courses  
+    - Course info  
+    - Course modules  
+    - Course resources 
+    - Course assignments  
+    - Feedback and grade  
+  - Download:  
+    - Resources  
+    - Own submitted assignments  
+  - Upload:  
+    - Submitting assignments  
 
-## Expanding the ESLint configuration
+- **Instructors**  
+  - Signup  
+  - Login  
+  - Create:  
+    - Course  
+    - Course module  
+    - Module resource  
+    - Assignment  
+    - Feedback and grade  
+  - View:  
+    - Teaching courses  
+    - Course info  
+    - Course modules  
+    - Course resources 
+    - Course assignments  
+    - Provided feedback and grade  
+  - Download:  
+    - Resources 
+    - Submitted assignments  
+  - Update:  
+    - Course  
+    - Module  
+    - Assignment  
+    - Resource  
+  - Delete:  
+    - Module  
+    - Assignment  
+    - Resource  
+
 
-If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+The frontend is built with React 19, utilizing Redux for state management and Tailwind CSS for styling. The backend, built with Java 21 and Spring Boot 3, provides a RESTful API for managing users, courses, assignments, modules, and resources, with data stored in a PostgreSQL database.
+
+## Features
+- **User Authentication**: Login and signup functionality with role-based access (Student, Instructor).
+- **Course Management**:
+  - Create and edit courses (Instructors).
+  - View course details, modules, assignments and resources.
+- **Module Management**:
+  - Create, edit, and delete course modules (Instructors).
+  - View module details and associated resources.
+- **Assignment Management**:
+  - Create, edit, and delete assignments (Instructors).
+  - Submit assignments with file uploads (Students).
+  - Grade submissions and provide feedback (Instructors).
+- **Resource Management**:
+  - Upload and manage text or file-based resources for modules (Instructors).
+  - Download resources (Students).
+- **Theme Support**: Light and dark mode toggle for better user experience.
+- **Responsive Design**: Mobile-friendly interface with Tailwind CSS.
+
+## Technologies
+### Frontend
+- **React**: ^19.0.0
+- **React Router**: ^7.4.1
+- **Redux Toolkit**: ^2.6.1
+- **Axios**: ^1.8.4
+- **Tailwind CSS**: ^3.4.17
+- **Lucide React**: ^0.485.0
+- **Vite**: ^6.3.5
+- **ESLint**: ^9.21.0
+- **Prettier**: ^3.0.0
+
+### Backend
+- **Java**: 21
+- **Spring Boot**: 3
+- **PostgreSQL**: Database
+
+### Development Tools
+- **Node.js**: ^20.x
+- **npm**
+- **Maven**
+- **Postman**
+- **Swagger**
+- **Git**
+
+## Prerequisites
+- **Node.js**: Version 20.x or higher
+- **Java**: Version 21
+- **Maven**: For building the Spring Boot backend
+- **PostgreSQL**: Version 15 or higher
+- **Git**: For cloning the repository
+- **Code Editor**: Developed with Webstorm and IntelliJ IDEA but any editor can work
+
+## Setup Instructions
+
+### Backend Setup
+1. **Clone the Repository**:
+   - Recommended to follow the readme on: [StudyHub Backend Repository](https://github.com/Lidizz/studyhub-backend)  
+
+       **Or clone from the following:**
+        ```bash
+        git clone <https://github.com/Lidizz/studyhub-backend.git>
+        cd studyhub-backend
+        ```
+2. **Configure PostgreSQL**:
+   - Create a PostgreSQL database named `studyhub-db`.
+   - Update the `application.properties` file in `src/main/resources` with your database credentials:
+     ```properties
+     spring.datasource.url=jdbc:postgresql://localhost:5432/studyhub-db
+     spring.datasource.username=your-username
+     spring.datasource.password=your-password
+     spring.jpa.hibernate.ddl-auto=update
+     ```
+3. **Build and Run the Backend**:
+   ```bash
+   mvn clean install
+   mvn spring-boot:run
+   ```
+   The backend will run on `http://localhost:8080`.
+
+### Frontend Setup
+1. **Navigate to the Frontend Directory**:
+   ```bash
+   cd studyhub-client
+   ```
+2. **Install Dependencies**:
+   ```bash
+   npm install
+   ```
+
+3. **Run the Frontend**:
+   ```bash
+   npm run dev
+   ```
+   The frontend will run on `http://localhost:5173`.
+
+## Running the Application
+1. Run the backend server (`mvn spring-boot:run`).
+2. Run the frontend development server (`npm run dev`).
+3. Open `http://localhost:5173` in your browser to access the application.
+4. Use the signup page (`/signup`) to create a new user account or log in (`/login`) with existing credentials.
+
+## Team Members
+- Lidor Shachar
+- Sahrish Nosheen
+- Christin Wøien Skattum
+- Camilla Dahl Strømberg
+- Adnan Mohamed Osman Arab 
+
+[//]: # (## Contributing)
+
+[//]: # (1. Fork the repository.)
+
+[//]: # (2. Create a feature branch &#40;`git checkout -b feature/your-feature`&#41;.)
+
+[//]: # (3. Commit your changes &#40;`git commit -m "Add your feature"`&#41;.)
+
+[//]: # (4. Push to the branch &#40;`git push origin feature/your-feature`&#41;.)
+
+[//]: # (5. Create a pull request.)
+
+[//]: # (Please ensure code follows the ESLint and Prettier configurations for the frontend and adheres to Java coding standards for the backend.)
+
+
+[//]: # (## License)
+
+[//]: # (This project is licensed under the MIT License. See the [LICENSE]&#40;LICENSE&#41; file for details.)