Description

I have been going through the react code and I have an enhancement suggestion. Instead of using use state, can we migrate the application to use a centralized state such as Redux/MobX/Recoil ?

Current Behavior

The jsx files uses use state hook. There is no centralized state.

Proposed Enhancement

To implement Redux like centralized state management system.

Use Case

To implement Redux like centralized state management system by which a state can be used my multiple components without using props or drilling down props (if props are required).

Blockers

No response

Additional Information/ Attachments

No response

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The "All Posts" title is not aligned with the image.

Expected Behavior

All Posts should be aligned with the image box below.

Reproduction URL

https://wanderlust-beta.vercel.app

Reproduction steps

1. Go to 'https://wanderlust-beta.vercel.app'
2. Scroll down to 'All Posts'
3. See error

Screenshots

![DESCRIPTION](LINK.png)
https://cdn.discordapp.com/attachments/1184178942459007136/1184902389359181904/image.png?ex=658da958&is=657b3458&hm=7110333f0ac297f5689172ad502f5bf267f36af41aeea68be52c63f1dff2376f&

Logs

No response

Browsers

No response

OS

No response

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Description

Currently the Button On the page is not responsive on all the type of devices and the button itself is used in many places. Hence I would like to propose a button prop and making the Navbar more responsive.

Current Behavior

Proposed Enhancement

Use Case

This way the button component will allow better reusability of code and cleaner readability. As well as less code on places where other components play vital roles.

Blockers

No response

Additional Information/ Attachments

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When theme is toggled to dark and if the page gets refresh/reload, theme-toggle-button initially renders light theme for a fraction of seconds and then toggled to dark theme.
current behaviour:

Expected Behavior

When theme is dark, then theme-toggle-button should render dark theme initially if the page gets refresh/reload.

Reproduction URL

https://github.com/Raghunandan-29

Reproduction steps

1. Go to 'homepage'
2. Toggle theme to 'dark'
3. Refresh the 'homepage'
4. See error

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Browsers

Chrome

OS

Mac

Description

Presently, people who want to test are not patient enough to make efforts to find a valid image from the website and then upload, so they normally end up in something like demo.png, our regex passes and then image is not loaded in the home page, so we need to have array of 10 perfect working images preferably of webP fromat as it loads faster, and when generate random button is clicked one of the 10 images url form the array should get auto filled.

Current Behavior

We can have invalid images like demo.png when creating a post

Proposed Enhancement

Add a button generate random image url in the textbox of image url which autofills with the perfect image from array of image urls

Use Case

It helps in enhancing UI of the app, so we don't see broken images in the app

Blockers

No response

Additional Information/ Attachments

No response

The background image of a beach scenery behind the logo on the homepage is currently hosted in JPG format. It takes a significant amount of time to load, even on a fast internet connection. To address this issue, I have hosted the image on imgbb in WebP format. The resolution remains the same, but now, due to its WebP format, the image loads quickly, virtually instantaneously. I kindly request you to assign this issue to me.

Description

The error handling middleware allows us to separate our error logic and send responses accordingly. The next() method we discussed in middleware takes us to next middleware/route handler. For error handling, we have the next(err) function.

Use Case

During development if we will test our API's and if there happen something wrong then it will help you to identify the problem with stack trace.

Proposed Solution

No response

Additional Information

No response

Attachments

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When we open a post by link, we get 404

Expected Behavior

Correct post according to the link should open

Reproduction URL

https://wanderlust-beta.vercel.app/details-page/a-journey-through-the-marvelous-beaches-of-maldives-and-a-marvelous-experience/653441167c11e03b70e9161b

Reproduction steps

1. Open a blog post
2. Copy the URL
3. Paste the URL in new tab

Screenshots

No response

Logs

No response

Browsers

Chrome

OS

Windows

This will help in load handling of the application.

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like cypress can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Adding a centralized error handler will prevent the application for crashing and becoming unavailable.

Description

