feat: Redesign UI

[Rakshit-gen]

Is your feature request related to a problem? Please describe. The UI of website looks really simple.

Describe the solution you'd like We can make it better by adding simple gradients and reactive components.

Describe alternatives you've considered Adding gradients and transitions.

Additional context Please assign this issue to me I am a GSSoC '24 contributor.

[SanaAzeem512]

please assign this issue to me under GSSOC24

[abhijeetnishal]

Hey @Rakshit-gen, do you have nay reference UI you are planning to design, share so we will discuss.

[Rakshit-gen]

Sure @abhijeetnishal I'm out of the town for now I'd surely share it tommorow with you. Around 3 pm!

[kauxp]

Hi, can you please assign this issue to me. I have a reference design ready, I am updating it to incorporate user login and auth. I can also discuss and update the design as required.

OLD DESIGN

[kauxp]

Hi, I have actually updated this design keeping in mind some new features that might pop up and be helpful. Again, I can update and change the desing as an when required.

Light Theme

[abhijeetnishal]

Hey @kauxp, we don't have many features currently as the reference UI do you have any other designs which looks more modern these UI looks little old.

[kauxp]

Hello, the features I have listed are like placeholders, we can surely change this to features which are available on the app.

If the designs seem old, I will share new designs with you.

[abhijeetnishal]

Great. I will also share if I will get some design

[abhijeetnishal]

We can take inspiration from this also https://v0.dev/r/g2jnBODYORb but it's not complete. You can share also if you get some.

[kauxp]

okay, I will look for designs online. I am also working on some designs by myself, I will submit them by tomorrow morning. Please have a look at them and let me know if they are good enough.

[abhijeetnishal]

Ok sure @kauxp Just curious to know, you will design using Figma or some other tools?

[kauxp]

Yes, I use Figma.

[kauxp]

Hey, what do you think about this design? The text here is boilerplate, we can change it later.

[abhijeetnishal]

Hey @kauxp, This design looks good to me, you can use this. It is responsive or not? You are designing the the about, contact pages also? Just asking for adding level if you are working on others pages also then it will be level2.

[kauxp]

Hello, this will be responsive. I'll share the mobile designs, and yes I'll design the About and Contact pages as well.

Also, I want to work on some of the server implementations after this is created for which I'll create separate issues.

One thing I wanted to know, since you mentioned designing. Do I have to only design these pages, or do I have to code it as well, and for coding, should I create a separate issue and leave this as a UI/UX design issue.

[abhijeetnishal]

Great, if possible share the contact and about designs also.

Server side is already implemented. Client side is required.

No you have to code, design is just for reference and validation.

If you have any queries let me know.

[kauxp]

Hello, I will share the designs for the about and contact page as well.

[kauxp]

Contact page for the website

[kauxp]

for the about page, I'll need some content. Do you have anything specific in mind?

[abhijeetnishal]

Hey @kauxp, use this one:

About Us

Welcome to Short.URL, an open-source URL shortener designed to provide fast, reliable, and customizable link shortening services. Whether you're sharing links on social media, in emails, or in chat messages, our service makes it easy to transform those lengthy URLs into sleek and manageable short links.

Our Mission Our mission is to provide a powerful yet easy-to-use tool that empowers users to take control of their links. We believe in the power of open source and the community-driven development process. By making [Project Name] open source, we invite developers from around the world to contribute, improve, and innovate, ensuring that our tool remains cutting-edge and accessible to everyone.

Why Choose Short.URL?

• Open Source and Free: Our project is fully open source, which means it's free to use, and anyone can contribute to its development.
• Community-Driven: Join a vibrant community of developers and users who are dedicated to improving the project.
• Secure and Reliable: Built with security in mind, ensuring your data is protected.

How It Works Using Short.URL is straightforward:

• Enter Your URL: Paste your long URL into the input field on the homepage.
• Shorten: Click the "Shorten" button to generate your short link.
• Share: Copy and share your new short URL anywhere.

