Is your feature request related to a problem? Please describe.
Users need to manually input information that could be imported automatically.

Describe the solution you'd like
Implement LinkedIn API integration to import user details such as contact info, possibly extending to experience and education if allowed by API permissions.

Describe alternatives you've considered
Import from other professional networks like GitHub or a resume uploaded in a standard format.

Additional context
NIL

Possible Implementation
Use the LinkedIn API to fetch user data and auto-fill corresponding fields in the resume builder.

Benefits
Streamlines the resume creation process by reducing double-work, enhancing user convenience.

Risks
API dependency and data consistency issues.

Describe the Bug
On load, the browser Console returns the following error message:

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

Based on current testing, this bug does not affect regular use, but should still be preemptively eliminated.

To Reproduce
Steps to reproduce the behavior:

1. Load webpage
2. Check Chrome DevTools Console

Expected Behavior
Aiming for no errors on page load, and throughout navigation and usage.

Screenshots

Environment (please complete the following information):

• OS: MacOS Sonoma 14.4.1
• Browser: Chrome
• Version: 124.0.6367.119 (Official Build) (arm64)

Additional Context
This affects CustomiserOther, CustomiserGeneral and CustomiserNonGeneral components. Focus particularly on the useState() hooks, for initialisation and updating of state variables.

Is your feature request related to a problem? Please describe.
Some users need to showcase certifications relevant to technical fields.

Describe the solution you'd like
Provide a dedicated section for users to list certifications, including issuing authority and validity dates.

Describe alternatives you've considered
Integrate with LinkedIn to pull certification data.

Additional context
Typically, cloud computing certifications are the most relevant, if not one of the only relevant ones in tech for the time-being.

Possible Implementation
Design a new UI component that allows adding, editing, and arranging certifications.

Benefits
Enhances the resume’s appeal to recruiters in technical fields.

Risks
Complexity in verification and updating of certifications.

Is your feature request related to a problem? Please describe.
Ensure the website is accessible to all users, including those with disabilities.

Describe the solution you'd like
Implement accessibility standards such as ARIA roles, keyboard navigability, and screen reader support.

Describe alternatives you've considered
Progressive enhancement to add more features over time.

Additional context
Refer to attached report summary - summary.pdf
Critical issue:

• Elements must meet minimum color contrast ratio thresholds (Success Criterion 1.4.3 Contrast (Minimum)) -- This is for Customiser subcomponent headings.

Good-to-fix issues:

• Document should have one main landmark (Rule ID: landmark-one-main)
• Page should contain a level-one heading (Rule ID: page-has-heading-one)

Items that need review:

• IDs used in ARIA and labels must be unique (Rule ID: duplicate-id-aria) -- This is for id of components used in multiple places, E.g. id="orgName"
• Elements must meet minimum color contrast ratio thresholds (Success Criterion 1.4.3 Contrast (Minimum)) -- This is for dialog box text content.

Possible Implementation
Audit done using Purple-A11y, summary attached above.

Benefits
Expands user base and compliance with web accessibility standards.

Risks
Requires ongoing commitment and potentially redesigning existing components.

Describe the Bug
Document object API methods like document.querySelector("") should not be used in React apps, as it could lead to unexpected behavior like race conditions, poor web accessibility, and inefficient re-renders. While there are no reports of such issues affecting UX yet, this is a pre-emptive bug report.

To Reproduce
Steps to reproduce the behavior:

1. On Page Load, enter details into the 'General' tab for the Customiser component. Minimally, the 'First Name', 'Last Name', 'E-Mail' and 'Mobile No.' fields must be filled.
2. Click on 'Save'
3. Notice that the 'General' tab closes by itself. This behavior is currently enabled by using document.querySelector on the 'General' tab <details> element, and removing the open attribute.

Expected Behavior
As mentioned in the description above, there has been no reports of adverse behavior. This is a pre-emptive bug report to align the code base with React best practices, and to avoid any not-yet-faced issues, in particular web accessibility and re-render inefficiencies, which are less visible.

Screenshots
N.A.

Environment (please complete the following information):

• OS: MacOS Sonoma 14.4.1
• Browser: Chrome
• Version: 124.0.6367.119 (Official Build) (arm64)

Additional Context
NIL

Is your feature request related to a problem? Please describe.
Users might not remember or consider all relevant skills they possess.

Describe the solution you'd like
Create a dynamic skills database that suggests skills as users type, while allowing flexibility to add new skills to their list - without writing to the database.

