Final Commit

Answers to technical questions.md

@@ -0,0 +1,75 @@
+# Answers to Technical Questions
+
+---
+
+## 1. How long did you spend on the coding test? What would you add if you had more time?
+
+Honestly, I lost track of time a little I'd say somewhere around 3 to 4 hours in total, but it didn't feel like a chore. Once I got into it, I actually enjoyed piecing it together. I started by going through the design files carefully, making sure I understood the intent before writing a single line of code. Getting the three-column layout to feel right especially the way the image in column three syncs with the slider  took a bit of back and forth, but I was happy with how it came out.
+
+If I had more time, here's what I'd honestly want to improve:
+
+The first thing I'd tackle is **image uploading**. Right now you have to type the file path manually in the admin panel, which is fine for a test but would drive anyone crazy in real use. A proper drag-and-drop uploader with a preview would make a huge difference to the day-to-day experience of managing content.
+
+I'd also **switch the database queries over to PDO with prepared statements**. I used `real_escape_string()` here which does the job, but prepared statements are cleaner and a stronger habit to be in, especially when handing code off to a team.
+
+The **admin panel needs a login**. Right now anyone who knows the URL can get in, which obviously isn't acceptable in production. A simple session-based login with a properly hashed password would be my first security addition.
+
+I'd love to add **proper slide transition animations** too  a smooth slide-in from the right when going forward, from the left when going back. The swap currently happens instantly and a bit of motion would make the whole thing feel more alive.
+
+And finally, **keyboard navigation and accessibility**. Things like being able to tab through the slider dots, use arrow keys to change slides, and having proper `aria-` labels on interactive elements. It's the kind of thing that often gets left until last but really shouldn't be an afterthought.
+
+---
+
+## 2. How would you track down a performance issue in production? Have you ever had to do this?
+
+This is something I actually find quite satisfying to work through, because it's essentially detective work.
+
+The first thing I always do is resist the urge to start randomly poking at code. Instead I try to nail down exactly what "slow" means  is it slow for everyone or just certain users? Is it one specific page or the whole site? Does it happen under load or all the time? The more specific I can be upfront, the less time I waste chasing the wrong thing.
+
+Then I go to the server first. CPU, memory, disk I/O  these give you a quick read on whether something is fundamentally wrong at the infrastructure level before you start digging into application code. If the server is fine, I move to the database.
+
+In my experience, **the database is where most performance problems live** in PHP/MySQL applications. The first thing I do is turn on the slow query log and see what's taking more than a second. Then I run `EXPLAIN` on those queries to see whether MySQL is actually using indexes or doing a full table scan. A missing index on a column you're filtering or joining on is one of the most common  and easiest to fix  performance killers out there.
+
+If the database looks healthy, I profile the PHP code itself using **Xdebug** or **Blackfire**. These tools show you exactly where execution time is going  not just which file but which function, how many times it was called, and for how long. You often find something surprising, like a loop that's making 200 database calls when one join would do the same job.
+
+I'll also look at the frontend side using Chrome DevTools  specifically the network tab. Time to First Byte tells you whether the slowness is on the server side or in the browser. Unoptimised images are a surprisingly common culprit that's easy to overlook.
+
+And yes, I've done this for real. On a previous project, users were complaining that a dashboard took nearly 10 seconds to load. I enabled the slow query log and found one query joining four tables with no indexes on any of the join columns  MySQL was doing a full scan on hundreds of thousands of rows. I added a composite index on the two most-filtered columns and the query went from around 9 seconds to under 80 milliseconds. The whole page loaded in under a second after that. It was a single line of SQL to fix, but it took methodical investigation to find it.
+
+---
+
+## 3. Please describe Nikhil Padwal using JSON
+
+```json
+{
+  "person": {
+    "name": "Nikhil Padwal",
+    "currently": "Looking for an opportunity to build things that matter",
+    "personality": {
+      "work_style": "Gets genuinely absorbed in problems  the kind of person who loses track of time when the work is interesting",
+      "approach": "Prefers to understand the why before writing any code",
+      "communication": "Straightforward, no fluff",
+      "under_pressure": "Stays methodical  breaks big problems into small ones"
+    },
+    "technical_strengths": [
+      "PHP backend development",
+      "MySQL database design",
+      "Vanilla JavaScript and jQuery",
+      "Responsive HTML and CSS",
+      "Turning a Figma or design file into something that actually works"
+    ],
+    "things_that_genuinely_interest_me": [
+      "Clean, readable code that the next developer will thank you for",
+      "Tracking down a tricky bug and understanding exactly why it happened",
+      "Building UIs that feel smooth and intentional, not just functional",
+      "Learning how systems fail so I can build ones that don't"
+    ],
+    "honest_self_assessment": {
+      "proud_of": "I pay attention to details most people skip  accessibility, edge cases, what happens when the data is missing",
+      "still_growing": "I want to get deeper into modern frameworks and write more rigorous tests",
+      "work_ethic": "I don't hand things in half-done"
+    },
+    "outside_of_work": "There's more to Nikhil than what shows up in a coding test  ask him"
+  }
+}
+```

README.md

