Hosting the website in MERN stack to showcase all the project

[harshalhonde21]

🚀 Issue Title: Host MERN Stack Website to Showcase Projects

🔍 Issue Description:

📌 Issue Overview Our repository contains a treasure trove of 40+ amazing projects, and it's time to make them shine by hosting a website using the MERN stack. This dedicated website will serve as a showcase for all these projects, allowing us to display our hard work and accomplishments to the world.

🏠 Proposed Solution We need to build a MERN stack website that can dynamically showcase all our projects. Here's a high-level overview of what we need to do:

MERN Setup: Set up the MERN stack (MongoDB, Express, React, Node.js) for our website.

Frontend Development: Create a React-based frontend that displays project information and allows users to navigate and explore our projects.

Backend API: Build a Node.js/Express backend to handle data retrieval and support the frontend.

Data Integration: Connect the website to our project repository data source to ensure the website stays up to date with new projects.

Hosting: Choose a hosting platform (e.g., AWS, Heroku, Netlify) and deploy our MERN stack website.

Custom Domain: Consider setting up a custom domain to make the website easily accessible.

📋 Tasks Set up the MERN stack environment. Develop the React-based frontend to display projects. Create a Node.js/Express backend for handling data. Integrate project data from the repository. Deploy the MERN stack website on a hosting platform. Configure a custom domain if necessary. 📅 Timeline This is a significant project, and we aim to showcase our projects in style within the next few sprints. Let's make our work visible to the world!

🙋‍♂️ Assignees (You can assign this issue to yourself or the relevant team member.)

📂 Labels Enhancement MERN Stack Web Hosting Showcase Projects 🧩 Dependencies (Mention if there are any other issues or tasks that need to be completed before starting this one.)

📝 Additional Information (Add any extra information or context that may be helpful for the team.)

It's time to bring our projects to the forefront and showcase what we've accomplished. Let's get started on this exciting journey! 🌟👩‍💻👨‍💻

Feel free to ask any questions or seek clarification if needed. Happy hosting! 🌐🚀

[harshalhonde21]

Please assign this issue to me I am experienced about 2+ years in developement

[PBJI]

@harshalhonde21 Count me in for collaboration.

[NitkarshChourasia]

@harshalhonde21 You lead, give me tasks. Is that good with you?!

[harshalhonde21]

Hosting the website is big part actually we should work with team to did it at faster way minimum 1 front-end developer I want to design some part can you do @NitkarshChourasia minor part only as you say

[NitkarshChourasia]

Yes, sure anything would be fine with me. @harshalhonde21

[harshalhonde21]

@PBJI I should need access of the github repo to directly host to vercel can you give or you have any other solution

[PBJI]

@harshalhonde21 if you want to display all the project on this site, one way to go to would be to host the app on vercel using your github account and use github API to integrate data from this repository, this way there will not be any need for setting up vercel on this repository.

Would that become way too complex? Once we have the project deployed, we shall add the link, images and description related to that in the README and description section of this repository for display.

I am suggesting this approach because @thinkswell is the host of this repository, so without his approval it is not possible for me to do what you are asking.

But let me tell you, He as well is a MERN stack developer and may have the required experience which can benefit and add value to your endeavour. @thinkswell ?

[harshalhonde21]

Ya I can try this and making you granted that i will host this project with good UI and I have great idea of github API I will do this approach

[NitkarshChourasia]

@harshalhonde21 I would like you to create a repository and elicitate those ideas into a README.md for now so that @NitkarshChourasia and me can provide suggestions and move it forward. Also would you like to use agile model to develop this project, I am good at implementing things faster and all at the same time, however that said my weakness is If while implementing I hit a knowledge gap, I get demotivated easily and may abondan the project until I pickup inspiration again.

Just assign me tasks. I am ready whatever I get assigned to do.

[NitkarshChourasia]

@PBJI I am totally commited to work in the front-end part. @harshalhonde21

[PBJI]

@NitkarshChourasia sure, let's see how @harshalhonde21 moves it forward. He is the lead.

[harshalhonde21]

@PBJI I already start working on it let me know that is make PR after some - some changes ? Or after whole project.

[harshalhonde21]

And one more I have todo project which has good ui and main important localstorage saving capacity i added issue please assign me i will create PR for that in 10 mins only #911 i just want to to more enhancing TODO so please assing if not your requirement then you can close by PR for that

[PBJI]

@harshalhonde21 are you integrating the project in this repository? If so that would actually be a little challenging for you in development, I think a better way would be to develop this prpject on a fresh repo? what do you think @harshalhonde21 ? After development we can merge it under contribution, and use your original one for deployment.

[harshalhonde21]

In TODO folder there is many todo project with mern, plain html,css and js and many more i want to add there i have already folk and added there i already finished the work if you will assign i make pr u can review then u can merge

[PBJI]

@harshalhonde21 jist create the PR, I'll check and merge it, if it doesn't violate repo rules.

[harshalhonde21]

can i add another todo project in todo folder it is under repo rules na? @PBJI

[PBJI]

@harshalhonde21 yes you can.

[harshalhonde21]

hey @PBJI just added the project now u can review it

[PBJI]

@harshalhonde21 also do try to inculcate a feature where it shows how many people contributed on that particular project and who enhanced them if any, via commit history using github api. The github prpfiles should open up when pressed on a such dynamically generated badge. ☺️