Docker enables more efficient use of system resources

Current Behavior

app current is depend on node dependency

Proposed Enhancement

i can dockerize the app so anyone can use directly , without any dependency except docker

Use Case

it will solve the issue , developement setup

Blockers

No response

Additional Information/ Attachments

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

when clicking on that button , it redirects back to a normal tab
screen-capture.webm

Expected Behavior

it should open the specific blog or it should open the specific blog in a new tab

Reproduction URL

https://github.com/mohamedshamil7/wanderlust

Reproduction steps

1. Go to https://wanderlust-beta.vercel.app
2. Click on  the small button on the top right corner of the latest post card
3. See error

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Browsers

Chrome, Safari

OS

Mac

Description

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

we can use formik or useform library for the validation

why Formik ?

Formik keeps track of your form's state and then exposes it plus a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit) to your form via props

Formik and useForm are the mostly used library and it can handle a lot of things very good for learning prospective also

Current Behavior

1. There are no validation of the title of the post like there should be minimum 3 char for the title.
2. There are no validation for the author name which maybe we can handle with the authentication but still it should have minimum '3 character in a author name '
3. Required error is not shown before clicking on the submit Button

Proposed Enhancement

The validation help us to post the right type of data in the blog post we need also can reduce the chances of wrong and trash data by adding some validation like if we want email then this should have some patter [email protected] like in,co,com etc

Attachment

#38 needs to be solved before started this
This would be a big feature, presently we are not supporting, we can plan google and github for now, if feasible even twitter login we have to make sure we add test cases for this, to ensure this is working perfectly in all scenarios, this should use appropriate state management preferably context api for now or any other simple management.

This story should cover proper rendering of UI elements based on the user logged in state, and the functionality of logout also to be handled. Updation and deletion of post will be handled in another user story

Description

To refactor the hardcoded string values and https status codes in the controllers and test cases in the backend

Current Behavior

Currently we are hardcoding values like 400, 500, 200 and even the response messages are hardcoded in the post-controller and we are using the same hardcoded values in the testcases aswell. We need to refactor this.

Proposed Enhancement

All the strings should be put in a constants file and http status code should be taken from https://www.npmjs.com/package/http-status-codes,

Use Case

Single source of truth and will reduce the margin of errors

Blockers

No response

Additional Information/ Attachments

No response

Once #38 #37 is resolved, this can be taken up, this should add in the update post functionality calling the respective api from backend which already exists,
And it should also include the test cases for the developed functionality

Please follow the figma design in the readme and then design it responsive for all the 4 devices, mobile, tablet , desktop and above, wouldn't be more effort in making it responsive as tweaks related to padding would be prominent.
create a route /user-auth and design the page, make sure to follow the best practices and consistent coding style already being used.

This should also cover the changes required in the homepage, detailed page and add blog, you can set a dummy flag to switch between authenticated user and user who is not, this will be later bought into life once the backend changes are done.

Description:

• The current concurrently command in the package.json file combines frontend and backend scripts. To enhance readability and understanding of errors or logs, I propose modifying the concurrently command to include the names of the frontend and backend processes. Additionally, different colors could be used in the console output to distinguish between frontend and backend logs/errors.

Proposed Changes:

• Modify the concurrently command to include backend and frontend names.
• Implement different colors for frontend and backend console output.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When you click on the category, lets say Nature, then the title gets updated to "Posts related to "Nature"", but the posts related to nature are loading after some delay, which causes confusion

Expected Behavior

When you click on the category, lets say Nature, then the title gets updated to "Posts related to "Nature"", then there should be loading shimmer effect (reuse the exisiting one which is loaded for the intial post rendering), After the filtered posts (Nature posts) is loaded, it should be shown in the UI, This will avoid the confusion and the user will know that there is data fetch happening.

Reproduction URL

https://wanderlust-beta.vercel.app/

Reproduction steps

1. Click on Nature
2. Watch the behaviour in the featured posts section

Screenshots

