Frontend Development for a Cancer Scientometrics Web Application Using Next.js

Frontend Development for a Cancer Scientometrics Web Application Using Next.js
Project Description:
This project involves developing the frontend for a web application centered around cancer scientometrics - a research field focused on measuring and analyzing scientific publications related to cancer.

Requirements:
Technical Specifications:
- Use Next.js for frontend (backend developer works with React)
- Make web application responsive to work on both desktop computers and mobile
- Apply anti-spam methods and injection attack filters on forms
- Use best practices for security, including obfuscating engine fingerprints (Next.js, React)
- Ensure SEO-friendliness, include meta keywords and descriptions, consider expand/collapse GUI parts SEO impact
- Remember user choices for main GUI expansion/collapse states with cookies, with option to turn off via backend
- Incorporate favicon in the web application
- Implement easy customization of aesthetic elements (colors, sizes, fonts, etc.) via CSS and/or Next.js configurations, to be used by our backend programmer
- Implement logically-named variables for seamless integration with our backend

Design and UX Specifications:
- Keep design language close to provided sketches; general atmosphere is a technical data product
- Home link on the Home sketch, consider making the site title to be the Home link on the Home and/or main GUI, based on aesthetics and space limitations
- Implement the header and footer on the main GUI as well, even though they are not drawn in the main GUI sketch, the design should be consistent across the application
- Implement light gray even-odd data line coloring in the main GUI to enhance user readability and assist eyes in tracking long lines from label to value
- Align data values to the right side, ensure consistent design
- Underline links to pages; no underline for expand/collapse
- Incorporate a copyright text line at the bottom of each page, ensure it's unique for each page, define variable for backend programmer
- Footer links, allow 2-3 lines of textual links for more various links at the bottom. Header links are just a few.

Content Structure:
- Home
- About
- Donate
- Contact (simple form)
- Privacy
- Licenses

Design Sketches:
- Photo of paper sketch of Home: sci_005_home.jpg
- Screenshot of main GUI (DOI page): sci_005_main_GUI_DOI_page.png
- sci_005_middle.txt for use with Sublime Editor (tab = 2)
- sci_005_right.txt for use with Sublime Editor (tab = 2)

Specific Instructions:
- Implement Cookies popup (easy to decide choice of buttons)
- Implement non-standard behavior of some tree components (expand/collapse), for example Abstract object that shows more text upon expansion (not usual sub-branch), this behaves like "more"
- Do not implement Altmetrics section and Support parts in the main GUI - they are not ready yet
- Simplify "data & formulas", "data & algorithms", and similar sub-branches. Include dummy text objects of three lines in these sub-branches, no more sub-branches inside
- Perform desktop validation via validator.w3.org and mobile validation via W3 Mobile