apu52/metaverse

🚀 Welcome to our GitHub repository, Officially accepted for GSSOC'24 🌟& SSOC'24🌟 Explore a dynamic collection of front-end projects, powered by HTML, CSS, JavaScript, and React. Join our community to contribute your creations 🎨, add features 🛠️, or squash bugs 🐛 in existing projects.

METAVERSE

📌 Open Source Program

This project was part of following Open Source Programs

About METAVERSE

Welcome to the "Metaverse Front-End Playground" – your gateway to the future of web development in the metaverse! 🌐🚀 Metaverse Front-End Playground is an open-source repository created to empower developers to explore, innovate, and collaborate in the metaverse space. Whether you're a seasoned developer looking to showcase your metaverse projects or a newcomer eager to dive into the virtual realm, you're invited to join our dynamic community!

We also have a Discord server to discuss doubts and suggestions! Make sure to join it here: https://discord.gg/dvHgzTMsap

Announcement 📢

All of the projects of this repo can be seen in the deployment link in the about section

Achievement 🏆

METAVERSE repo has secured a position in top 50 maintainer repositories in QUINE HACTOBERFEST challenge 🏅

Blog

What You'll Discover Here:

• Diverse Metaverse Projects:

  Our repository features a wide spectrum of metaverse-related front-end projects. From HTML, CSS, and JavaScript to immersive React experiences, you'll find projects that push the boundaries of the metaverse.

• 🤝 Collaboration:

  Metaverse Front-End Playground thrives on collaboration. You can enhance existing metaverse projects, contribute new features, or even conjure up entirely new metaverse experiences. Your creative contributions are highly valued!

• 🚀Learning Opportunity:

  If you're new to metaverse development, this repository is an excellent launchpad. Collaborate with experienced metaverse developers, gain valuable insights, and immerse yourself in creating groundbreaking virtual worlds.

What you can Contribute?

• Find All the details in CONTRIBUTING.md before contributing
• Please follow guidelines in Code_of_Conduct.md

How to Contribute?

• Drop a Star in this repo
• Take a look at the existing Issues.
• Fork the Repo create a branch for any issue that you are working on and commit your work.
• At first raise an issue in which you want to work
• Please do not make more than 2 issues at a time , Once your PR have been merged only then go for the next issue
• Then when you are get assigned only then work on that issue & make a PR
• Please try to make a separate branch in your fork in case of PR
• Create a Pull Request, which will be promptly reviewed and given suggestions for improvements by the community.
• REMINDER: Commit inside the Projects Folder
• Add screenshots or video prototypes to your Pull Request to help us understand the effects of the changes that are included in your commits.
• Make sure to add a proper README.md with tour PR that describes your project
• Make sure to add the img of your new project in the assets/img folder
• Make sure to Update projectData.json file after submitting PR

How to make a Pull Request?

1. Start by forking the METAVERSE repository. Click on the symbol at the top right corner.

2. Clone your forked repository:

git clone https://github.com/<your-github-username>/METAVERSE

3. Navigate to the new project directory:

cd METAVERSE

4. Set upstream command:

git remote add upstream https://github.com/apu52/METAVERSE

5. Create a new branch:

git checkout -b YourBranchName

or

git branch YourBranchName
git switch YourBranchName

6. Sync your fork or local repository with the origin repository:

• In your forked repository click on Fetch upstream.
• Click Fetch and merge.

Alternatively, Git CLI way to Sync forked repository with origin repository:

git fetch upstream

git merge upstream/main

Github Docs for Syncing

7. Make your changes to the source code.

8. Stage your changes and commit:

⚠️ Make sure not to commit package.json or package-lock.json file

⚠️ Make sure not to run the commands git add . or git add *. Instead, stage your changes for each file/folder

git add file/folder

git commit -m "<your_commit_message>"

9. Push your local commits to the remote repository:

git push origin YourBranchName

10. Create a Pull Request!

Congratulations! You've made your first contribution! 🙌🏼

Show some ❤️  by giving to this repo

Project Contributors

Project Admin

Arpan Chowdhury

Project Admin/Moderators

Shuvadipta Das

Shruti Sen

Ankita Sikdar

metaverse's Issues

Hotstar clone project is not loading thumbnails

Describe the bug
In the Hotstar clone project the website is not loading the images & video thumbnails

Expected behavior
The thumbnails should have been properly rendered

Screenshots

Additional context
I can try to fix the bug if needed

Quiz App Projecg

Project Name: Quiz App

Tech Tools: Html, Css and Javascript

Description:
A quiz application is a game that tests a person's knowledge and skills on a certain subject or topic.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACTOBERFEST 2023

Score Keeper Project

Title: Score Keeper
Tech tools: Html, Css and Js

Description:
The easy-to-use scorekeeper for all your games or other activities. • Keep track of scores for any game or activity. • Customizable design to fit your needs. • Add and keep scores with a simple tap. • Choose the amount by which scores are increased or decreased.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACKTOBERFEST 2023

Quiz App Project

Project Name: Quiz App

Tech Tools: Html,Css and Js

Expected behavior
A quiz application is a game that tests a person's knowledge and skills on a certain subject or topic.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACTOBERFEST 2023

Snake game using go lang

Describe the project you want to add with tech stack

Expected behavior

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Stopwatch

Describe the project you want to add with tech stack

This is a Repository where Front - End Project of Stopwatch is present.
Expected behavior

Hello Coders👨‍💻 ,I am Arpan Chowdhury, a aspiring Web developer.🤖 Here is the project of the front-end Web Developement. We all use the most famous Application in our phone named STOPWATCH.
Screenshots (optional)

Additional context (optional )

"A Book Review Website"

Describe the project you want to add with tech stack

Expected behavior

Screenshots (optional)

Additional context (optional )

Feature_Request

Adding new features (as promised earlier)

• The Book Review website i build, i want to add more features into it, like some more sections which were not present earlier.
• And responsiveness and many more.
  

Temparature_Converter

Describe the project you want to add with tech stack
This is the project which helps us to convert the temperature...

Expected behavior
convert any kind of temperature

Screenshots (optional)

Additional context (optional )

Unit-Converter

Describe the project you want to add with tech stack

A unit converter is a tool that allows users to convert between different units of measurement. For example, a user could use a unit converter to convert from miles to kilometers, or from pounds to kilograms. Unit converters can be implemented in a variety of ways.

Expected behavior

1.A user-friendly interface that allows users to easily select the units they want to convert between.
2.A set of algorithms that can be used to perform the conversions quickly and efficiently.
3.A display that shows the converted value in a clear and concise way.
Unit converters can be a valuable tool for people who need to convert between different units of measurement
Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Survey Form

Describe the project you want to add with tech stack
This is a survey form using HTML & CSS.

Expected behavior
We can fill the form and submit it. Basically it is a frontend project.....

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Tindog: A startup Website

Describe the project you want to add with tech stack
Tindog, a startup website; it has best priced plans for entertainment of dogs of different breeds; it has matches, messeges etc.

Tech stack: Bootstrap is used and CSS animations are added

Expected behavior
The website will have separate sections for title, features, testimonial, pricing, footer, along with animations using css.

Screenshots (optional)
I have added some screenshots.

Additional context (optional )
This can be taken as a project and can be build upon in future; many more features can be added.

Add a calendar app

Describe the project you want to add with tech stack
I want to add a project which is a calendar app

Expected behavior
A calendar app will be added to the projects folder

Tech Stack
I will be using HTML, CSS & Javascript

A To-Do List Project

Describe the project you want to add with tech stack
A to-do list in which you can add the tasks or courses(which you want) and can edit or delete as well. TechStack:-HTML, CSS(Bootstrap), Javscript.

Expected behavior
We can perform the CRUD operations on our items i.e we can create, read, update, delete them.

Screenshots (optional)
I have added the screen shots as well.

Additional context (optional )
Infact in the future more features can be loaded into the website and it can be made more interactive.

Add a calender app

Description
I want add a calender app built using html, css, javascript

A Simple Restaurant Website Using HTML and CSS

Describe the project you want to add with tech stack

This is a simple site that is made using HTML and CSS properties. This site mainly uses the concept of grid property of CSS.

Expected behavior

This is properly working as expected
Screenshots (optional)

1

2

3

4

Additional context (Mandatory )

• I am a contributor to the OSEN open-source program

• I am a contributor to HACTOBERFEST 2023

I want to work on this issue

Feature_Request

Is your feature request related to a problem? Please describe.
Some UI enhancement was required when I looked at the page
https://github.com/apu52/METAVERSE/tree/main/Projects/Career-Crafters

Describe the solution you'd like
I'd like to improve the UI look

Describe alternatives you've considered
Minor UI improvement could be done

Additional context
None

Netflix Clone

This is the core code from scratch to clone the landing page of Netflix using HTML, CSS, and JavaScript.

Text to Voice Converter

Tittle: Text to Voice Converter

Tech Tools: Html,Css and Js

Description
Text-to-speech (TTS) is a type of assistive technology that reads digital text aloud.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACTOBERFEST 2023

Finance Tracker

Describe the project you want to add with tech stack
A react app which is used to track all tranctions, you can over look at the expences and even the savings

Tech Stack

• react
• crypto-js
• firebase
• mantine

Expected behavior
The React app is expected to provide a user-friendly interface for tracking financial transactions, including expense and savings management. Utilizing crypto-js ensures data security, while Firebase enables real-time updates, creating a seamless and responsive user experience.

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Track_Mobile_Phone

Describe the project you want to add with tech stack
This is project based on python and HTML ,helps us to know the basic details about a mobile number

Expected behavior
My expectation was to know the specific location of any mobile number but doing this project I know the country location of any mobile number

Screenshots (optional)

Additional context (optional )

Quote Generator Project

Title: Quote Generator

Tech Tools: Html,Css and Js

Description
A quote generator is a tool that can create quotes on a variety of topics. Some quote generators can also personalize quotes with fonts, colors, and text styles.

Screenshots (mandatory)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

STACK

Describe the project you want to add with tech stack
Visualisation of stack using HTML,CSS, JAVASCRIPT

Expected behavior
we can perform basic stack operation push,pop,display....

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Add Audio Visualizer Project

Hello , i'm making some project called "Audio Visualizer" yes , of course that's visualizing audio from remote url , built by Html , css , and Javascript

Expected behavior

When a user inputs a remote URL, the Audio Visualizer should generate and display a visual representation of the audio from that URL.
For making this

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Hackathon Finder

Describe the project you want to add with tech stack
I want to add Hackathon Finder Project which helps anyone to track Hackathons all over the world.

Screenshots(optional)

Job Finding Website

Describe the project you want to add with tech stack

"Career-Crafters" is a powerful platform designed to simplify the process of job hunting, career development, and education exploration. It offers a range of features to assist job seekers, students, and professionals in their journey towards success. 🌐💼

Expected behavior

🎯 Discover job listings, internships, and company profiles. 📈 Track your application progress and receive job notifications. 📚 Personalize your experience with bookmarks and user accounts.

Screenshots (optional)

Additional context (optional )

Please assign me this isssue.

Improve the poster of METAVERSE Project

Describe the bug

In the README description of Metaverse, the poster is not of high quality and much attractive and I can create a more attractive poster for this.

Expected behavior

New and better poster of Metaverse.

Screenshots

Will be available when I'll start working on it after assigning of this issue

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Can I work on this issue?

URL SHORTENER

URL SHORTENER
A URL shortener is a website that shortens a long URL (Uniform Resource Locator) into a shorter, unique link. The shortened URL redirects to the original long URL when clicked.

I have completed this project by using html, css and javascript.

Screenshots (optional)

• I am a contributor in OSEN open source programme
• I am a contributor in HACTOBERFEST 2023

Insta Clone

Describe the project you want to add with tech stack

This is a Repository where Front - End Project of Instagram Clone is present.
Expected behavior

Hello Coders👨‍💻 ,I am Arpan Chowdhury, a aspiring Web developer.🤖 Here is the project of the front-end Web Developement. We all use the most famous social media platform INSTAGRAM.
Screenshots (optional)

Additional context (optional )

Netflix Front Page Project

Project Name: Netflix Front Page Clone

Tech Tools: Html,Css and Js

Description
Netflix is a subscription-based streaming service that allows our members to watch TV shows and movies on an internet-connected device.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACKTOBERFEST 2023

KNOW_YOUR_OFFICE_STUFF

Describe the project you want to add with tech stack
This project helps us to access staff data and very useful example of inheritance

Expected behavior
We use the protected class by inheriting it which satisfy the basic inheritance rules

Screenshots (optional)

Additional context (optional )

Restaurant_Website

Describe the project you want to add with tech stack

The restaurant website project is a full-stack web application that allows users to search for restaurants, view menus, and make reservations. The front end of the application is built using React, a popular JavaScript library for building user interfaces. The back end of the application is built using Node.js, a popular JavaScript runtime environment. The application uses a PostgreSQL database to store data about restaurants, menus, and reservations.

Expected behavior

Tech Stack:
Front-end: React, JavaScript, HTML, CSS
Screenshots (optional)

Tech Stack:
Front-end: React, JavaScript, HTML, CSS

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

Google_Drive_Clone

Describe the project you want to add with tech stack
This is a clone of a google drive

Expected behavior
Perfectly looks like a google drive

Screenshots (optional)

Additional context (optional )

Age Calculator Project

Title: Age Calculator

Tech Tools: Html,Css and Js

Expected behavior
The Age Calculator can determine the age or interval between two dates. The calculated age will be displayed in years, months, Date of Birth.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

QR Id Card Generator

Describe the project you want to add with tech stack
I will code the project in HTML, CSS and, JS

Expected behavior
Users will be able to input their name and id and a ID card with updated QR will be generated

Screenshots (optional)

Additional context (optional )

@apu52 Please assign this issue to me.

A Netflix-Clone-Project

Describe the project you want to add with tech stack
hey arpan , I want to contribute my Netflix clone project under hacktoberfest 2023 label .I have made a netflix clone project by using Html,Css, javascript

Expected behavior
It will be a front end website.I have used in this website api.It will help to fetch new movies daily

Screenshots (optional)
I have added you can go through it
1.

2. 

Additional context (optional )

my hosted link:-https://netflix-clone-by-jatin.netlify.app/

URL SHORTENER

Describe the project you want to add with tech stack
It is a url shortener. It shortens the length of a any link.

Expected behavior
It should shorten a link. And when the given link is copied into the browser, you will be redirected to the website.

Screenshots (optional)

Additional context (optional )

I want to add Rock Paper Scissors Game.

I wish to add a Rock Paper Scissors Game into this repository which i made using HTML, CSS and JavaScript.
Please assign it to me so that i can work on it.
Thank You...

Add a Food Ordering Website

Describe the project you want to add with tech stack
It is a website where you can order your food from nearest outlets in your area. Tech Stack used in this is only HTML and CSS.

Hackathon Finder

I want to add a project which helps anyone to track hackathons all over the world

Want to add Weather application as a new project

Description:-
A weather application which tells nearly accurate weather details by the use of API.

I am adding a new project called World Clock

Describe the project you want to add with tech stack

Expected behavior

Screenshots (optional)

Additional context (optional )

Code Editor Project

Title: Code Editor Project

Tech Tools: Html ,Css and Js

Description:
A code editor is a software application that allows programmers to write and edit code. Code editors have features that help programmers write and edit code more efficiently.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

LogIn Pge

Describe the project you want to add with tech stack
This is project based on html and css..

Expected behavior
Frontend project of a log in page

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme

• I am a contributor in HACTOBERFEST 2023

A Book Review Website

Describe the project you want to add with tech stack
A Book Review Website for students preparing for competitions or the general book readers also; the old readers of a book can post their reviews on this website and the new students will get help from this; I will be making the frontend of the website for now; Tech Stack :HTML, CSS, Javascript

Expected behavior
The website(responsive) will display the reviews submitted by various readers on it along with the book name and reviewer's name. Any user can read the review from the website and he/she will know about the book. The website will also show the famous books trending at present or



reviewed already, and much more.

Screenshots (optional)
I have added some screenshots of how it should look. Please review it.

Additional context (optional )
This problem has future scope as well; for example we can add a login page so that a user will register (or login) and then submit the review.

Hotstar Clone

Describe the project you want to add with tech stack

Hello Coders👨‍💻 ,I am Arpan Chowdhury, a aspiring Web developer.🤖 Here is the project of the front-end Web Developement. We all use the most famous streaming platform HOTSTAR. So, here is the frontend clone of the landing page👆🏻 .
Expected behavior

This is a Repository where Front - End Project of HOTSTAR Clone is present.
Screenshots (optional)

Additional context (optional )

MYNTRA CLONE WEBSITE

Describe the project you want to add with tech stack

Project Name: RYMO (E-Commerce Website)
Tech Stack: Html,Css and Javascript

Expected behavior
An e-commerce website is a website that allows people to buy their clothes, t-shirts and so many dresses products online. E-commerce websites act as a digital storefront, where businesses can showcase their products and customers can make selections.

Screenshots (optional)

Additional context (Mandatory )

• I am a contributor in OSEN open source programme
• I am a contributor in HACTOBERFEST 2023

A-Weather-Application

Describe the project you want to add with tech stack
A weather application is a software application that provides information about the weather.
Weather applications can be used to:

• Get the current weather conditions for a specific location
• Get the weather forecast for a specific location
• Track the weather conditions in multiple locations

Expected behavior

It will tell us the temperature of a particular location You can see in the screenshot available below.
It will tell us like example:-
City: Lucknow
Conditions: haze
Temperature: 21.14 C
Wind Speed: 0 km/h

Screenshots (optional)

Additional context (Mandatory )

• [X ] I am a contributor in OSEN open source programme

• [ X] I am a contributor in HACTOBERFEST 2023

Tick-Tac-Toe Game Project

Add a Python project for tic-tac-toe?

Add alarm clock website named Wakemeup

Describe the project you want to add with tech stack

A website where we can set our alarms