Contribute We welcome contributions from the community! Whether you're a seasoned developer or new to coding, there are many ways you can help:

• Report Bugs: Found a bug? Let us know by opening an issue on our GitHub.
• Submit Pull Requests: If you've made improvements or added new features, submit a pull request.
• Spread the Word: Share Short.URL with your network to help us grow our community.

Contact Us Have questions or need support? Reach out to us: Email: short.url.dev@gmail.com GitHub: https://github.com/abhijeetnishal/URLShortener

Thank you for choosing Short.URL! Together, we can make URL shortening simpler and more powerful.

[kauxp]

Thanks for this.

I'll also make sure to update the contact page accordingly.

[abhijeetnishal]

Now you can start working on this as we discussed everything. If you need any help let me know.

[kauxp]

Hello, I wanted to understand how levels work in GSSOC. I believe this should be a level 3. Can you please help me with this?

I'll be adding the FAQ, about, and contact pages along with the home page. I'll also add the login and signup page.

I have started working on this, I'll raise the PR by tomorrow EOD.

[abhijeetnishal]

This is level2 issue. There is no separate FAQ section currently we don't have much things as basic things are explained in about only as I already share the above. So it's about, contact and home page. Login signup are already there just go to route /auth/login.

Talking about the levels level3 issue should be major code change like migration e.g. https://github.com/abhijeetnishal/Password-Shield/issues/51 You can refer this one, it also consists of unit tests.

You can go through gssoc guidelines to understand levels.

If you have any queries let me know.

[abhijeetnishal]

Hey @kauxp, so you are planning to work on this issue or still confused with level.

[kauxp]

Hey, actually I am done with code. You can take a look at the website here and let me know if you have anything in mind.

Desktop

WebsiteDesktop.webm

Mobile

WebsiteResponsive.webm

[abhijeetnishal]

Hey, the UI looks good, but couple of things that needs to be done:

• we should give the option to shorten the URL at home page in hero section with basic features as not everyone wants to login and shorten the URL so we should give that option to.
• Also specify that some features like qrcode, url save functionality is only for logged in users only, at home page only shortened URL it will show.
• Also the contact page should contain the contact form so that uses can contact rest it will be in about.
• About page is also present with the contents I shared with you earlier.
• Remove the features that we are not providing from the home page and footer. We will have have qr code and url save functionality in future so add these features for now later we will add analytics and all.

[YukiP7]

Hey @kauxp @abhijeetnishal Can I assist you with the website UI? I am participating as a contributor to GSSOC. Please feel free to assign me any work in Frontend Web Development and label it accordingly.

[abhijeetnishal]

Hey @kauxp, are you working on this as @YukiP7 is interested in this issue.

[YukiP7]

@kauxp If you have been done with the home page UI then I can help in making other pages like sign up , login or about page .

[kauxp]

The login and sign-up page are already present, and I have already implemented the about.

[abhijeetnishal]

The login and sign-up page are already present, and I have already implemented the about.

Great @kauxp, have you created PR for the implementations you have done?

[abhijeetnishal]

Hey @kauxp, if you are not working let @YukiP7 work on this I don't want to delay as this enhancement is much needed for this project as many issues are pending due to this. Also there is strict guidelines from gssoc as I given enough time to work.

[kauxp]

I'll raise a PR today.

[sivaprasath2004]

@abhijeetnishal assign me..

[TechSenseiX]

@abhijeetnishal Can you please assign me issue

[abhijeetnishal]

Hey @TechSenseiX and @sivaprasath2004, @kauxp is working on this. Contribute to other issues.

[sivaprasath2004]

@abhijeetnishal , in this issue created at May 14, this is long days .so would you please assign me...

[sivaprasath2004]

I will be finished it...

[abhijeetnishal]

Hey @sivaprasath2004, I understand the time @kauxp has taken to complete this issue. It's totally unethical. But I have given him to make changes, i guess he will do the changes as don't want his work to be wasted.

Hey @kauxp, finish this issue asap

[kauxp]

I committed the changes yesterday, please review them.