singhjasvinder101/myblog

Let's connect and explore the tech together

TechBytes

Welcome to TechBytes! This is a project aimed at providing useful tech-related information and resources. Whether you're a beginner or an expert in the tech field, you'll find something valuable here.

Table of Contents

• Introduction
• Tech Stack
• Features
• Getting Started
• Installation
• Contributing
• Documentation

🚀 Introduction

TechBytes is a web platform where you can access a variety of tech-related content, including articles, tutorials, and resources. Our goal is to empower individuals with knowledge and tools to thrive in the ever-evolving tech industry.

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Close PRs

💻 Tech Stack

🔥 Features

• Articles: Browse through a curated collection of articles covering various topics such as programming languages, software development methodologies, cybersecurity, and more.
• Tutorials: Learn new skills with step-by-step tutorials on popular technologies and frameworks.
• Resources: Access a comprehensive list of tools, libraries, and online courses to enhance your learning journey.
• Search: Easily find the content you're looking for with our powerful search feature.
• Responsive Design: Enjoy a seamless experience across devices, whether you're on desktop, tablet, or mobile.

Getting Started

Prerequisites

Ensure that Node.js and MongoDB are installed on your machine.

Add your own configurations for environment variables used to environment file.

Run seeder.js file at seeder folder to get the blogs for development environment.

🛠️ Installation

1. Clone the repository

git clone https://github.com/singhJasvinder101/MyBlog.git

2. Navigate to the project's client directory:

cd client

3. Install dependencies

npm install

4. Navigate to the project's backend directory:

cd.. 
cd backend

5. Install dependencies

npm install

6. Start the development server at backend directory:

npm run both

🤝 Contributing

If you'd like to contribute to TechBytes, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make changes and commit them.
4. Push your changes to your fork.
5. Create a pull request.

Note: Make sure you always create a updated PR.

Contibuting Guidelines

We believe in the power of collaboration. If you have ideas to improve College.ai, feel free to contribute! Check out our CONTRIBUTING.md to get started.

📄Documentation

Explore our comprehensive documentation in the [LEARN.md]file, which serves as a detailed guide to understanding and contributing to TechBytes. This document covers various aspects of the project, including setup instructions, architecture overview, and contribution guidelines. We recommend referring to this documentation to gain a deeper insight into UniCollab and make meaningful contributions to its development.

Message From PA

Welcome to TechBytes!

We're glad you're here and excited for you to explore our project. Whether you're checking out the code, contributing to the project, or providing feedback, your presence and input are invaluable.

Feel free to dive in, get involved, and make TechBytes even better! 🌟 Enjoy exploring the world of tech with Tech Stuffs!

Happy coding!

Our Contributors ❤️

Thank you for contributing to our repository

Show some ❤️ by starring this awesome repository!

Back To Top

myblog's Issues

Update the twitter (X) icon

In the MyBlog website, the X icon has former twitter icon
Hence kindly assign this issue to me @swetha5157 under gssoc'24 and add level labels.

I abide by the Code of Conduct and Community Guidelines.

Adding Interactive Hover effects to the items of the navigation bar

Hi @singhJasvinder101 ,

Description of the issue

I would like to contribute by adding hover effects to the links in the navbar. This would highly increase interactivity and improve user experience.

About Me

Hello, my name is Devaki Joshi. I am a tech-enthusiast, specially passionate about front-end technologies such as React. As a GGSoC'24 contributor, I am really eager to make the proposed contributions and looking forward to learn more in the process.

[bug] add text to speech without using the browser's api

The text to speech functionality is built with the browser's API and It's not working in the smaller screen sizes devices like phones

Changing do not log out as Remember Me

I think it should be remember me except Do not log Out because logout is under the control of the user so i think remember me will be the best choice .

Feature: Notification Popup using React Toastify

Hi @singhJasvinder101 I would like to propose adding a notification popup feature to the project using React Toastify. This will enhance user experience by providing real-time feedback and alerts within the application.

So, please me as a contributor under the GSSOC 24.

Adding a Profile Page for User

We can Add a profile Page for user where user can see his information and can edit it.

feature: Implement a Custom "404 Page Not Found" Page

Feature Request: Implement a Custom "404 Page Not Found" Page

Description

We propose implementing a custom "404 Page Not Found" page for the application. This feature will provide users with a clear and helpful message when they encounter a broken or non-existent link, enhancing the overall user experience.