Describe alternatives you've considered
Static list of skills without auto-complete.

Additional context
Add any other context or screenshots about the feature request here.

Possible Implementation
Use a combination of a pre-populated list and an algorithm that learns and suggests based on user input frequency.

Benefits
Assists users in effectively showcasing their skills.

Risks
Balancing the extensiveness of the skills list with relevance and usability.

Describe the Bug
Every time the resu-me App is run, it returns a single error regarding the web manifest. There is no observable impact on performance or usability.

To Reproduce
Steps to reproduce the behavior:

1. On webpage load, check Chrome DevTools Console.
2. See error in site.webmanifest [1:1]

Expected Behavior
No observable difference, but do not expect to see the error in the Console.

Screenshots

Environment (please complete the following information):

• OS: MacOS Sonoma 14.4.1
• Browser: Chrome
• Version: 124.0.6367.119 (Official Build) (arm64)

Additional Context
As far as I know, this issue is caused by missing information in the web manifest.

Is your feature request related to a problem? Please describe.
Non-English speaking users may find it difficult to use the application.

Describe the solution you'd like
Implement localization to support multiple languages, starting with major global languages such as Spanish, Chinese, and German.

Describe alternatives you've considered
Provide a simple translation guide or use browser-based translation tools, though these may not be as accurate.

Additional context
Technical terminology might need careful translation to maintain accuracy - particularly the auto-fill skills suggestion.

Possible Implementation
Use a library like i18next for React to manage translation files and switch languages based on user preference.

Benefits
Expands the user base by accommodating non-English speakers and enhances user experience.

Risks
Translation quality and maintenance of multiple language sets can be challenging and resource-intensive.

Is your feature request related to a problem? Please describe.
Users need the ability to save their resumes and return later to edit them. This is long-term persistence, as opposed to saving for accidental tab/browser closure.

Describe the solution you'd like
Implement user authentication using OAuth with options for Google, LinkedIn, and GitHub. This will enable users to create accounts and save their work.

Describe alternatives you've considered
Basic email/password authentication, authentication via other social accounts like Facebook or Twitter.

Additional context
OAuth provides a secure and straightforward way for users to log in without managing passwords.

Possible Implementation
Use Passport.js for OAuth integration in the Node.js environment.

Benefits
Enhances user experience by providing the ability to save and revisit resumes.

Risks
Managing data privacy and securing user information.

Is your feature request related to a problem? Please describe.
Not necessarily a problem per se. This project was created before I understood the long-term benefits of maintaining a type safe TS project over a JS one. This feature request is being raised to migrate the entire project to use TS before further development.

Describe the solution you'd like
Install and implement TypeScript in this existing JavaScript Vite project. This is part 1 of 2.
Part 1 involves the set-up, installing of necessary packages, adjusting config files and entry file.
Part 2 involves the migration of components from JSX to TSX.

Describe alternatives you've considered
NIL

Additional context
This is a pre-emptive feature that, ideally, should be done before further development - so as to keep the migration as simple as possible.

Possible Implementation
Refer to this post for guidance.

Benefits
Reduce bugs that make it to production, improve code quality, expand IDE support, and enhance developer productivity

Risks
NIL

Is your feature request related to a problem? Please describe.
Continuation of Issue #12 , which covered the set-up for TypeScript migration. This new issue is created for the migration of React components from JSX to TSX.

Describe the solution you'd like
All React components to be written in TSX.

Describe alternatives you've considered
NIL

Additional context
This is Part 2 of 2, which involves the migration of React components to use TSX from current implementation using JSX.

Possible Implementation
NIL.

Benefits
Reduce bugs that make it to production, improve code quality, expand IDE support, and enhance developer productivity.

Risks
NIL

Is your feature request related to a problem? Please describe.
Depending on one's extensiveness of working experience, there is a need for reordering a resume's sections.

Describe the solution you'd like
Begin with a default order, and allow the end-user to reorder them as needed prior to export.

Describe alternatives you've considered
Provide presets for section ordering. However, I think we can keep it flexible to accommodate wildly unique resume preferences and requirements.

Additional context
NIL

Possible Implementation

1. Add a useState hook to declare a default section order (General Info, Education, Work Experience, Skills, Projects).
2. Use the state variable to render the sections in the specified order.
3. Add buttons on each Viewer section, one "UP" and one "DOWN".
4. Add a function to reorder the section order and return the new order.
5. Hook these buttons up to call the function in Step 4, and pass the new section order to the updater function; re-render accordingly.

