Muqtada's CSE3CWA Assignment 1 — Tabs Builder (Next.js + TypeScript)

Student: Muqtada Al-Abbooda · 21611156

(This is also like a checklist for me and guide)

Assignment Overview & Git Workflow

This assignment is part of my university coursework where I was required to build a Next.js/TypeScript project and use Git to manage the development process. I worked week by week, creating a new branch for each feature such as the layout, about page, navigation, and tabs. After finishing a feature, I merged it back into the main branch and deleted the feature branch to keep things tidy. I also added milestone tags (week-1-setup, week-2-about, week-3-nav, week-4-tabs) to mark my progress. This helped keep the project organised and made it easy to track what I achieved each week. Screenshots of the Git log, branches, and tags are included as evidence of this workflow.

The homepage generates HTML5 and JavaScript output with inline CSS (no CSS classes). This output can be copied and pasted into a blank file such as Hello.html and opened directly in a web browser.

Quick start/how to open web

npm install
npm run dev
# open http://localhost:3000

What this implements (This is a Marking guide for me)

User Interface (4 marks)

• Navigation bar (top), Header, Footer, and an About page
• Student number displayed in the top-left of every page (update on About)
• Breadcrumbs under the header
• Accessibility: ARIA roles, labels, keyboard support for tabs

Themes (3 marks)

• Light/Dark theme toggle with persistence (localStorage)
• Respects system preference on first load

Hamburger / Kebab Menu (3 marks)

• Mobile menu with CSS transform animation on the hamburger (lines rotate into an ×)

Tabs Page – operations (6 marks)

• Create up to 15 tabs with ＋ and －
• Headings editable, content editable (supports HTML)
• Tabs stored in localStorage
• Keyboard navigation (Left/Right)

Output Button (6 marks)

• Generates a single HTML file with only inline CSS (no classes) and minimal JS
• Copy or Download hello.html
• Presets for 1, 3, and 5 tabs to demonstrate in your video

GitHub (3 marks)

• Use this branching plan:
  • main
  • feature/theme-toggle
  • feature/menu-hamburger
  • feature/tabs-builder
• Make several small commits on each feature branch and open PRs into main
• Ensure .gitignore excludes node_modules
• Keep this README up to date with any changes you make

Cookies (Navigation memory)

The app stores a cookie cwa-last-route with the last page you visited. When you revisit /, it redirects you to that page.

About page requirements

• Your name
• Your student number
• A video link showing how to use the website (3–8 min). The video section will render your link in a <video> tag if it is a direct mp4; for YouTube/Stream include the link in the README as well.

Accessibility notes

• Tabs use role="tablist", role="tab", role="tabpanel" and aria-selected
• Buttons are reachable by keyboard; arrow keys change tab focus in the generated output

What to record for the video

1. Toggle Light/Dark theme
2. Show hamburger animation on mobile width (or narrow your browser)
3. On Tabs:
   • Add/remove tabs (show limit at 15)
   • Edit headings and content
   • Generate output and open the downloaded hello.html
4. Show presets: 1, 3, 5 tabs
5. Show cookie-based "remember last page" by navigating, reloading, and landing back on the same page
6. Mention accessibility features used

Submission

• Zip your repository (exclude node_modules)
• Include screenshots of your commits and branches
• Upload your video, code zip, and screenshots to LMS

---

Built by Muqtada for CSE3CWA Assignment 1.