No response

Logs

No response

Browsers

Chrome

OS

Windows

Description

To improve the current UX, disable the remaining categories when the user selects three categories while a new blog post is being created.

Current Behavior

Currently if a user selects more than three categories, they won't get any feedback until after clicking on the "Create Blog" button.
This degrades the UX as they will have to unselect certain categories and try to click on the submit button again.

Proposed Enhancement

I propose that once the user selects three categories, other categories go into a disabled state.
If the user de-selects one of the three, all the categories will be shown as available again.

Use Case

This enhancement benefits anyone who's trying to create a blog post.

Blockers

No response

Additional Information/ Attachments

No response

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Description

Whats'new --> Latest Posts Sections should show the latest post by date

Current Behavior

When I added new blog it is shown in Latest Posts section, but there are other blogs latest by date than the one appearing in this section

Proposed Enhancement

To make the Latest Posts Section should render the blog post by filtering with dates

Use Case

NA

Blockers

NA

Additional Information/ Attachments

Is there any better way to resolve this Issue ?

Description

This issue aims to refactor the codebase by introducing a reusable logic for rendering loading screen elements based on specific collections like latestPosts and posts. The proposed approach involves creating a new function that accepts three parameters:

1. Collections (latestPosts, posts)
2. Type of collection (enums like HOME_POST, FEATURED_POST, LATEST_POST)
3. Boolean value indicating whether to render loading skeletons (isSkeleton)

The new function will utilize these parameters to generate loading screen elements dynamically based on the specified collection and type. This refactor ensures a cleaner, more maintainable codebase by abstracting the loading screen logic into a reusable function, thereby enhancing code readability and reducing redundancy.

Current Behavior

The loading screen elements are currently implemented separately for different sections, leading to redundant code for generating loading skeletons.

Proposed Enhancement

To create a reusable function that generates loading screen elements based on the specified collection type and a boolean flag indicating the need for loading skeletons. This enhancement will improve code maintainability and reduce redundancy.

Use Case

When a user navigates to different sections/pages requiring loading screen elements for different collections (such as home posts, featured posts, latest posts), this function can be invoked with parameters to generate loading skeletons dynamically.

Blockers

No response

Additional Information/ Attachments

No response

Description

As of now, creating post is just typing plain text in the description box.
This doesn't provide any control over text formatting, like making text bold, italic, or HTML formatting like heading, etc.
It would be a better experience for the writer's as well to be in the control of these things.

Use Case

As a blog writer
I want to write the content in markdown format, instead of plain text
So that, it'll provide more control in the hands of the writer on how the text should be displayed on UI

Proposed Solution

No response

Additional Information

No response

Attachments

No response

Description

Currently, when I click on a post, the app routes to "/details-page" & displays the clicked post.

Now, if I want to share the post, naturally, I'll copy the URL & send it to the other person.
Problem here is that, every post is having the same URL (which is wanderlust-beta.vercel.app/details-page)
& as of now if you go to that link, it throws 404.

To solve this, we can use techniques like using the ID of the post in URL, or maybe using something called "slug"

Current URL

What I'm suggesting

Use Case

As a reader of the blog,
It would be helpful to get the appropriate link of posts
So that it can be shared with other readers

Proposed Solution

No response

Additional Information

No response

Attachments

No response

Description

We can aim for default classes (mobile), sm (tablet), lg (desktop if explicitly required), and lets refactor all the other classes if it were using md.

Current Behavior

The current codebase uses the md: prefix for classes to define styling and behavior, presumably targeted at medium-sized devices. The specific styling associated with these classes may be tailored for devices with a medium screen size, such as tablets or devices in a certain resolution range.

Proposed Enhancement

The proposed enhancement involves refactoring the existing codebase to improve class naming conventions and create a more consistent structure. The main changes include:

Replacing all instances of md: with sm: to better reflect the intended target, focusing on small to medium-sized devices.

Use Case