Benefits
This will allow users to customise the section order of their resume, to better align with the requirements of the particular job they are applying for.

Risks
This adds some complexity to the App, but the default section order should sufficiently meet the needs of most users.

Is your feature request related to a problem? Please describe.
Yes, due to varying screen sizes, in particular mobile devices, it is not feasible to display the Viewer component text in sizes relative to width, as the resulting text will be too small to read. As such, adding the ability to export PDF is essential for users on all devices to fully utilise this tool.

Describe the solution you'd like
I would like a 'Generate PDF' button. This will generate the A4 PDF and open in a new tab, and the user has the option there to zoom, navigate around, and download.

Describe alternatives you've considered
Exporting the HTML directly as rendered, however this will require the user to manually convert it to PDF, which is undesirable from a UX-standpoint.

Additional context
NIL

Possible Implementation
There are a couple of JS libraries that allow client-side PDF rendering to consider:

1. diegomura/react-pdf
2. PDF.js

Benefits
This is an essential feature for the resu-me App to be useful to users, otherwise it merely displays a (possibly oddly-scaled) render of their resume.

Risks
Not necessarily a risk, but I can foresee this feature requiring rather extensive work to be done to prepare the 'document' for exporting as PDF.

Describe the Bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Fill up the 'General' section in Customiser.
2. Click on 'Save'.
3. On desktop, see in Viewer that the ViewerGeneral component text block does not take up the full width, screenshot attached.

Expected Behavior
With the addition of the container for the Up/Down buttons in #2 , the sibling ViewerGeneral component should still maintain its full width so that its enclosed text block, when center-aligned to its container, is also center-aligned with the rest of the document.

Screenshots

Environment (please complete the following information):

• OS: MacOS Sonoma 14.4.1
• Browser: Chrome
• Version: 124.0.6367.93 (Official Build) (arm64)

Additional Context
NIL

Describe the Bug
On page load, the is an error in locating and loading the site manifest. This shows up in the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to Link
2. Open Chrome DevTools
3. See error in console

Expected Behavior
There should be no errors on page load.

Screenshots

Environment (please complete the following information):

• OS: MacOS Sonoma 14.5
• Browser: Chrome
• Version: 125.0.6422.142 (Official Build) (arm64)

Additional Context
NIL

Is your feature request related to a problem? Please describe.
Lack of data on how users interact with the application and which features are most popular.

Describe the solution you'd like
Implement analytics to track user interactions, feature usage, and resume download counts.

Describe alternatives you've considered
Use basic server logs to track downloads without detailed analytics.

Additional context
Add any other context or screenshots about the feature request here.

Possible Implementation
Integrate Google Analytics for a comprehensive view or a privacy-focused alternative like Plausible Analytics.

Benefits
Provides insights into user behavior and feature effectiveness, informing future improvements.

Risks
Privacy concerns, requiring clear communication with users about data collection and usage.

Describe the Bug
The 'Mobile No.' in the 'General Info' tab

To Reproduce
Steps to reproduce the behavior:

1. Go to Link
2. Fill the 'General Tab' accordingly.

• Note that First Name, Last Name, Email, and Mobile are required fields.

3. Click on 'Save'
4. See error

• Note that the Mobile No. is not being rendered by the Viewer component (Right side for Desktop, Below for mobile)

Expected Behavior
Once a valid mobile number is entered in the form, and 'Save' is pressed, the formatted mobile number should be rendered by the Viewer component.

Screenshots

Environment (please complete the following information):

• OS: MacOS Sonoma 14.5
• Browser: Chrome
• Version: 125.0.6422.142 (Official Build) (arm64)

Additional Context
I suspect that the null value assigned to mobile is also causing the Viewer component to render a stray | even before the form is filled.

Is your feature request related to a problem? Please describe.
Prevent data loss from browser crashes or accidental navigation.

Describe the solution you'd like
Utilize browser LocalStorage to auto-save user inputs as they fill out their resumes.

Describe alternatives you've considered
Use cookies or session storage, but these may be less persistent.

Additional context
NIL

Possible Implementation
Implement a debounce function that saves input fields’ state to LocalStorage after a pause in typing.

Benefits
Improves user satisfaction by ensuring work isn’t lost.

Risks
LocalStorage limitations on data size and potential performance impacts.