Styling experiment

README.md

@@ -1,161 +1,35 @@
-# Django + Next.js Template
-
-Django + Nextjs Template: Standardised CFC Tech Stack
-
----
-
-### Prerequisites
-
-- **Node.js 18+** and **npm** - [Download here](https://nodejs.org/)
-- **uv 0.8+** (Python package manager) - [Installation guide](https://docs.astral.sh/uv/getting-started/installation/)
-
-### Installation Steps
-
-#### 1. Clone the Repository
-```bash
-git clone <your-repo-url>
-cd <project-name>
-```
-
-#### 2. Install Prerequisites
-**MacOS:**
-```bash
-brew install uv 
-```
-**Ubuntu**
-```bash
-apt install astral-uv
-```
-Otherwise, look at the [installation guide](https://docs.astral.sh/uv/getting-started/installation/) 
-#### 3. Set Up Environment Variables
-Before proceeding, create your environment files by copying the examples:
-```bash
-cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.env
-```
+# LonkedIn : Not a Calendar
 
-#### 4. Set Up the Backend (Django)
-```bash
-cd server
-uv sync
-source .venv/bin/activate
-python manage.py migrate
-python manage.py createsuperuser  
-python manage.py runserver
-```
+## Overview
 
-**Backend (`.env` in `server/`)**
-```env
-APP_NAME=DjangoAPI
-APP_ENV=DEVELOPMENT
-API_SECRET_KEY=your-secret-key-here
-API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]
+LonkedIn is a streamlined task and time management system designed for students, employees, and anyone who likes to organise their time.
 
-POSTGRES_HOST=localhost
-POSTGRES_NAME=your_db_name
-POSTGRES_USER=your_username
-POSTGRES_PASSWORD=your_password
-POSTGRES_PORT=5432
+## Tasks
 
-DJANGO_SUPERUSER_PASSWORD=Password123
-[email protected]
-DJANGO_SUPERUSER_USERNAME=admin
+Users can **create and manage** their tasks in a **to-do list fashion** on the **Tasks page**. Each task can be assigned a name and description, as well as a number of topics and times. 
 
-FRONTEND_URL=http://localhost:3000
-```
+**Topics** denote what the task relates to and provides visual organiation between related tasks. **Times** denote a timeframe for working on this task throughout the week.
 
-**Frontend (`.env` in `client/`)**
-```env
-NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
-```
+![Viewing tasks on the Tasks Page](images/ViewTasks.png)
 
-#### 6. Set Up the Frontend (Next.js)
-```bash
-cd client
-npm install
-npm run dev
-```
+Users can add new tasks using the **Add Task** form.
 
-#### 7. Verify Installation
-- Frontend: [http://localhost:3000](http://localhost:3000)
-- Backend API: [http://localhost:8000](http://localhost:8000)
-- Admin panel: [http://localhost:8000/admin](http://localhost:8000/admin)
+![Adding a task on the Tasks Page](images/AddTask.png)
 
----
+Users can also edit existing tasks by clicking the edit button in the top right of the task.
 
-## Development Commands
+![Editing a task on the Tasks Page](images/EditTask.png)
 
-### Backend (Django)
-```bash
-cd server
+## Schedule
 
-# Run development server
-python manage.py runserver
+Users can view their schedule on the **Schedule Page**, showing visually which tasks have been assinged to which times during the week.
 
-# Create migrations
-python manage.py makemigrations
+![Tasks on the Schedule Page](images/Schedule.png)
 
-# Apply migrations
-python manage.py migrate
+Hovering over a task in the timetable will display more information about it.
 
-# Create superuser
-python manage.py createsuperuser
+## Focus
 
-# Run tests
-python manage.py test
+Finally, users can view the task scheduled for the current time, the time remaining on this task, as well as upcoming tasks. If there is no task scheduled for the current time the page will instead display the next upcoming task and a timer until it begins.
 
-# Reset database (nuclear option)
-./nuke.sh
-```
-
-### Frontend (Next.js)
-```bash
-cd client
-
-# Development server
-npm run dev
-
-# Build for production
-npm run build
-
-# Start production server
-npm start
-
-# Run linting
-npm run lint
-
-# Fix linting issues
-npm run lint:fix
-
-# Type checking
-npm run typecheck
-
-# Format code
-npm run format
-```
-
----
-
-## Server
-
-### Create and run migrations
-
-If the models are updated, be sure to create a migration:
-
-```bash
-python manage.py makemigrations # create migration
-python manage.py migrate # apply migrations
-```
-
-### Nuke the DB
-
-If you run into migration conflicts that you can't be bothered to fix, run `nuke.sh` to clear your database. Then, run migrations again.
-
-## Other
-
-### Update Dependencies
-
-You can run `npm install` and `uv sync` in the respective `client` and `server` folders to install the newest dependencies.
-
-### Changing env vars
-
-Edit the `.env` file in the respective directory (client or server).
+![Ongoing task on the Focus Page](images/Focus.png)

README_SETUP.md

@@ -0,0 +1,161 @@
+# Django + Next.js Template
+
+Django + Nextjs Template: Standardised CFC Tech Stack
+
+---
+
+### Prerequisites
+
+- **Node.js 18+** and **npm** - [Download here](https://nodejs.org/)
+- **uv 0.8+** (Python package manager) - [Installation guide](https://docs.astral.sh/uv/getting-started/installation/)
+
+### Installation Steps
+
+#### 1. Clone the Repository
+```bash
+git clone <your-repo-url>
+cd <project-name>
+```
+
+#### 2. Install Prerequisites
+**MacOS:**
+```bash
+brew install uv 
+```
+**Ubuntu**
+```bash
+apt install astral-uv
+```
+Otherwise, look at the [installation guide](https://docs.astral.sh/uv/getting-started/installation/) 
+#### 3. Set Up Environment Variables
+Before proceeding, create your environment files by copying the examples:
+```bash
+cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.env
+```
+
+#### 4. Set Up the Backend (Django)
+```bash
+cd server
+uv sync
+source .venv/bin/activate
+python manage.py migrate
+python manage.py createsuperuser  
+python manage.py runserver
+```
+
+**Backend (`.env` in `server/`)**
+```env
+APP_NAME=DjangoAPI
+APP_ENV=DEVELOPMENT
+API_SECRET_KEY=your-secret-key-here
+API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]
+
+POSTGRES_HOST=localhost
+POSTGRES_NAME=your_db_name
+POSTGRES_USER=your_username
+POSTGRES_PASSWORD=your_password
+POSTGRES_PORT=5432
+
+DJANGO_SUPERUSER_PASSWORD=Password123
+[email protected]
+DJANGO_SUPERUSER_USERNAME=admin
+
+FRONTEND_URL=http://localhost:3000
+```
+
+**Frontend (`.env` in `client/`)**
+```env
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
+```
+
+#### 6. Set Up the Frontend (Next.js)
+```bash
+cd client
+npm install
+npm run dev
+```
+
+#### 7. Verify Installation
+- Frontend: [http://localhost:3000](http://localhost:3000)
+- Backend API: [http://localhost:8000](http://localhost:8000)
+- Admin panel: [http://localhost:8000/admin](http://localhost:8000/admin)
+
+---
+
+## Development Commands
+
+### Backend (Django)
+```bash
+cd server
+
+# Run development server
+python manage.py runserver
+
+# Create migrations
+python manage.py makemigrations
+
+# Apply migrations
+python manage.py migrate
+
+# Create superuser
+python manage.py createsuperuser
+
+# Run tests
+python manage.py test
+
+# Reset database (nuclear option)
+./nuke.sh
+```
+
+### Frontend (Next.js)
+```bash
+cd client
+
+# Development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+
+# Run linting
+npm run lint
+
+# Fix linting issues
+npm run lint:fix
+
+# Type checking
+npm run typecheck
+
+# Format code
+npm run format
+```
+
+---
+
+## Server
+
+### Create and run migrations
+
+If the models are updated, be sure to create a migration:
+
+```bash
+python manage.py makemigrations # create migration
+python manage.py migrate # apply migrations
+```
+
+### Nuke the DB
+
+If you run into migration conflicts that you can't be bothered to fix, run `nuke.sh` to clear your database. Then, run migrations again.
+
+## Other
+
+### Update Dependencies
+
+You can run `npm install` and `uv sync` in the respective `client` and `server` folders to install the newest dependencies.
+
+### Changing env vars
+
+Edit the `.env` file in the respective directory (client or server).

client/src/components/task_form.tsx

@@ -128,10 +128,10 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-900 p-4 text-slate-200"
+      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg p-4 text-slate-200"
     >
       <input
-        className="title-input w-full rounded-lg bg-indigo-400 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+        className="title-input w-full rounded-lg bg-indigo-600 px-3 py-1 text-3xl font-bold text-slate-100 brightness-100 placeholder:text-slate-300 hover:brightness-110"
         type="text"
         value={taskName}
         onChange={(e) => setTaskName(e.target.value)}
@@ -143,7 +143,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           Description
         </h1>
         <textarea
-          className="description-input w-full rounded-lg bg-indigo-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+          className="description-input w-full rounded-lg bg-indigo-600 p-2 brightness-100 placeholder:text-slate-300 hover:brightness-110"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={7}
@@ -157,7 +157,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       />
       <TimeInput times={times} setTimes={setTimes} />
       <button
-        className="w-fit rounded-full border border-slate-300 bg-indigo-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
+        className="w-fit rounded-full border bg-indigo-600 px-3 py-1 text-xl brightness-110 hover:brightness-125"
         type="submit"
       >
         Save