The sm: classes, replacing the existing md: classes, would be employed for tablet-sized devices, providing a tailored layout and styling for this category.

Blockers

No response

Additional Information/ Attachments

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Currently we don't have dark theme for Shimmer UI.

Expected Behavior

We need to add dark theme Support for the Shimmer UI.

Reproduction URL

https://wanderlust-beta.vercel.app/

Reproduction steps

1. First Open URL.
2. Then Switch System to dark theme .
3. Then if you reload website.
4. Then before posts are loaded
5. See shimmer cards render which are white.

Screenshots

Logs

No response

Browsers

No response

OS

No response

Presently the categories are disoriented and the font size is too big and horizontal padding is too big and we might have to span the button full width for best practice in the mobile device

We have to make it responsive for devices

1. Greater than desktop
2. Desktop devices
3. Tablet devices
4. mobile devices

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Now the project doesn't switch to dark theme when the browser's theme is set to dark, we have to make it compatible for dark theme.
To better test this, use edge browser and switch the theme between light and dark.

Description

We can have a shimmer loading screen mocking all the cards visible in the home page like , featured card, categories and latest post so that there wouldn't be a blank screen when the posts are loading

Current Behavior

Presently there is a blank screen appears, and then once the posts are loaded then the "All Blog Post" heading is pushed to fill the contents

Proposed Enhancement

We can have shimmer effect component while loading instead of simple loading bar, preferably using shadcn's skeleton component.

Use Case

Helps in better UX, and there wouldn't be a empty screen when the posts are yet to load

Blockers

No response

Additional Information/ Attachments

No response

Description

Currently Wanderlust don't have any logo. Aim is to design a logo for wanderlust.

Current Behavior

We need a website Logo to grabs attention, and good first impression to the user.

Proposed Enhancement

We will use canva to design a logo for website which showcase and attract users.

Use Case

This will help user to trust our website and will help to create good first impression

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Array of 16 post are fetching from this api "https://wanderlust-backend-bay.vercel.app/api/posts/latest" for latest section, out of these 16 only first 5 posts are rendering.This array is not sorted correctly, this is because of issue in the database I guess. Most of the sample posts are taking system date and time as a time of Post, may be this is causing the issue. In local api for this latest post also same issue newly created posts are sorted correctly in the response, but the sample posts which are in db initially are taking system date and time as timeOfPost they are not sorted in the response of api. This is same with the api "https://wanderlust-backend-bay.vercel.app/api/posts/latest"

Expected Behavior

Response from the api "https://wanderlust-backend-bay.vercel.app/api/posts/latest" should be sorted correctly by the date and time of Post.

Reproduction URL

https://github.com/Raghunandan-29

Reproduction steps

1. Go to 'https://wanderlust-beta.vercel.app/'
2. Checkout 'Latest Posts'
3. Scroll down to 'All Posts'
4. There are many Posts with latest date and time than the posts rendered in the Latest Posts section.
5. See error

For Api:
1. Go to 'https://wanderlust-backend-bay.vercel.app/api/posts/latest'
2. Check the response timeOfPost (they are not sorted correctly)
3. The post which are added by create post are sorted corrctly but the sample post in DB are not sorted.

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Browsers

Chrome

OS

Mac

Presently we do not have any test cases written in the application which ensures security, as the project grows in the size there are high chances that the application can break. So adding relevant test cases would be very handy.
Mostly likes framework like cypress can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Description

Currently when trying to create a blog , if i want to pick an image, i have limited options to choose from and cannot pick my own images.
We should add support to choose images from our device as well.

Current Behavior

Proposed Enhancement

Should support to add image from devices.

Use Case

This is critical functionality. A person will upload his clicked images when traveling. This needs to be supported

Blockers

No response

Additional Information/ Attachments

No response

Presently the styles are disoriented and the arrow is shadowed by the title and the tags are invisible and also fix the text font sizes

We have to make it responsive for devices

