[Migrate] from React to Next.js with Tailwind CSS

abhijeetnishal commented 4 months ago

Description:

The goal of this issue is to migrate the existing URL Shortener application from React to Next.js, utilizing the latest version of Next.js and its App Router. Additionally, the current CSS implementation will be replaced with Tailwind CSS.

Current State:

The current URL Shortener application is built using React, with a custom CSS implementation. While this has served the project well, we want to take advantage of the benefits offered by Next.js, such as server-side rendering, improved performance, and a more robust routing system.

Task Breakdown:

To complete this issue, the following tasks need to be accomplished:

[ ] Update the project structure to conform to Next.js conventions.
[ ] Migrate React components to Next.js pages and components.
[ ] Implement the Next.js App Router to handle routing.
[ ] Replace the current CSS implementation with Tailwind CSS.
[ ] Update the build process to accommodate Next.js and Tailwind CSS.
[ ] Test the application thoroughly to ensure it functions as expected.

Estimated Time:

This issue is estimated to take around 4-5 days to complete, depending on the contributor's experience with Next.js and Tailwind CSS.

sujeetgund commented 4 months ago

assign it to me.

abhijeetnishal commented 4 months ago

Hey @sujeetgund, I am assigning this issue to you. Best of luck.

sujeetgund commented 4 months ago

Hey @abhijeetnishal, Should I include typescript as well?

abhijeetnishal commented 4 months ago

Hey @abhijeetnishal, Should I include typescript as well?

If you are comfortable adding TypeScript, then go for it 👍

sujeetgund commented 4 months ago

Hey @abhijeetnishal, I have done backend part completely. And will complete frontend by tomorrow. I will keep the original design as it is, further improvements might be done in future.

abhijeetnishal commented 4 months ago

Hey @abhijeetnishal, I have done backend part completely. And will complete frontend by tomorrow. I will keep the original design as it is, further improvements might be done in future.

Great @sujeetgund, keep going.

sujeetgund commented 3 months ago

Here's frontend updates... I tried to keep design somewhat similar as possible.

Dark Theme

Light Theme

hemanth-kumar-boddeda commented 3 months ago

Hey @abhijeetnishal , I got your point you need the server-side rendering using Next.js rather than changing the frontend styles. I am glad to be a part of this if you assign it to me, I will give you the desired results as you wish.

abhijeetnishal commented 3 months ago

Hey @sujeetgund, the changes looks good to me and it almost matches with previous UI, shadow and border are not visible in UI as previous but i will look into that no issue. Once done, you can create a PR for this.

abhijeetnishal commented 3 months ago

Hey @abhijeetnishal , I got your point you need the server-side rendering using Next.js rather than changing the frontend styles. I am glad to be a part of this if you assign it to me, I will give you the desired results as you wish.

Hey @hemanth-kumar-boddeda, Sujeet is already assigned with this issue

sujeetgund commented 3 months ago

@abhijeetnishal actually I also want to discuss about PR as well. Can you make a branch named next-tailwind-app and I will make PR to this branch then you can deploy this branch on vercel. If everything goes right, merge it to master branch.

abhijeetnishal commented 3 months ago

Hey @sujeetgund, I have created a branch named next-tailwind-app, now you can push your code to that branch and create a PR.

sujeetgund commented 3 months ago

@abhijeetnishal, please review changes and merge PR #30

You can see preview: https://url-shortener-gssoc.vercel.app/

Note: Don't forget to update environment variables before deploying.

MONGODB_URI="mongodb://localhost:27017/dev"
DOMAIN_NAME="https://urlsrtner.vercel.app"

sujeetgund commented 3 months ago

@abhijeetnishal, can you please review my PR #30 and merge it so everyone can make their future PRs according to next app. And also, last night you make 3 commits on master branch so today it is showing some conflicts on my PR.

abhijeetnishal commented 3 months ago

@abhijeetnishal, can you please review my PR #30 and merge it so everyone can make their future PRs according to next app. And also, last night you make 3 commits on master branch so today it is showing some conflicts on my PR.

Hey I have made some changes to server code only that's why you can pull the changes of server. But I think working on client folder only so don't worry

sujeetgund commented 3 months ago

@abhijeetnishal, can you please review my PR #30 and merge it so everyone can make their future PRs according to next app. And also, last night you make 3 commits on master branch so today it is showing some conflicts on my PR.

Hey I have made some changes to server code only that's why you can pull the changes of server. But I think working on client folder only so don't worry

You can review the PR I just made and if conflict arises just keep the updated codebase of server. Also we are merging this PR on next-tailwind-app branch not the master branch.

Also please correct label.... It's level-2 not lavel-2

abhijeetnishal commented 3 months ago

@abhijeetnishal, can you please review my PR #30 and merge it so everyone can make their future PRs according to next app. And also, last night you make 3 commits on master branch so today it is showing some conflicts on my PR.

Hey I have made some changes to server code only that's why you can pull the changes of server. But I think working on client folder only so don't worry

You can review the PR I just made and if conflict arises just keep the updated codebase of server. Also we are merging this PR on next-tailwind-app branch not the master branch.

Also please correct label.... It's level-2 not lavel-2

Great 👍 I will review and merge it. Label I updated already

abhijeetnishal / URLShortener