git clone https://github.com/jody29/nerdy-tshirt-creator.git
cd nerdy-tshirt-creator
code .
npm install
npm start
The core functionality is that the user can customize his own t-shirt, put it in the shopping cart and order it.
To make sure that the core functionality works no matter what, I had to use as much HTML as I can. Also I had to validate the forms server-side, so it will still work when JavaScript is turned off.
I created a POST request that reads the JSON file and checks if there is allready a shirt existing with the same ID.
If the there isn't any shirt with the same ID, then it will push the body of the form to the array in the JSON file. This will look like this in the JSON file.
For the usable layer I added some styling to to my web page. I made sure that the labels had a :focus so that people who have no trackpad or mouse will still be able to use my application.
Because some browser don't fully support flexbox, I had to make sure that something else would happen if flexbox is not supported.
For the pleasurable layer I added a live preview of the shirt that the user creates. I also made sure that every change that the user makes will be stored in the LocalStorage. So when the user leaves the page and then comes back, he will be able to continue were he left off.
- customize shirt and add to cart.
- editing a shirt that has ben added to the cart.
- continue customizing when returning to the page.
- live preview of the shirt when user customizes it.
- Everything is enabled
- JavaScript and css are disabled
- Chrome 99 on MacOS Big Sur 11.6
- Safari 14 on MacOS Big Sur 11.6
- Safari 14 on Iphone with IOS 15.3.1
- Chrome 75 on Nexus 5 with Android 6
- Core functionality will always work.
- Flexbox is not fully supported on the Nexus 5. So had to use a @supports in CSS.
- When using safari, user has to set the tab function on in his preferences. This improves the accesibility if it's turned on.
- Pleasurable layer is available in every browser. But when Javascript and CSS are disabled, they're no longer available.
- Everything works fine and the user can easily customize his t-shirt
- User can navigate through the form with tab keys
- User can add the t-shirt to his shopping cart with no problems
- When styling is gone, the user can still use the application
- User can still navigate through the form with tab keys
- User can add the t-shirt to his shopping cart with no problems
- Everything works fine and the user can easily customize his t-shirt
- User can navigate through the form with tab keys (if he has this enabled via his preferences)
- User can add the t-shirt to his shopping cart with no problems
- When styling is gone, the user can still use the application
- User can still navigate through the form with tab keys (if he has this enabled via his preferences)
- User can add the t-shirt to his shopping cart with no problems
- Everything works fine and the user can easily customize his t-shirt
- User can add the t-shirt to his shopping cart
- Styling is gone and javascript are gone, but everything still works
- User can add the t-shirt to his shopping cart with no problems
- flexbox isn't fully supported, but core funcionallity is still working
- User is still able to add a shirt to his shopping cart
- Everything is working and the user can edit a shirt
- Because I gave the shirt a unique ID via the server, the user can still edit a shirt. If i would have stored in the localStorage, this wouldn't be possible
- Everything is working and the user can edit a shirt
- Because I gave the shirt a unique ID via the server, the user can still edit a shirt. If i would have stored in the localStorage, this wouldn't be possible
- Everything is working and the user can edit a shirt
- Because I gave the shirt a unique ID via the server, the user can still edit a shirt. If i would have stored in the localStorage, this wouldn't be possible
- flex isn't fully supported but user is still able to edit a shirt.
- Because I gave the shirt a unique ID via the server, the user can still edit a shirt. If i would have stored in the localStorage, this wouldn't be possible
- When leaving the page and returning, the user can continue where it left off.
- Progress is stored in the LocalStorage
- Because I used the LocalStorage, the user won't be able to continue where it left off if they come back to the page.
- When leaving the page and returning, the user can continue where it left off.
- Progress is stored in the LocalStorage
- When leaving the page and returning, the user can continue where it left off.
- Progress is stored in the LocalStorage
- Because I used the LocalStorage, the user won't be able to continue where it left off if they come back to the page.
- When leaving the page and returning, the user can continue where it left off.
- Progress is stored in the LocalStorage
- Because I used the LocalStorage, the user won't be able to continue where it left off if they come back to the page.
- User gets a live preview of the shirt that it is creating
- User no longer gets a live preview of the shirt that it is creating. But it still sees which color he has picked because the chosen label will have a different color. It can also see in the input which text it has filled in
- User gets a live preview of the shirt that it is creating
- User no longer gets a live preview of the shirt that it is creating. But it still sees which color he has picked because the chosen label will have a different color. It can also see in the input which text it has filled in
- User gets a live preview of the shirt that it is creating
- User no longer gets a live preview of the shirt that it is creating. But it still sees which color he has picked because the chosen label will have a different color. It can also see in the input which text it has filled in
- User gets a live preview of the shirt that it is creating
- User no longer gets a live preview of the shirt that it is creating. But it still sees which color he has picked because the chosen label will have a different color. It can also see in the input which text it has filled in