Enhancement | Redesign the Landing page

[aadeshkulkarni]

This is an open-to-imagination ticket. You can use your creativity to craft an intuitive, minimalistic landing page that looks beautiful.

Constraints:

• Minimise use of third party libraries (You can use animation libraries like framer motion, gsap, threejs, lottie files, or anything else. But ensure that the page is lightweight and performant)
• The theme is minimalism, professional and easy on the eye. Consider colour-contrast-ratio and typography as well.
• Page should be responsive for mobile & desktop viewports

You can draw inspirations from existing blogging applications, dribbble.com and so on.

Current Landing page: https://medium-app-zeta.vercel.app/

[aayushtmG]

I would love to work on it!

[aadeshkulkarni]

Awesome. Please share your approach here.

[aayushtmG]

Will i dont have any specific idea for now,but i can surely work if theres something specific that needs to be done on it .

[techypants]

Hi @aadeshkulkarni , I would like to work on the landing page design. Approach would be to showcase a list of random/user specific list of articles, but reading them will be through protected route though login/signup. I can also work on a clustering program that will decide the taste of the user based on given values. K-Means clustering can be hardcoded or used with tensorflow.js (much like what medium does)

[aadeshkulkarni]

1. Interesting! 1.1 On what parameters would we cluster the users ? 1.2 And more importantly, are we recording any of those parameters in the backend at the moment ? Can you prepare the list ? 1.3 How would the app consume the K-means clustering algorithm ? Would it be an API that would be hosted or a script that will run within the API server or something else ?

   ---

2. showcase a list of random/user specific list of articles, but reading them will be through protected route though login/signup.

Yes, giving a sneak peak is a good idea to attract users. And reading the article via protected route is already implemented for /blogs to /blog/:id route. So, should be easier to accomplish since it's a solved problem.

---

3. What else should be inside the landing page of a typical blogging app ? Let us decide on the structure and then whoever decides to implement, can have the liberty to be creative within each section of the page structure.

For instance, here is a sample GPT generated response for you to consider:

A well-designed landing page for a blogging app should effectively communicate the app's key features, benefits, and unique value proposition.

Here's an outline of essential elements to consider: Headline: Craft a clear and concise headline that conveys the app's purpose, such as "Unleash Your Voice with [App Name]: The Ultimate Blogging Platform." Subheading: Expand on the headline with a brief description of the app's unique features or benefits, such as "Share your stories, connect with like-minded writers, and grow your audience effortlessly." Hero Image or Video: Use an engaging, high-quality image or video that showcases the app in action, such as someone using the app on their mobile device or a collage of various blog posts. Key Features: Present a list or grid of the app's standout features, accompanied by icons or illustrations. Examples include a user-friendly editor, customizable themes, social media integration, and analytics dashboard. Call-to-Action (CTA) Button: Include a prominent CTA button that encourages visitors to download the app, sign up for a newsletter, or explore more features. Use action-oriented text like "Download Now" or "Start Blogging Today." Social Proof: Display testimonials, user reviews, or notable press coverage to build credibility and trust with potential users. Footer: Include important links such as company information, contact details, terms and conditions, and links to your social media profiles. (here we can show the list of github contributors along with their profiles)

[techypants]

@aadeshkulkarni https://loss-reg.netlify.app/ As you can see in this above link, i made a linear regression loss function with p5.js. 1.1 For the clustering, we can have genres of articles -food, tech, politics, etc. Based on these ( and further as a continuous learning model ) we can have percentage of likeliness in each genre. The parameters or genres are just tags that people post their articles with, this way we don't have to deal with labeling the articles. 1.2 A mongodb cluster just for this particular use case, where each user id, genre is updated and this is fetched by the external python application or simply a JS script as a filter gate between our post api request. 1.3 A simple tensorflow.js script that takes all the calculated data of articles and calculates our passed parameters to then passing on to the DB cluster.

2. Yeah protected routes take like 5 lines to see if user authentication is done and we are good to go. I have mostly worked with Next-Auth so will have to see what is the case here.

3.1. What if we use a small chat bot with answers in options, based on these we can have the most suitable answer ( simply using multi-variable regression ) and give a list of our previously curated clustering list. 3.2 I will try to make the landing page more of an experience, like cursor following div, and intersecting inverted colors. 3.3 Also, the contents can be made dynamic by not keeping the input limited to text, we can use AWS S3 to store images and files that can be embedded in our article page.

[aadeshkulkarni]

@techypants - Sounds promising. Tags / topics is still an open ticket and is yet to be implemented. We would need to record user behaviour as well. I have noted the clustering program down and will create a ticket when the dependent features are functional and the app is ready for it.

Until then, let's shift the focus on redesigning the landing page. Please go ahead with execution of your ideas and raise a PR.

@aayushtmG - If you have an approach in mind, you can also execute it and raise a PR.

[techypants]

@aadeshkulkarni can we use news api for now, since backend (database) is empty? https://newsapi.org/

[aadeshkulkarni]

I wouldn't recommend that since the API structure would be different. If you're connecting to your local backend db, you can add some dummy data manually.

[Kunall-singh]

I've recently joined this repository and am excited to contribute. I've incorporated a new design update for the blog page in the prototype linked below. Please take a look and share your thoughts:

Prototype

Design Description: This prototype presents a refined user interface aimed at enhancing usability and visual appeal. Key improvements include a streamlined intuitive layout, and a new "Hot Topics" column on the side. This feature allows users to view the most discussed topics at a glance and, with a click, be redirected to related blog posts. The overall design emphasizes clarity and accessibility, ensuring that users can easily find and utilize features essential to their tasks.

Although I'm new to this repo, I am eager to contribute as much as possible. Your feedback is invaluable

[aadeshkulkarni]

@Kunall-singh - looks decent enough to begin dev.

Would be great if we can achieve this transition when user scrolls from the hero component to the blog list. (https://dribbble.com/shots/5374287-User-profile-concept)

Since you're new to this repo, I would recommend reading this contributing doc