diff --git a/README.md b/README.md index f18e4f3..958c3f7 100644 --- a/README.md +++ b/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 -cd -``` - -#### 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 -DJANGO_SUPERUSER_EMAIL=admin@test.com -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) \ No newline at end of file diff --git a/README_SETUP.md b/README_SETUP.md new file mode 100644 index 0000000..f18e4f3 --- /dev/null +++ b/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 +cd +``` + +#### 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 +DJANGO_SUPERUSER_EMAIL=admin@test.com +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). diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx index cb416cd..2d54fef 100644 --- a/client/src/components/task_form.tsx +++ b/client/src/components/task_form.tsx @@ -128,10 +128,10 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) { return (
setTaskName(e.target.value)} @@ -143,7 +143,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) { Description