Design comparison
Solution retrospective
This represented my final intellectual exercise before learning a framework. After a few weeks of planning I decided to diverge from the original design in the following ways: >
- Requiring a user to create an account to use the application represents a significant emotional and time investment which may lead to a subsequent loss in traffic. To address this, I disrupted the application flow by allowing a user to interact with the app in every way without the need for creating an account. An account is only required when a user wishes to generate and share their own unique link.
- Due in part to the divergence from the original projects logical flow as well as my personal dislike of the original UI/UX, I chose to redesign certain UI elements and include some custom assets. These changes culminate mainly in the form of a custom color scheme including brand color, navbar changes both to desktop and mobile devices as well as custom notifications.
- This project implements data persistence using the browser's local storage as well as Supabase's database-as-a-service.
In part as an intellectual exercise and despite the performance implications, I decided to diverge from a single page application and instead implement a multipage web application. This required me to manage state across multiple pages which I achieved thanks to a Local Storage class. This separation of state from the database required further implementation of a version control system to sync data from the cloud and the client's local storage. This project also provided me my first opportunity to create and interact with a SQL database of which I have learned a great deal.
What specific areas of your project would you like help with?My next steps include grinding leetcode as if it were ranked League of Legends as well as developing further projects in Angular. I anticipate great things in the near future and I can not wait to share them with you.
Community feedback
- @NeoScripterPosted 2 months ago
Redesign is stunning! Great work! I noticed a few things that I'd like to point out to: 1) The profile section: when I'm not logged in, I'm still able to enter data and upload files. However, it doesn't persists and when I renew the page, the data disappears. I think it would be better to make this section accessible only to signed up users or make some notification that the data will persist only if you're logged in. 2) The same goes to the preview section. When I went there, I didn't understand at first what it was supposed to do and why was it empty. 3) The same goes to the links, I added three links without logged in and aftre I renewed the page, they all disappeared. Some user might find it frustrating, so it's important to let them know that data will persist only if they are logged in. 4) The validation keeps telling me that the password is too short even after I made it 12 characters. I think it shows the wrong error message. 5) The file input doesn't have a file size limit, I managed to upload an image of 6 mb without any problems. You need to set a size limit, otherwise someone can crash your server by uploading a gigantic file. 6) It would be nice to add the view button for the password in the form as I can't check that I spelled it properly now. You can do in JS by toggling the input type from text to password.
Other than that, great work, I really like it!
Marked as helpful1@Geo-BoldPosted 2 months agoHi Ilya @NeoScripter
Thank you for taking the time to analyze my work.
User data is persistent whether or not they are logged in. When a user is logged out the data is stored locally in Local Storage. Create a link, add a valid url and press save. If it is not saving for you, it may be due to your disabling this browser feature.
I have checked and rechecked the form validation for both creating and logging in and am unable to recreate your invalid prompt for having the required number of characters.
As for your QoL improvements, I just implemented a file size limit as well as limitation on file type. Additionally you can find an icon toggle for the password input types.
If you have the time, reach out on my website and we can have a chat about development. Your feedback is greatly appreciated!
Geo
0@NeoScripterPosted 2 months ago@Geo-Bold Okay, I checked again. When I go to the login section, if I enter the wrong email and short password and click submit, it tells me that the password is too short. Then if I make it longer, no matter how many characters, it keeps telling me that it's too short. You can try it to see for yourself. But, again, it's just a minor thing that I noticed, overall, your project, especially the desing part, is really impressive.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord