Skip to content

Commit d4d5eca

Browse files
Archer-KeyArcher-Key
committed
styling changes to all pages to increase visual cohesion and clairty
1 parent a470145 commit d4d5eca

20 files changed

Lines changed: 212 additions & 179 deletions

‎README.md‎

Lines changed: 18 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,35 @@
1-
# Django + Next.js Template
2-
3-
Django + Nextjs Template: Standardised CFC Tech Stack
4-
5-
---
6-
7-
### Prerequisites
8-
9-
- **Node.js 18+** and **npm** - [Download here](https://nodejs.org/)
10-
- **uv 0.8+** (Python package manager) - [Installation guide](https://docs.astral.sh/uv/getting-started/installation/)
11-
12-
### Installation Steps
13-
14-
#### 1. Clone the Repository
15-
```bash
16-
git clone <your-repo-url>
17-
cd <project-name>
18-
```
19-
20-
#### 2. Install Prerequisites
21-
**MacOS:**
22-
```bash
23-
brew install uv
24-
```
25-
**Ubuntu**
26-
```bash
27-
apt install astral-uv
28-
```
29-
Otherwise, look at the [installation guide](https://docs.astral.sh/uv/getting-started/installation/)
30-
#### 3. Set Up Environment Variables
31-
Before proceeding, create your environment files by copying the examples:
32-
```bash
33-
cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.env
34-
```
1+
# LonkedIn : Not a Calendar
352

36-
#### 4. Set Up the Backend (Django)
37-
```bash
38-
cd server
39-
uv sync
40-
source .venv/bin/activate
41-
python manage.py migrate
42-
python manage.py createsuperuser
43-
python manage.py runserver
44-
```
3+
## Overview
454

46-
**Backend (`.env` in `server/`)**
47-
```env
48-
APP_NAME=DjangoAPI
49-
APP_ENV=DEVELOPMENT
50-
API_SECRET_KEY=your-secret-key-here
51-
API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]
5+
LonkedIn is a streamlined task and time management system designed for students, employees, and anyone who likes to organise their time.
526

53-
POSTGRES_HOST=localhost
54-
POSTGRES_NAME=your_db_name
55-
POSTGRES_USER=your_username
56-
POSTGRES_PASSWORD=your_password
57-
POSTGRES_PORT=5432
7+
## Tasks
588

59-
DJANGO_SUPERUSER_PASSWORD=Password123
60-
DJANGO_SUPERUSER_EMAIL=admin@test.com
61-
DJANGO_SUPERUSER_USERNAME=admin
9+
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.
6210

63-
FRONTEND_URL=http://localhost:3000
64-
```
11+
**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.
6512

66-
**Frontend (`.env` in `client/`)**
67-
```env
68-
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
69-
```
13+
![Viewing tasks on the Tasks Page](images/ViewTasks.png)
7014

71-
#### 6. Set Up the Frontend (Next.js)
72-
```bash
73-
cd client
74-
npm install
75-
npm run dev
76-
```
15+
Users can add new tasks using the **Add Task** form.
7716

78-
#### 7. Verify Installation
79-
- Frontend: [http://localhost:3000](http://localhost:3000)
80-
- Backend API: [http://localhost:8000](http://localhost:8000)
81-
- Admin panel: [http://localhost:8000/admin](http://localhost:8000/admin)
17+
![Adding a task on the Tasks Page](images/AddTask.png)
8218

83-
---
19+
Users can also edit existing tasks by clicking the edit button in the top right of the task.
8420

85-
## Development Commands
21+
![Editing a task on the Tasks Page](images/EditTask.png)
8622

87-
### Backend (Django)
88-
```bash
89-
cd server
23+
## Schedule
9024

91-
# Run development server
92-
python manage.py runserver
25+
Users can view their schedule on the **Schedule Page**, showing visually which tasks have been assinged to which times during the week.
9326

94-
# Create migrations
95-
python manage.py makemigrations
27+
![Tasks on the Schedule Page](images/Schedule.png)
9628

97-
# Apply migrations
98-
python manage.py migrate
29+
Hovering over a task in the timetable will display more information about it.
9930

100-
# Create superuser
101-
python manage.py createsuperuser
31+
## Focus
10232

103-
# Run tests
104-
python manage.py test
33+
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.
10534

106-
# Reset database (nuclear option)
107-
./nuke.sh
108-
```
109-
110-
### Frontend (Next.js)
111-
```bash
112-
cd client
113-
114-
# Development server
115-
npm run dev
116-
117-
# Build for production
118-
npm run build
119-
120-
# Start production server
121-
npm start
122-
123-
# Run linting
124-
npm run lint
125-
126-
# Fix linting issues
127-
npm run lint:fix
128-
129-
# Type checking
130-
npm run typecheck
131-
132-
# Format code
133-
npm run format
134-
```
135-
136-
---
137-
138-
## Server
139-
140-
### Create and run migrations
141-
142-
If the models are updated, be sure to create a migration:
143-
144-
```bash
145-
python manage.py makemigrations # create migration
146-
python manage.py migrate # apply migrations
147-
```
148-
149-
### Nuke the DB
150-
151-
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.
152-
153-
## Other
154-
155-
### Update Dependencies
156-
157-
You can run `npm install` and `uv sync` in the respective `client` and `server` folders to install the newest dependencies.
158-
159-
### Changing env vars
160-
161-
Edit the `.env` file in the respective directory (client or server).
35+
![Ongoing task on the Focus Page](images/Focus.png)

‎README_SETUP.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# Django + Next.js Template
2+
3+
Django + Nextjs Template: Standardised CFC Tech Stack
4+
5+
---
6+
7+
### Prerequisites
8+
9+
- **Node.js 18+** and **npm** - [Download here](https://nodejs.org/)
10+
- **uv 0.8+** (Python package manager) - [Installation guide](https://docs.astral.sh/uv/getting-started/installation/)
11+
12+
### Installation Steps
13+
14+
#### 1. Clone the Repository
15+
```bash
16+
git clone <your-repo-url>
17+
cd <project-name>
18+
```
19+
20+
#### 2. Install Prerequisites
21+
**MacOS:**
22+
```bash
23+
brew install uv
24+
```
25+
**Ubuntu**
26+
```bash
27+
apt install astral-uv
28+
```
29+
Otherwise, look at the [installation guide](https://docs.astral.sh/uv/getting-started/installation/)
30+
#### 3. Set Up Environment Variables
31+
Before proceeding, create your environment files by copying the examples:
32+
```bash
33+
cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.env
34+
```
35+
36+
#### 4. Set Up the Backend (Django)
37+
```bash
38+
cd server
39+
uv sync
40+
source .venv/bin/activate
41+
python manage.py migrate
42+
python manage.py createsuperuser
43+
python manage.py runserver
44+
```
45+
46+
**Backend (`.env` in `server/`)**
47+
```env
48+
APP_NAME=DjangoAPI
49+
APP_ENV=DEVELOPMENT
50+
API_SECRET_KEY=your-secret-key-here
51+
API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]
52+
53+
POSTGRES_HOST=localhost
54+
POSTGRES_NAME=your_db_name
55+
POSTGRES_USER=your_username
56+
POSTGRES_PASSWORD=your_password
57+
POSTGRES_PORT=5432
58+
59+
DJANGO_SUPERUSER_PASSWORD=Password123
60+
DJANGO_SUPERUSER_EMAIL=admin@test.com
61+
DJANGO_SUPERUSER_USERNAME=admin
62+
63+
FRONTEND_URL=http://localhost:3000
64+
```
65+
66+
**Frontend (`.env` in `client/`)**
67+
```env
68+
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
69+
```
70+
71+
#### 6. Set Up the Frontend (Next.js)
72+
```bash
73+
cd client
74+
npm install
75+
npm run dev
76+
```
77+
78+
#### 7. Verify Installation
79+
- Frontend: [http://localhost:3000](http://localhost:3000)
80+
- Backend API: [http://localhost:8000](http://localhost:8000)
81+
- Admin panel: [http://localhost:8000/admin](http://localhost:8000/admin)
82+
83+
---
84+
85+
## Development Commands
86+
87+
### Backend (Django)
88+
```bash
89+
cd server
90+
91+
# Run development server
92+
python manage.py runserver
93+
94+
# Create migrations
95+
python manage.py makemigrations
96+
97+
# Apply migrations
98+
python manage.py migrate
99+
100+
# Create superuser
101+
python manage.py createsuperuser
102+
103+
# Run tests
104+
python manage.py test
105+
106+
# Reset database (nuclear option)
107+
./nuke.sh
108+
```
109+
110+
### Frontend (Next.js)
111+
```bash
112+
cd client
113+
114+
# Development server
115+
npm run dev
116+
117+
# Build for production
118+
npm run build
119+
120+
# Start production server
121+
npm start
122+
123+
# Run linting
124+
npm run lint
125+
126+
# Fix linting issues
127+
npm run lint:fix
128+
129+
# Type checking
130+
npm run typecheck
131+
132+
# Format code
133+
npm run format
134+
```
135+
136+
---
137+
138+
## Server
139+
140+
### Create and run migrations
141+
142+
If the models are updated, be sure to create a migration:
143+
144+
```bash
145+
python manage.py makemigrations # create migration
146+
python manage.py migrate # apply migrations
147+
```
148+
149+
### Nuke the DB
150+
151+
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.
152+
153+
## Other
154+
155+
### Update Dependencies
156+
157+
You can run `npm install` and `uv sync` in the respective `client` and `server` folders to install the newest dependencies.
158+
159+
### Changing env vars
160+
161+
Edit the `.env` file in the respective directory (client or server).

‎client/src/components/task_form.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,10 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
128128
return (
129129
<form
130130
onSubmit={handleSubmit}
131-
className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-indigo-800 p-4 text-slate-200"
131+
className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg p-4 text-slate-200"
132132
>
133133
<input
134-
className="title-input w-full rounded-lg bg-indigo-600 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
134+
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"
135135
type="text"
136136
value={taskName}
137137
onChange={(e) => setTaskName(e.target.value)}
@@ -143,7 +143,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
143143
Description
144144
</h1>
145145
<textarea
146-
className="description-input w-full rounded-lg bg-indigo-600 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
146+
className="description-input w-full rounded-lg bg-indigo-600 p-2 brightness-100 placeholder:text-slate-300 hover:brightness-110"
147147
value={description}
148148
onChange={(e) => setDescription(e.target.value)}
149149
rows={7}
@@ -157,7 +157,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
157157
/>
158158
<TimeInput times={times} setTimes={setTimes} />
159159
<button
160-
className="w-fit rounded-full border border-slate-300 bg-indigo-600 px-3 py-1 text-xl brightness-110 hover:brightness-125"
160+
className="w-fit rounded-full border bg-indigo-600 px-3 py-1 text-xl brightness-110 hover:brightness-125"
161161
type="submit"
162162
>
163163
Save

0 commit comments

Comments
 (0)