And also if you would like you can upload this project on github for me and @NitkarshChourasia to participate in it. I can work autonomously as well as under your lead to reduce development time and take part in acitivites in parallel.😋

One more issue I had with this idea is, how would we display dynamic projects that uses npm dependencies or other scripts to run ? We can tackle this issue together efficiently 😅 but I would again persist on using a collaborative approach to develop this project to discuss various issues that might pop up later.

[harshalhonde21]

OKK contribution stuff can solve by we can add the contribute.json file in the main project where the mentor @PBJI you can add the particular person who contribute to project.

And I will upload the whole project of frontend in github by 14-10-2023 then we 3 can collabrate to make the project awesome.

we can host all the project 1 to 1 project and the link provided on the main hosted project and npm dependencies can be hosted don't worry i have much knowledge of hosting of frontend as well as backend project.

[PBJI]

@harshalhonde21 Mentor 😂 thanks for that title, my student. Jokes aside, thanks for your confirmation now I am fully certain we can do this.👍👍

[harshalhonde21]

Ya, right @PBJI and @NitkarshChourasia we will do this all in just 5 days from tommorrow I will make repo and we together make the site awesome and best

[NitkarshChourasia]

Yes. cheapname provides free domainname.

[NitkarshChourasia]

Anyway, @harshalhonde21 guide us. I am a newbie in this, hosting stuff.

[NitkarshChourasia]

@Dynamic UI I am making.

[harshalhonde21]

@PBJI I want to create React.js folder in main project it is very efficent to us becuase many people should contribute to that to build the main ui did I do Pr

[PBJI]

@harshalhonde21 can you elaborate the steps you will take to achieve this? I am sorry, not able to visualize what you are trying to convey by that

[harshalhonde21]

I want to created frontend folder in the repo of javascript -mini-project so should I create Pr for that because it is easy to me as well as many contributor should take part in it

[PBJI]

@harshalhonde21 Okay I get it now. Create the PR, we'll review and merge together.

[NitkarshChourasia]

What is the issue? Why haven't we have started with the project, yet?! @PBJI @harshalhonde21

[harshalhonde21]

@NitkarshChourasia it is not easy to do the project in mins it takes many days as all js projects in the repo is diffucult to integrate and host particular first off all I will create the folder in main repo and then u should contribute to ui on that

[NitkarshChourasia]

@harshalhonde21 Sorry, But I don't even know, How we are planning the project. No README.md , nothing...

[PBJI]

@harshalhonde21 I understand that😅 literally same experience with me, I tried making even a simple chat app and that too unfinished, took days until I was able to successfully create just the contact list section 😂 all the bugs creep up and harass the hell out of my eyes.

[NitkarshChourasia]

What you @harshalhonde21 are leading to, what @PBJI is leading. Like, what architecture, nothing is clear to me. It would be better if there is a documented way to this, in my suggestion.

[NitkarshChourasia]

@harshalhonde21 I understand that😅 literally same experience with me, I tried making even a simple chat app and that too unfinished, took days until I was able to successfully create just the contact list section 😂 all the bugs creep up and harass the hell out of my eyes.

You should use hit to kill the bugs, they are pesky irritants.

[harshalhonde21]

so, therefore i am creating the main structure 10 mins after i will MAKE PR of react.js strucute and readme file where all the information you will get @PBJI just take look to my PR

[PBJI]

@NitkarshChourasia checkout create-react-app and how it creates React applications using the dev / prod mode in parallel. Checkout particularly the directory structure of those applications, you will generate the implicit knowledge required to understand the projects front-end part atleast.

[harshalhonde21]

@PBJI we will not use create-react-app we will use vite@app becuase it is good and boom and 1000 times good from create-react -app

[PBJI]

@harshalhonde21 yeah I thought most people start with create react so, suggested him that but vite is definitely a boom, the hot module reloader is superb.

[harshalhonde21]

yes absoulty correct @PBJI I created the vite app and creating the pr just merge and then after 15min I edited the readme for contributor then review and merge it just keep eye on my PR's

[harshalhonde21]

@PBJI i created the folder please check it update readme to start and further information of the project will edit in 15 to 20 mins and then creating the PR

[harshalhonde21]

updated readme @PBJI please review and merge that all contributor will do work on it

[JayeshYadav99]

@thinkswell please see my issue regarding this #942

[PBJI]

@JayeshYadav99 we are team of 3 members already working on it, see 1Application-frontend folder in this repo. Also if you want you can join in, as we jave just started this project and have yet to implement many feature.

Currently we are using a forked repo by @harshalhonde21 for the frontend app. You can join us there. Thanks.

[NitkarshChourasia]

@harshalhonde21 @PBJI I need to learn hosting. Any way I can learn hands on, or any resources if you guys know?!

[PBJI]

@NitkarshChourasia use vercel for now, it is free. You could even try REPL (but it is free till you keep the environment open). Also there is nginx which is preferred by many devs, to host on local pc open port to public via proxy servers, just for prototyping.

These three methods I know that are free but yet limited by functionality because of freemium.

For hands on basically just try to host any of your prpjects using all three of these options. You can take help of docs and community forums.

[NitkarshChourasia]

@PBJI @harshalhonde21 Smart India Hackathon, please enquire about it. Is it worth it?!

[JayeshYadav99]

please review my pull request i have added deployed url link, video and also update functionality of new project #952

[JayeshYadav99]

check now updated