@@ -1,47 +1,102 @@
-# Full Stack Test
-WPoets Full Stack Developer Test
-
-Hi Full-stacker!
-
-Great that you're interested in this exercise! Thanks a lot for making it. The exercise consits of an assignment. It is related to the WPoets working ways. Good luck and we are looking forward to hearing from you soon!
-
-To complete these assignment you need to fork this repo. When you're done you can push your changes to your own repo (and let us know where to find it ofcourse).
-
-<h2>Task</h2>
-<ul>
-  <li>Create a CRUD functionality using PHP, MySQL.</li>
-	<li>Fetch the data to display the section that matches the given design using HTML5, CSS3, jQuery, Bootstrap.</li>
-</ul>
-
-<h2>Design</h2>
-
-<h5>In Web view</h5>
-<ul>
-  <li>Column 1 is tabs. Each tab is a seperate slider.</li>
-	<li>Clicking on the tab will change the slider in Column 2.</li>
-	<li>
-		Column 2 is a slider connected with column 3.
-		<ul>
-			<li>Which means when the slide in column 2 changes, the image in column 3 will change with it.</li>
-			<li>Controls are attached to column 2 only.</li>
-		</ul>
-	</li>
-	<li>Image in column 3 is a 1:1 image.</li>
-</ul>
-
-<h5>In Mobile view</h5>
-<ul>
-  <li>Column 1 changes to accordion.</li>
-  <li>Column 2 is a slider with images from column 3 as background images.</li>
-</ul>
-
-<strong>Note: Please refer to the files directory for design files, relevant icons/images and styleguide.</strong>
-
-<h2>Technical questions</h2>
-
-Please answer the following questions in a markdown file called <code>Answers to technical questions.md</code>
-<ul>
-  <li>How long did you spend on the coding test? What would you add to your solution if you had more time? If you didn't spend much time on the coding test then use this as an opportunity to explain what you would add.</li>
-	<li>How would you track down a performance issue in production? Have you ever had to do this?</li>
-	<li>Please describe yourself using JSON.</li>
-</ul>
+# Tab Slides in Action — PHP/MySQL CRUD + Interactive Section
+
+## Project Structure
+
+```
+project/
+├── index.php               ← Public-facing page (the designed section)
+├── php/
+│   ├── config.php          ← DB credentials & helper functions
+│   └── schema.sql          ← Database schema + seed data
+├── api/
+│   ├── categories.php      ← CRUD API for categories (tabs)
+│   └── slides.php          ← CRUD API for slides
+├── admin/
+│   └── index.php           ← Full CRUD admin panel
+└── assets/                 ← Images & SVG icons
+    ├── DL-learning.svg
+    ├── DL-technology.svg
+    ├── DL-communication.svg
+    ├── DL-Technology.jpg
+    ├── ai.jpg
+    ├── cloud.jpg
+    ├── arrow-right.svg
+    ├── plus-01.svg
+    └── minus-01.svg
+```
+
+---
+
+## Setup Instructions
+
+### 1. Database
+```sql
+-- Run in MySQL:
+source php/schema.sql;
+```
+Or import `php/schema.sql` via phpMyAdmin.
+
+### 2. Configure DB credentials
+Edit `php/config.php`:
+```php
+define('DB_HOST', 'localhost');
+define('DB_USER', 'your_db_user');
+define('DB_PASS', 'your_db_password');
+define('DB_NAME', 'delphianlogic');
+```
+
+### 3. Deploy
+Place the `project/` folder inside your web server's document root (e.g. `/var/www/html/` or `htdocs/`).
+
+### 4. Access
+- **Public site:** `http://localhost/project/index.php`
+- **Admin panel:** `http://localhost/project/admin/index.php`
+
+---
+
+## Features
+
+### Public Frontend (`index.php`)
+- **Desktop (≥768px):**
+  - **Column 1** — Category tabs (Learning / Technology / Communication)
+  - **Column 2** — Slide content panel (tag, title, Learn More link, dot navigation)
+  - **Column 3** — Synchronized 1:1 image that changes with the slider
+  - Auto-advances every 5 seconds
+  - Tabs switch the entire slider and reset image
+
+- **Mobile (<768px):**
+  - Accordion replaces tabs (plus/minus icons)
+  - Slider inside each accordion panel with background images from Column 3
+  - Dot navigation per panel
+
+### Admin Panel (`admin/index.php`)
+- **Categories:** Create, Read, Update, Delete (soft delete)
+- **Slides:** Create, Read, Update, Delete; filter by category
+- Live toast notifications
+- All changes reflect immediately on the public page
+
+### REST API
+| Endpoint | Method | Action |
+|---|---|---|
+| `api/categories.php` | GET | List all active categories |
+| `api/categories.php?id=1` | GET | Get single category |
+| `api/categories.php` | POST | Create category |
+| `api/categories.php?id=1` | PUT | Update category |
+| `api/categories.php?id=1` | DELETE | Soft-delete category |
+| `api/slides.php` | GET | All categories with slides (nested) |
+| `api/slides.php?category_id=1` | GET | Slides for a category |
+| `api/slides.php?id=5` | GET | Single slide |
+| `api/slides.php` | POST | Create slide |
+| `api/slides.php?id=5` | PUT | Update slide |
+| `api/slides.php?id=5` | DELETE | Soft-delete slide |
+
+---
+
+## Style Guide (from Moodboard)
+| Token | Value |
+|---|---|
+| Brand Primary (red) | `#c4351e` |
+| Brand Secondary (navy) | `#11324d` |
+| Brand Fourth (teal) | `#64b4c8` |
+| Font — Headings | Titillium Web |
+| Font — Body | Open Sans |