v2 Bible Verse Finder - HTML -> Next.js

[JustinhSE]

Overview

Our current framework is good, but we want to take this to the next level. Using something like Next.js will help us route and scale this project easier. We want to have a new UX and upgraded visual, multiple pages (home page and bible verse similarity), and it should be written in TypeScript (preferred) or JavaScript.

Tasks

• Implement multiple pages: home page and bible verse similarity.
• Integrate the bible-app directory and the additional files such as the app.py and the index.html file so that we can upgrade our tech stack.
• Onrender should still be able to render your changes deployed version

[Namit2111]

Hey! Using anyting like Nextjs or any other framework will not impact our ML model in any way , we can freely use any framework in the frontend

[JustinhSE]

You are on it!!! I was just setting this up for anyone who wanted to join.

[JustinhSE]

Thanks for letting me know @Namit2111 , if we wanted too, would anything change? I just don't want to interfere with the calls within the HTML file index.html

[Namit2111]

No! Nothing will change

[JustinhSE]

Alright let me change the issue!

[JustinhSE]

something cool - https://magicui.design/docs/components/rainbow-button

[JustinhSE]

• I created the next.js + magicUI into it,we just need to integrate the 2

[JustinhSE]

If you have any questions about this issue please comment them here!

[rajatkriplani]

Hey @JustinhSE as mentioned on Discord there are a few steps to migrate from html to next.js so can you break this issue in parts (divide and conquer)? so that it becomes easy to keep track of the progress and resolve one issue at a time.

[d-beloved]

This is looking interesting. In addition to @rajatkriplani's suggestion, @JustinhSE, do you have a design in mind for the home page and bible verse similarity , maybe a mockup? That will help with understanding the scope much better.

[JustinhSE]

@d-beloved honestly, migration is most important at this point. Although a good looking UX at the end of this issue would be amazing, I am more concerned about the backend aspect of this right now. You can reference our deployed version in our readme.md, it doesn't have to look any better than that when we link it.

The most important thing is just integrating the 2 so that input and output work accordingly

[JustinhSE]

So home for example could literally be text of home. But the Bible verse similarity tab in next.js would need the functionality our current one does

[JustinhSE]

Hey @JustinhSE as mentioned on Discord there are a few steps to migrate from html to next.js so can you break this issue in parts (divide and conquer)? so that it becomes easy to keep track of the progress and resolve one issue at a time.

@rajatkriplani yes but to break this issue down into smaller ones, I would need to know the tasks you would like to do so I can plan accordingly

[rajatkriplani]

Hey @JustinhSE as mentioned on Discord there are a few steps to migrate from html to next.js so can you break this issue in parts (divide and conquer)? so that it becomes easy to keep track of the progress and resolve one issue at a time.

@rajatkriplani yes but to break this issue down into smaller ones, I would need to know the tasks you would like to do so I can plan accordingly

Below are the step to migrate, and please let me know if I'm missing anything:

Backend

• Keep flask backend or switch to next.js API?
• Changeapp.py to return JSON

Frontend

• Convert index.html to Next.js
• similarity.txt use fetch to call Flask or Next.js API
• Update page.tsx

Deployment

• Well this depends upon Flask or Next.js

I can start with updating page.tsx and build it using:

• utils.ts (cn function)
• globals.css which contains Tailwind's base
• layout.tsx for structure and global elements.

[d-beloved]

These steps seems solid to me @rajatkriplani, I am available for the frontend aspect of things (converting index.html to Next.js) if it'll be an handful for you. cc: @JustinfhSE

…

On Sun, Oct 6, 2024, 07:37 rajatkriplani ***@***.***> wrote: Hey @JustinhSE <https://github.com/JustinhSE> as mentioned on Discord there are a few steps to migrate from html to next.js so can you break this issue in parts (divide and conquer)? so that it becomes easy to keep track of the progress and resolve one issue at a time. @rajatkriplani <https://github.com/rajatkriplani> yes but to break this issue down into smaller ones, I would need to know the tasks you would like to do so I can plan accordingly Below are the step to migrate, and please let me know if I'm missing anything: Backend - Keep flask backend or switch to next.js API? - Changeapp.py to return JSON Frontend - Convert index.html to Next.js - similarity.txt use fetch to call Flask or Next.js API - Update page.tsx Deployment - Well this depends upon Flask or Next.js I can start with updating page.tsx and build it using: - utils.ts (cn function) - globals.css which contains Tailwind's base - layout.tsx for structure and global elements. — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGKJ244SQJQWZS2CIQMBP2TZ2DLBVAVCNFSM6AAAAABOZFQWV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJVGMYTKNRZHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[JustinhSE]

@rajatkriplani the steps look great! @d-beloved you can also work on this issue, but you both will have to coordinate tasks.

[JustinhSE]

Pinging @Namit2111 for the deployment steps however to make sure these changes do not cause side effects

[rajatkriplani]

@rajatkriplani the steps look great! @d-beloved you can also work on this issue, but you both will have to coordinate tasks.

okay, I'll start with page.tsx and will get in touch with @d-beloved to keep him updated.

[Namit2111]

Hi! @rajatkriplani
we want to make an API in flask that will return a json object with results and user input this already implemented in app.py but currently it is serving index.html . We want to make an api of it.

For frontend we want similar ui that is copy the design of Index.html in nextjs , in nextjs use the flask app for completion of the app.

Your steps seems to align with what we want , so go ahead and let us know for any issue.

[rajatkriplani]

Hi! @rajatkriplani we want to make an API in flask that will return a json object with results and user input this already implemented in app.py but currently it is serving index.html . We want to make an api of it.

For frontend we want similar ui that is copy the design of Index.html in nextjs , in nextjs use the flask app for completion of the app.

Your steps seems to align with what we want , so go ahead and let us know for any issue.

I'm updating page.tsx and @d-beloved will be working to convert index.html to next.js

[Namit2111]

Can you provide a timeline @rajatkriplani and @d-beloved

[rajatkriplani]

Can you provide a timeline @rajatkriplani and @d-beloved

anything between 1 to 2 hours. And @d-beloved please drop you discord.

[rajatkriplani]

@Namit2111 I created a PR to update page.tsx but I'm not aware if @d-beloved is working on index.html as I was unable to make any contact.

[d-beloved]

Hey @rajatkriplani, I am not on my system at the moment. I'm at Church. You can pick it up if you're able to work on it now. I'll check back later today to know the status.

…

On Sun, Oct 6, 2024, 09:39 rajatkriplani ***@***.***> wrote: @Namit2111 <https://github.com/Namit2111> I created a PR to update page.tsx but I'm not aware if @d-beloved <https://github.com/d-beloved> is working on index.html as I was unable to make any contact. — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGKJ24YXFKDFPCHGRCILQCTZ2DZLTAVCNFSM6AAAAABOZFQWV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJVGM2TAMRWGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[d-beloved]

Can you provide a timeline @rajatkriplani and @d-beloved

anything between 1 to 2 hours. And @d-beloved please drop you discord.

@rajatkriplani I have messaged you on the project thread on Discord