1. Greater than desktop
2. Desktop devices
3. Tablet devices
4. mobile devices

Presently we do not have any test cases written in the application which ensures the integrity of the UI , as the project grows in the size there are high chances that UI gets affected. So adding relevant test cases would be very handy.
Mostly likes framework like jest can be used to achieve this, if any other framework which is better than this, we can discuss and proceed.

Description

Jest is a JavaScript testing framework with a focus on simplicity. Jest is designed to make it easy to write and run tests, and it comes with a number of features that make it a powerful testing tool.

• Will configure the jest framework in the project
• will write test cases for one of the files (add-blog.tsx).

Use Case

Helps maintain the code quality

Proposed Solution

No response

Additional Information

No response

Attachments

No response

Presently we have to first enter backend and then do npm start and then open frontend in another terminal and do npm run dev.
It would be nice to have script in the package.json in the app level which runs both,
ex: npm start should run both backend and frontend

Once #38 #37 is resolved, this can be taken up, this should add in the delete post functionality calling the respective api from backend which already exists, and confimation dialog also needs to be prompted when the user wishes to delete the post
And it should also include the test cases for the developed functionality

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When attempting to post the blog with the provided image link https://i.ibb.co/KLwfZzG/Maldives-1024x767.webp the system returns a 400 error.

Upon inspecting the error message, it states: Image URL must end with .jpg, .jpeg, or .png. The platform or form appears to only accept image links with these specific file extensions. However, the provided image link has a webp extension, causing the submission to fail.

Test Case
{"title":"test","authorName":"test","imageLink":"https://i.ibb.co/KLwfZzG/Maldives-1024x767.webp","categories":["Adventure"],"description":"test","isFeaturedPost":true}

Expected Behavior

Here is the issue

1. A error toast should not give the error code it should give the error message why the error has occurred "Image URL must end with .jpg, .jpeg, or .png" in this case
2. if a image is not selectable it should not be there in the select images

Reproduction URL

https://github.com/krishnaacharyaa/wanderlust

Reproduction steps

1. Go to 'https://wanderlust-beta.vercel.app/add-blog'
2. Fill the form 
3. Select the specific image which ends with .webp
4. hit post blog button

Screenshots

Testcase

{"title":"test","authorName":"test","imageLink":"https://i.ibb.co/KLwfZzG/Maldives-1024x767.webp","categories":["Adventure"],"description":"test","isFeaturedPost":true}

Browsers

Chrome

OS

Windows

Presently the font looks too big and it doesn't have proper styling which is not suitable for the mobile devices

We have to make it responsive for devices

1. Greater than desktop
2. Desktop devices
3. Tablet devices
4. mobile devices

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

No response

Expected Behavior

No response

Reproduction URL

https://wanderlust-beta.vercel.app/

Reproduction steps

1. Visit the URL  https://wanderlust-beta.vercel.app/

Screenshots

No response

Logs

No response

Browsers

Chrome

OS

Windows

According to lighthouse
Desktop:

Mobile

Presently in lighthouse the performance we have it around 60 and 42 which is really poor, we have to aim to get it more than 95%

We are presently working on default theme #16, but we would be also needing to give option to the user to have manual switch to toggle which influence the theme of the application

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When the card which has large description is clicked, some part of the description is in viewport initially not the top of the post, that is Image and the start of description is not in viewport initially when the card is clicked.
Current behaviour :

Expected Behavior

When is card with large description is clicked , the top of post ( that is image and the start of the description )should be in viewport initially.
Expected behaviour :

Reproduction URL

https://github.com/Raghunandan-29

Reproduction steps

1. Go to 'All Post section'
2. Click on 'Capturing the Cityscape at Night: A Mesmerising Experience by Alice Smith' card
3. Checkout the content which in viewport initially.
4. Initially the top of this post page should be in viewport rather than the part of description.
5. See error

Screenshots

![DESCRIPTION](LINK.png)

Logs

No response

Browsers

Chrome

OS

Mac