Details

• Feature Name: 404 Page Not Found
• Purpose: Improve user experience by providing a helpful message and navigation options when users encounter a broken link
• Functionality:
  • Display a custom "404 Page Not Found" message when a user navigates to a non-existent page.
  • Include a friendly message explaining that the page could not be found.
  • Provide a link to return to the homepage.
  • Optionally, include a search bar to help users find what they are looking for.
  • Ensure the design of the 404 page is consistent with the overall aesthetic of the website.

Scroll progressbar missing

want to add scroll progressbar like this

scroll.progress.bar.mp4

feat: Add user email verification feature

Adding a user email verification feature ensures that only users with valid email addresses can access your website, significantly reducing spam and fake accounts. This involves sending a verification link to the user's email, which they must click to activate their account, thus enhancing security and maintaining a clean user database.

I would like to work on this issue under GSSOC'24 , i request you to assign this issue to me.

Feature: Improve Comment Section UI

Feature Request: Improve Comment Section UI

Description

We propose enhancing the user interface of the comment section to provide a more visually appealing and user-friendly experience. The current design is functional but could benefit from aesthetic improvements and additional features.

Details

• Feature Name: Enhanced Comment Section UI
• Purpose: Improve the visual appeal and usability of the comment section
• Current Design:
  • Displays user avatar, name, and comment text.
  • Shows timestamp and a like button with a count.

Proposed Improvements

1. User Avatar and Name:

   • Increase the size of the user avatar for better visibility.
   • Use a more readable font for the user name and place it closer to the avatar.

2. Comment Text:

   • Add a background color or border to the comment text area to distinguish it from the rest of the page.
   • Consider using a slightly larger font size for better readability.

3. Timestamp and Like Button:

   • Align the timestamp and like button to improve layout symmetry.
   • Use icons and text that are more visually integrated.

4. Additional Features:

   • Include options to reply to comments.
   • Add a feature to edit or delete comments by the user who posted them.
   • Implement a way to collapse and expand long comment threads.

5. Overall Aesthetic:

   • Ensure the design matches the overall theme and aesthetic of the application.
   • Use consistent padding and margins to create a clean and organized look.

Example of Current Design

Benefits

• Enhances user engagement by providing a more attractive and user-friendly comment section.
• Improves readability and usability of comments, leading to better interaction among users.
• Provides additional functionality to manage and interact with comments effectively.

Implementation

• Collaborate with the design team to create mockups of the improved UI.
• Gather user feedback on proposed designs.
• Develop and test the new UI to ensure it meets user needs and maintains performance.

Adding a error page

When a user clicks on a page that is not defined an Error page should come to tell them and give option to redirect to the Home Page .
Current scenario

Expected result

Please Assign this issue to me under GSSoc

Light mode and Dark mode Toggle button

I can work on making the website in light mode so that users can toggle between the mode of their choice.

@singhJasvinder101 can you please assign this to me?

Implement Chatbot Feature in MERN Stack Tech Blog Web App

##Description:
We need to implement a chatbot feature in our MERN stack tech blog web app. The chatbot should have the following functionality:

Greet the user and ask how it can help them.
Display a list of blog genres/categories the user can choose from.
Allow the user to select a category and display relevant blogs.

We can add dark and light feature for better UI

Whole Webpage is looking dark, instead of only dark page, we can add a toggle switch to change the mode

Feat: Provide a delete Review Option

Description of the issue
I want to provide a delete option in the review , This delete review option will be only accessible to the users who have created that review, otherwise It should not be visible. Whenever they will click on this delete review option this review should be deleted from the database.

Record
I agree to follow this project's Code of Conduct
I'm a GSSOC'24 contributor
I want to work on this issue

Hi @singhJasvinder101 , please assign me this issue.

Adding My Post Section

Adding My post section where user can see his posted blogs in organized way.

Add an About Page

I want to work on adding an About Page to the website to highlight the features of the website. I will also make sure that the page is responsive. Here is one of the templates.

@singhJasvinder101 can you please assign this issue to me?

add image

its look cool if we add the some image otherwise web look like a boring :

@singhJasvinder101

Adding Trending Blog Section

Implement a feature to display trending blogs ranked by the number of likes received, with updates in real-time or at regular intervals. This will highlight popular content, encourage quality blog posts, and enhance user engagement.

Missing Email Validation in User Signup

The current user signup process lacks email validation, allowing invalid or improperly formatted email addresses to be accepted. This can lead to issues with user communication, account verification, and overall data integrity. Implementing proper email validation will ensure that only valid email addresses are accepted during the signup process, improving the reliability and security of the application.

Adding a Issue Template

Creating an issue template for easy identification of the type of issue and organized contributions.

profile button has not much feature, update information, change password and many more

profile button shows only log out option, but we can add user profile information feature.

Enhance footer

Adding Home , Services , About us , Blogs , FAQs section to the footer will make it user friendly & enhanced footer functionality .
It will describe the project in better way .

[FEAT]: Improving UI of the Blogs cards

The blogs cards are not very attractive to look at we can add some styling and also we can add borders to the blogs.
We should also add to the title which page blogs are we seeing since all the pages looks the same.

Please assign it to me under gssoc24 so that I can work on it if you like the idea.

Improving Readme.md file

Improving the readme file with intructions to run the web app locally on the computer. Can you assign this to me under GSSOC 24?

feature:add a back to top button on the blog page

Feature Request: Add "Back to Top" Button on Blog Page

Description

We propose adding a "Back to Top" button on the blog page. This feature will allow users to quickly return to the top of the page, improving navigation and user experience.

Details

• Feature Name: Back to Top Button
• Purpose: Enhance user navigation and convenience
• Functionality:
  • A button will be added to the blog page.
  • The button will be visible when the user scrolls down the page.
  • Clicking the button will smoothly scroll the page back to the top.
  • The button will be styled to match the overall design of the blog.

Adding a scroll to top button.

I can add a scroll to top button in the homepage.

Display password constraints

Feature:Enhance the post feature with Ai

Feature Request: Introduce "Write with AI" Enhancement

Description

We propose adding a "Write with AI" feature to our application. This functionality allows users to write a post and click a "Write with AI" button, which will then enhance the quality of their content.

Details

• Feature Name: Write with AI
• Purpose: Enhance the quality of user-generated posts
• Functionality:
  • Users can write a post within the application.
  • After writing, users can click the "Write with AI" button.
  • The AI will process the content and enhance its quality, improving clarity, grammar, and overall effectiveness.

i will work on this

Fix the overall UI

The present UI looks quite unattractive due to its uncoordinated styles , Card sizes are too much big & can see mismatched color combinations . Moreover I can see the hover effect looks uneasy due to large size of the cards , can make it better.
Please assign this issue to me under GSSoC'24
If you have any other suggestions , then it's welcome .

frontEnd part is looking poor alignment, text can be changed

Landing page can be improved by adding cards with extended text, navigation bar should be modified

feat : Adding a smooth hovering animation on the cards .

Adding a smooth pop out animation on hovering on the card to different from the other unfocused cards .

Add Code of Conduct.md

Hey @singhJasvinder101 ,
It is important for our community to have a clear and concise code of conduct to ensure a welcoming and inclusive environment for all contributors. A Code of Conduct sets the expectation for behavior and outlines the steps for reporting and addressing unacceptable behavior. This can greatly enhance the community experience and maintain a respectful and collaborative atmosphere.
I want to add Code_of_conduct.md, please assign me this issue.

Adding a PR Template

Adding a PR Template for streamlined and easy contributions with proper details.

[bug], [Improvement] Improve Password Validation Error Messages

Currently, on the registration page, the password validation feedback is not specific, always displaying "Please Enter Valid Password" regardless of the exact issue. This makes it difficult for users to understand what specific criteria their password failed to meet.

To enhance user experience, the error messages should be more descriptive, indicating the specific reason for the validation failure.

I would like to work on it @singhJasvinder101 .

[BUG]: There should be a button to add file

There should be a button to ask the user to upload a file for the cover image.
Please assign it to me, I would like to work on it under gssoc24.

Bug: Unauthenticated Users Can View Post Pages and Also the Add Post Page

Bug Report: Unauthenticated Users Can View Post Pages

Description

There is a security issue where unauthenticated users are able to view pages such as posts without being logged in. This behavior should be restricted to logged-in users only to protect the content and ensure proper user engagement.

Steps to Reproduce

1. Open the application in a web browser.
2. Navigate to the post creation or viewing page without logging in.
3. Observe that the page is accessible without requiring login credentials.

Expected Behavior

Unauthenticated users should be redirected to the login page when attempting to access post pages or any other restricted content.

Actual Behavior

