nader-eloshaiker/screen-geometry-app

Easy to use screen comparison app

screen-geometry-app's Issues

Create screen form with light mode text

Text in the create screen panel is not easily readable when in light mode. Need a color theme for text in light mode that has better contrast.

Edit table entry

Users need to be able to edit an entry instead of deleting and recreating.

Write Component and Unit tests

Write component and unit tests using Vitest

Version bump in CI?CD

Require an automated process for version bump and version tags

Should be implemented in GitHub actions and make use of comit messages to determine the version bump. I ideally it will continue to use the version prop in the package.json

Resizing window height can cause infinite loops in screen comparison panel

Resizing the height can cause the screen comparison panel to go into an infinite loop when the scrollbar appears.

Random colour generator

Allow the user to generate a new colour for a screen using a random generate button in the form.

Support react routing

Directly routing to a page inside the app returns a 404. Either need to consider using hash routing or url rewrites.

Google Analytics

Implement google analytics for web-vitals

Release Automation

Automate release process using GitHub Actions

The release process should

• publish the app asset to GitHub releases
• include the release tag
• merge to main
• initiate the cloudflare publish to production

Deploy assets to github pages using actions

Integrate with github actions

Use github actions to build and deploy app to github pages.

Resizing browser height causes jitter in screens page

Describe the bug
Resizing browser height causes jitter in screens page

To Reproduce
Steps to reproduce the behavior:

1. Go to screens page
2. Resize the height of the browser
3. At a certain height you will see an endless loop of scrollbar appearing and disappesring

Expected behavior
No jitter

Highlight route in navbar

Navbar menu items should highlight if they represent the current route.

Use alias imports

Implement alias imports in preparation for migration to turborepo.

StoryBook

Implement storybook

Update tailwindcss to latest version

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

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Format Error Page

Error page is currently just a place holder, needs to be integrated with the app's styling.

Load default list

Create a button to load a default list of screen when there are no screens in the table

Add a smoke test

Select an e2e framework (investigate whether cypress is still the right choice) and implement a smoke test as part of the CI/CD pipeline.

Reset search

Reset button in create screen form doesn't reset the search input

Add dark and light colors for screen panels

Switching themes can sometimes wash out the colours of the screen panels. Create a dark and light pair for each panel so that toggle with the theme.

Create static content

Create the static content for the pages

Create help page

Page required a step by step guide on how to use the app

Refactor API Calls

Refactor API calls to reduce code duplication. Currently, all follow a standard template with using the notification service. Abstract out notifications into a wrapper and use a simple config for each api function.

Point domain name to app host

Ensure the domain name is using the dns host when app is deployed

Refactor to support removal of develop branch

Now that the develop branch is deleted, need to modify the github actions to support working with the main branch.

Implement search backend

Input field padding for up/down buttons

Screen form loading spinner on buttons

Creating a screen will show spinner only on the cancel button and cancel button doesn't get disabled while spinning while the remaining buttons do.