plsr / 25knots

A design helper for the busy student

25knots

25knots is a small application that aims to help people getting the basics in their design process right. This tool is aimed a people that usually wouldn't have the time or resources to engage design in their projects. This is not a tool for designers. If you use 25knots and think you could do better afterwards, the Tool probably isn't for you. However, you are very welcome to contribute!

The easiest way to use 25knots is visiting 25knots.de.

Contributing

I'm more than happy to have people involved in the development of this product, in any possible way. If you want to contribute, there are several ways to do so.

• Report a bug: If you noticed anything is off during you use of 25knots, just open an issue in this repository
• Propose a feature: If you feel like something is missing or would be a great addition to the Tool, pleas open an issue and describe what you'd like to see implemented. Conceptual request are just as welcome as design improvements or additions to the codebase.

Building the application

To build the application, first clone this repository

git clone https://github.com/Plsr/25knots.git

Afterwards, run

yarn install

and finally

yarn start

to get the app running on http://localhost:8080.

Running Storybooks

After completing the previous step, run

yarn run storybook

Storybook is now running on http://localhost:6006.

25knots's Issues

Just for logo uploading

Better experience when reloading the page

When the page is reloaded, naturally the redux state gets deleted, which kind of breaks the app (for the most parts, the app will still technically work, but lots of information will be lost).

I feel like there should be at least a warning when reloading the page, and then the user should be redirected to a useful state of the app (i.e. the start).
What would be even better would be to write the redux state to a cookie (or otherwise save it on the user), so that a reload wouldn't actually lead to any data loss.

Write down the calculations that should be done for typography

In order to refactor/rewrite that part of the app, I believe it's very helpful to first write the whole calculations down.

On Mobile Devices: Display an overlay that suggests using the app on a larger viewport

Also, for tablet portrait, there should be an CTA to rotate the device

Refactor typography calculations

The whole calculation of the typography is error prone, untested and not very understandable. I feel a refactoring of this is the best approach, maybe even a complete rewrite. This will probably be divided in multiple issues when further actions are defined, but for now, its just a reminder that something needs to be done here.

Persist redux store

Currently, I feel like the redux store should be persisted by default. If the user enters the page with the persisted store, the user should be asked if they want to continue with the persisted store or start over.

If the user has gotten to the summary and downloaded the PDF, the store should no longer be persisted. Not sure how this would work though, need to do some research.

(Second part to #13)

Move away from own eslint rules and use predefined ones

There are a lot of people (or collectives of people) that are smarter about javascript then me, so I probably should just use their linting rules. Should probably go with the Airb'n'b linting rules.

This will probably be a rather big PR since basically every file might need changes. ugh.

Adapt Main Navigation to actual design

The Navigation is currently not implemented the way it was designed. On the way, it could probably also use some refactoring.

Add Favicon

There is no Favicon in the app as of now, which is not cool. First step is making one and then including it in the app.

Add option for users to name their projects

This should be part of the onboarding process. This would allow us to also add that name to the pdf generated and the summary

Remove Responsive Websites from the selectable scopes

Since it currently provides no advantage at all to select "responsive website" from the menu, it should actually not be there. It can be added again when the functionality to provide value to the user is implemented.

Typography: Always enable button but display warnings if errors present

Right now, the user can only go to the next step if all errors are gone from the typography screen. I don't really like that since it removes a lot of options from the users. Maybe they have a good reason to do some things the way they do, even if the Applications thinks its not the best way.

There should be an overlay of some kind displayed when the user wants to leave the page with pending errors informing them about that fact, with the possibility to force the way forward or to stay and fix the errors.

Upgrade React and other dependencies

Fix linting errors

There are still numerous linting errors on build. yarn run lint does not provide any erorrs. Anyhow, these should be fixed.

Remove server from project

There is a small server file living inside the project that was used to be able to host the project from heroku. Since hosting was switched to netlify, the server and the express dependency is no longer needed. Also, the dist folder does not need to be checked in to git.

Redirect to root path if no scopes are selected

Currently, if one reloads the app in any step other than the setup, the app will render something, but it will be rather useless. There should be a component that checks if scopes are set and redirects to root if none are present.

Initial research on text sizes for mobile devices

First steps needed to build a better experience to finding text layouts on mobile devices. Some initial research must be done on what text widths and font sizes do best on mobile devices. Surely, the currently used calculation cannot be used here.

This issue will be used as a hub for the done research for now, later there should probably a wiki entry for the results.

Scope summary should be a distinct component

The exact same code for the scope summary (which lists all scopes the user selected in a visual representation) is used in the SetupSummay and the Summary component.