bgwebagency / redesigner.io Goto Github PK

Need to create a new design of the current platform for a better looking platform.

The current design is a bit amateur.

You can get the sun and moon icon from react-icons or hero-icons and change the tailwind theme from dark to light

Position the icon after the github icon

The goal of this task is to make sure all the js files are formatted properly.

Install husky and prettier. And activate pre-commit hook.

Please use the following prettier settings:

{
	"arrowParens": "avoid",
	"bracketSameLine": false,
	"bracketSpacing": true,
	"embeddedLanguageFormatting": "auto",
	"endOfLine": "lf",
	"htmlWhitespaceSensitivity": "css",
	"insertPragma": false,
	"jsxSingleQuote": false,
	"printWidth": 80,
	"proseWrap": "always",
	"quoteProps": "as-needed",
	"requirePragma": false,
	"semi": false,
	"singleAttributePerLine": false,
	"singleQuote": true,
	"tabWidth": 2,
	"trailingComma": "all",
	"useTabs": true
}

Create a "prettier" script to run on all .js, json, jsx and tsx files
ex: "prettier": "prettier \"**/*.+(js|json|ts|jsx|tsx)\"",

Create a "check-format" script
ex: "check-format": "npm run prettier -- --list-different",

Add "check-format" script to pre-commit file
ex: npm run check-format

Add a "format" script to help us format all files at once
ex: "format": "npm run prettier -- --write"

If you need any clarification or help on how to implement this, please leave your comment here or on our discord server

• Install jest, React testing library
• write unit tests for Header.tsx component

Help URL: https://nextjs.org/docs/pages/building-your-application/optimizing/testing

Maybe it's worth to describe in README for beginners how to configure .env to run applications locally. And of course not to push the .env to the repository.

Hey kirandash,
I'm adding this new, please assign it to @/GrumpyArdias

I've noticed that the readme does not have info about how to start the app.

Currently the footer icons are aligned to the right. Please align them to the center

Add unit tests for footer component

URL: https://www.redesigner.io/building

Currently building themes are represented by text.

We need to create images to represent each theme.

• pick image of a house from unsplash. Make sure the image is free for use by choosing free license filter
• use our app to redesign the same house in all different themes.
• check if result is clean. If not, try another image from unsplash
• name all images in the format ${building}-${theme}.jpg ex: house-rustic.jpg, house-minimalist.jpg and so on
• And then use some image editing tool to resize al images to 100 x 100 size and then upload them to /public folder

Only reproducible on localhost at the moment

steps to reproduce: start dev server and refresh home page.

Hey,
I've notice you do not have absolute imports so i would like to help adding it to the project.
Cheers.

Please add the missing tests related to theme switching for Header component

Only reproducible on localhost

After clicking on the button to redesign a room or a building, this process could take a while.

It could be convenient to add a spinner or a progress bar.

Current:

Expected:

Please replace the buttons with their respective images which can be found in /public folder and please add the theme name right below it.

Changes should be done in ThemeSelector.tsx file.

URL: https://www.redesigner.io/room

Currently room themes are represented by text.

We need to create images to represent each theme.

• pick image of a living room or bed room from unsplash. Make sure the image is free for use by choosing free license filter
• use our app to redesign the same room in all different themes.
• check if result is clean. If not, try another image from unsplash
• name all images in the format ${room}-${theme}.jpg ex: bedroom-rustic.jpg, bedroom-minimalist.jpg and so on
• And then use some image editing tool to resize al images to 100 x 100 size and then upload them to /public folder

Fix any of the following:

Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element's default semantics were not overridden with role="presentation"
Element's default semantics were not overridden with role="none"

With the implementation of Husky, I think it will be a good idea to make a tutorial about how to make a commit, I'found some truble doing it! becuase it's a bit more comples than a regular commit

Hi, I found a error:

Originally posted by @GrumpyArdias in #7 (comment)

Currently the light theme is default and user can use the toggle switch to switch between themes

Change Request:

• The default theme should be based on users default color scheme (can use media query prefers-color-scheme)
• If user uses the toggle theme button, please save the selected theme details in IndexedDB and now if user loads the page, the selectedTheme should load from storage

Packages to use: https://github.com/dexie/Dexie.js for IndexedDB wrapper and https://www.npmjs.com/package/fake-indexeddb for unit testing

• install playwright
• write e2e test to check that button and title are visible on landing page

Docs: https://commitlint.js.org/#/

Please setup with husky to run commitlint on commit-msg hook

The foreground changes color accordingly to the theme (light or dark), but the GitHub icon at the top right corner is an SVG so it is always white, therefore it is almost invisible on the light theme.

Please replace this with the GitHub icon from the "react-icons/ai" library instead (like it is done for the icons on footer).

from home page, on clicking "Redesign room" the page navigates to https://www.redesigner.io/room

currently there is no loading indicator

Let's add a loader:

mhnpd.github.io/react-loader-spinner/docs/components/rotating-lines

same need to happen for other page navigations too

Reestructure the architecture of the components folder to be able to test it better and to have a cleaner code

Create a gif of the demo that shows image conversion for a bedroom from "modern" to "tropical"

and add it to the readme file

Currently the favicon says "RP", Please update it to "RD"

You can generate the favicon at: https://favicon.io/

You can use the following settings to generate the favicon:

Add type to the ErrorBoundary component

Currently the error widget is not styled properly

As a starter, it would be nice if we can at least align it to centre of the page.