Unauthenticated users can access post pages and view content without logging in.

Screenshot

Possible Solution

• Implement route guards to check for authentication before allowing access to restricted pages.
• Redirect unauthenticated users to the login page when they try to access restricted content.
• Ensure that the session management is properly handling user authentication state.

Additional Context

This issue poses a security risk as it allows unauthenticated users to view and potentially interact with content that should be restricted to logged-in users only.

[BUG]: footer alignment problem

the footer is not correctly aligned/responsive with the page
same with other pages like for login and other

Missing Learn.md file

Add Learn.md file as instructed by Gssoc guidelines

[Freature] : Add Empty state

@singhJasvinder101

we can add empty state if we coudn't find particular blog
currently we display only blank spacce

instead of that we display

Add Contribution.md

Hey @singhJasvinder101 ,
To streamline the contribution process and make it easier for new contributors to get involved, it's important to have clear and detailed contribution guidelines. A CONTRIBUTING.md file outlines the steps and best practices for contributing to the project, ensuring consistency and high-quality contributions.
Please assign me this issue

Feature: Implement "Forgot Password" Functionality

Feature Request: Implement "Forgot Password" Functionality

Description

We propose adding a "Forgot Password" functionality to our application. This feature will allow users to securely reset their password if they forget it, enhancing the overall user experience and security.

Details

• Feature Name: Forgot Password
• Purpose: Enable users to securely reset their password if they forget it
• Functionality:
  1. Forgot Password Link:
     • Add a "Forgot Password" link to the login page.
  2. Password Reset Request:
     • When the user clicks the "Forgot Password" link, they will be directed to a password reset request page.
     • The user will enter their registered email address.
  3. Email Verification:
     • Send an email to the user with a secure link to reset their password.
     • The link will expire after a set period for security purposes.
  4. Password Reset Form:
     • When the user clicks the link in the email, they will be directed to a password reset form.
     • The form will allow the user to enter and confirm a new password.
  5. Confirmation:
     • Once the password is successfully reset, the user will receive a confirmation email.
     • The user can now log in with their new password.

Benefits

• Enhances user experience by providing an easy way to recover access to their account.
• Increases security by using email verification and secure links for password resets.
• Reduces support requests related to password recovery.

Security Considerations

• Ensure the password reset link is securely generated and has an expiration time.
• Validate the new password and confirm password fields to prevent common password-related vulnerabilities.

Adding a Alerting popup

I think it is needed to add some alert about any wrong thing happened by the user in the login and signup page like when i am clicking the submit button without entering any field so it must show any warning .

bandicam.2024-05-27.20-23-58-770.mp4

Implement Cookie Based User session Handling

Cookie-based user session handling involves storing a session ID in a cookie on the client's browser when a user logs in. The server validates this session ID to manage user sessions, ensuring secure and personalized user experiences. Sessions are typically configured with expiration times and security attributes like HttpOnly and SameSite to enhance security. This approach allows for efficient user authentication and session management in web applications

The year in the footer is not updated!!

The year in the footer is not updated, it should be 2024.

Enhance readme file

A README file is crucial because it serves as the entry point for anyone interacting with your project. It provides essential information about what the project is, how it's structured, and how to use it. Think of it as the first impression someone gets when they encounter your project. A well-written README can save time and frustration for both you and others by clearly outlining the purpose of the project, installation instructions, usage examples, and any other pertinent details. It sets expectations, facilitates collaboration, and helps maintainers and users alike understand and engage with the project more effectively. In essence, a README is the user manual for your project, and investing time in crafting it can greatly enhance the overall experience for everyone involved.

Kindly assign this issue to me under GSSoC'24

feat : Adding a password toggling eye in Login/SignUp page

At the time of signin or login every user wants the password safe so if their is a feature of toggling the password with the eye icon whether to hide or show the password i think it will increase the UX of the user .

Credentials Validations (backend)

Hii @singhJasvinder101 i will do backend validation for password as same as frontend but please let me know what types of other validations you want

Implement Google Signup Functionality

Users should be able to sign up using their Google tokens for authentication.

This feature enhances user convenience by allowing them to sign up using their Google accounts, reducing the need to remember additional login credentials.

actual:

expected:

user verify is not proper

@singhJasvinder101 ,
when i register on myBlog ,then it will directly redirect me to home page without login

we have to firrst go to /login page and check user email and password based on that we redirect them to home and login success