Git Product home page Git Product logo

pranavbarthwal / cosmoxplore Goto Github PK

View Code? Open in Web Editor NEW
61.0 1.0 129.0 49.35 MB

CosmoXplore, where the celestial canvas unfolds its mysteries before your eyes. Immerse yourself in a cosmic odyssey, as we harness the power of NASA's API to bring you a symphony of space resources.

Home Page: https://cosmoxplore.vercel.app/

HTML 0.65% CSS 18.65% JavaScript 80.70%
api css ghdesktop gssoc html javascript vs-code open-source react reactjs

cosmoxplore's Introduction


🌌 CosmoXplore

Welcome, new contributors to CosmoXplore! We're excited to have you join us as we explore the cosmos.

GitHub issues
GitHub forks
GitHub pull requests
GitHub Repo stars
GitHub contributors

Preview of Website

alt text

alt text

alt text


High VoltageTech Stack


Rocket Steps to Run the Project 👨‍💻

  1. Clone the Forked Repository: Clone the repository to your local development environment by opening the terminal or command prompt and executing the following command:

    git clone https://github.com/<your-github-username>/cosmoXplore.git
  2. Navigate to Your Repository: Navigate to your new project directory by using the command:

    cd cosmoXplore
  3. Install Required Packages: Install the packages required for the project:

    npm install
  4. Add Environment Variables: Create a .env file and add Environment Variables as mentioned in .env.demo file.

  5. Start the Server: Start the server:

    npm run dev
  6. Local Host: Access the project on your local host at:

    http://localhost:5173/

Feel free to explore and contribute to CosmoXplore! If you have any questions or need assistance, don't hesitate to reach out to us. Happy coding! 🌠


Red Heart Contributors


  • This project thanking all the contributors for having your valuable contribution to our project
  • Make sure you show some love by giving ⭐ to our repository


Back to top

cosmoxplore's People

Contributors

aatmajajoshi avatar abhishek-465 avatar anjaliavv51 avatar asthanegi14 avatar atharvkasar04 avatar chandu6702 avatar chocolatecupcake2002 avatar dikshadhasmana avatar divyalaldinani avatar donaldreddy avatar girish-07 avatar ketanop321 avatar mastansayyad avatar ojas-arora avatar parikhitritgithub avatar pradeeptosarkar avatar pranavbarthwal avatar pratik2401 avatar ramakrushnabiswal avatar saipradyumnagoud avatar shaurya35 avatar shreyash3087 avatar shubhamsingh4620 avatar shubhanshukaintura avatar suhanipaliwal avatar sujal-98 avatar surajvast1 avatar thevijayshankersharma avatar uday2902 avatar utsavladia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

cosmoxplore's Issues

Live Space Weather Forecast Section

Describe the feature

Another section other than APOD and mars rover exploration where the live data of the space weather will be shown for the viewer to understand how the weather outside the premise of earth seems like.

It should be implemented because

It should be implemented so as to give insight on the Space weather outside the premise of Earth and would be a great eye catching detail for the viewer or space science enthusiast

Additional context

It will be a new section where HTML, CSS, JS and the linking of API will be put to work

Would you like to work on this issue?

Yes

Add Topics

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

navbar

Describe your issue

would like to add a better navbar to make the ui bbetter

please assign under gssoc'24

@

Steps to reproduce the bug

home page

What was the expected result?

No response

Put here any screenshots or videos (optional)

not rn

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

change the UI of the navbar section and integrate and give it a unique cosmo touch

UI Improvement for Mobile and Tablets.

Proposals:

- Slide Drawer Navigation Bar.
- Reorganization of all the components for smaller devices.
- Reframe the overflowing content.
- Footer optimized for smaller devices.

Pros:

  • Fully optimized website for all devices.
  • Increase in SEO ranking.

Cons:

  • Can take some time to implement.
  • Some properties needs to be fully changed to optimize some particular sections including font units etc.

Enhance Usability: Replace Text Inputs with Date Pickers

Describe the feature

Currently, users are required to manually type dates into text input fields. This can be prone to errors and inconsistencies in formatting (e.g., "05/11/2024" vs. "11-05-2024"). To improve the user experience and data accuracy, we should integrate date picker components for all date-related inputs.

It should be implemented because

By integrating date pickers, we anticipate several benefits. First, date pickers are more intuitive and easier to use than manually typing dates, leading to a smoother user experience. Second, they will significantly reduce errors by eliminating typos and enforcing a standardized date format (e.g., YYYY-MM-DD). This standardization will ensure data consistency across our application.

Additional context

image

Would you like to work on this issue?

Yes

Adding more information in Readme file for new contributors.

Describe the bug

  • Information addition regarding the newest change through a PR.
  • Typo error.
  • New category addition.
  • Refractoring sentences that make more sense.
  • Fixing broken links.
  • Refractors / reformating of the document.

Additional Context

I want to help new contributors get started with the project. I'm thinking of adding simple instructions on how to fork, clone, and edit the code. @PranavBarthwal, can you assign this to me if you agree? Thanks!

Connecting Contact Me form with google sheets

Describe the feature

Link your website's "Contact Me" form to Google Sheets for access to collected data from the users. (Consider for Gssoc'24)

It should be implemented because

No response

Additional context

No response

Would you like to work on this issue?

Yes

Images FLOATING back to its original position when not hovered.

Describe the feature

Without this feature the images(planets) on the website not so formally goes back to their original position, which may look not so smooth and user friendly.

video:
https://github.com/PranavBarthwal/cosmoXplore/assets/87354071/9e31b138-74c4-4aae-b4fb-048bc5f1bbe7

It should be implemented because

Once applied to all the images this will make the website look more organized and user friendly.

Additional context

Please assign this issue to me and also please add the label of GSSOC and level to the issue.

Would you like to work on this issue?

Yes

cosmoXplore logo optimisation on mobile

Describe your issue

Screenshot_2024-05-10-22-56-46-70_40deb401b9ffe8e1df2f1cc5ba480b12
As you can see in the image the logo is not optimised for Mobile and other devices.

Steps to reproduce the bug

Go on the website you can see it at the top

What was the expected result?

No response

Put here any screenshots or videos (optional)

Screenshot_2024-05-10-22-56-46-70_40deb401b9ffe8e1df2f1cc5ba480b12

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

I will optimise the code such that it fits properly in most of the devices and will test it properly.
Please assign me this issue as I have worked on many projects and have won a hackathon and will do my best to give the optimised code for this issue too…

Enable transition effects when hovering over navbar sections.

Describe the feature

Enable transition effects when hovering over navbar sections on the Home page featuring APoD Martian Imagery.

It should be implemented because

introduce a captivating transition effect to enhance user experience when navigating through navbar sections on the Home page..

Additional context

Screenshot 2024-05-11 142049

Would you like to work on this issue?

Yes

Autotype element overlapping

Describe your issue

In PC view, when the strings listed to be autotyped are untyped completely, the cursor moves upwards, moving the whole content below it upwards.

Steps to reproduce the bug

11.05.2024_18.32.40_REC.mp4

What was the expected result?

No response

Put here any screenshots or videos (optional)

In the above clip you can clearly see the content overlapping the line creating an awkward jerk effect.

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

I have fixed the bug by replacing the string to those which have same first letter, X, ensuring that the below content doesnt overlap the line.

11.05.2024_18.38.09_REC.mp4

Enabaling hovering effect on navbar

Describe the feature

A hovering effect should be added to navbar .

It should be implemented because

it should be implemnted because it would be easily visible to user that this component can be hovered and it is not a text

Additional context

I am a gssoc contributor I would like to add this additional feature kindly assign me this issue

Would you like to work on this issue?

Yes

Adding the mail Functionality

Describe the feature

After sending the message i want to send an email to the owner's email. The frontend is already done, i want to implement its backend and make it working. Kindly assign me this issue.
Working under GSSOC 24

It should be implemented because

It will add the real functionality.

Additional context

No response

Would you like to work on this issue?

Yes

Add templates for issues

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

UI improvement of contact me form

Describe the feature

Making the contact me form more visually appealing so that it blends with the theme of website properly.
(Consider for Gssoc'24)

It should be implemented because

No response

Additional context

No response

Would you like to work on this issue?

Yes

Bug Report: Video Rendering Issue in APOD Section of CosmoXplore Website

Describe your issue

Upon loading the APOD (Astronomy Picture of the Day) section on the CosmoXplore website, the video fails to render properly, resulting in a broken or distorted display.

Steps to reproduce the bug

  1. Visit the CosmoXplore website.
  2. Navigate to the APOD section.
  3. Observe the video rendering issue upon page load.

What was the expected result?

The video in the APOD section should load correctly and display without any distortion or errors upon page load.

Put here any screenshots or videos (optional)

Screenshot 2024-05-10 232514

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

I will investigate the cause of the video rendering issue, which may involve debugging the code and checking for compatibility with different browsers. Once identified, I'll make the necessary changes to ensure the video loads correctly upon page load.

Form Validation

Describe your issue

When entering the number in section of name it will accepted successfully,this is a problem,

Steps to reproduce the bug

1.go to conatct page
2.enter number in name section

What was the expected result?

expect the result is that it will only accept the letters not numbers

Put here any screenshots or videos (optional)

image

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

Please assign this issue to me.I will fix this issue, I will validate section of name by writing js code in it,which show alert or pop up when someone enter numbers in place of letters in name section

Add a Favicon to cosmoXplore Website

Title:

Add Logo to Address Bar of Website

Describe the feature:

A logo should be added to the address bar of the website to enhance its branding and visual identity. This logo will appear next to the website's URL in the browser's address bar and tabs, providing a consistent visual representation of the website to users.

Current Behavior:

The website currently lacks a logo in the address bar, as depicted in the screenshot below:

image

I'm willing to assist with this feature. If you agree with this proposal, I would be happy to collaborate and help make this enhancement a reality.

Looking forward to your feedback and the opportunity to contribute to the improvement of the cosmoXplore website.

Best regards,
Sharitha G
GSSOC'24 Contributor

Enhancement Proposal: Button Styling in Hero Section

Describe the feature

The proposed feature involves enhancing the button in the hero section of the website to better align with the overall theme and aesthetics. This could include adjustments to the button's color, shape, text to ensure it seamlessly integrates with the website's design language

Current Behavior:

image

It should be implemented because

The hero section serves as the first impression for visitors to the website, and the button plays a crucial role in guiding user actions. By refining the button styling to match the theme of the website, we can create a more cohesive and visually appealing user experience.

Additional context

No response

Would you like to work on this issue?

Yes

Add issues

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you must add the tag gssoc, Level 1, Level 2, Level 3 good first issue etc.
How we cacluclate the Scores on Leaderboard: Every PR one point
Level 1: 10 points
Level 2: 25 points
Level 3: 45 points
Try to add some documentation issues as well it would be easy for beginner contributor to explore opensource through your repo.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.
Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

Update Font Style and Color in Accordance with Website Them

Describe the feature

We aim to introduce a feature that automatically adjusts font style and color throughout the website based on the chosen theme. This implementation will ensure a consistent and visually appealing experience for users across different sections of the site.

It should be implemented because

This feature is essential for enhancing accessibility and readability while maintaining design coherence. By dynamically adapting font styles and colors to match the website theme, we can improve user experience and offer better customization options.

Additional context

apply corresponding font styles and colors dynamically. This may involve modifications to existing CSS stylesheets and the introduction of new variables or classes.

hello @pawas108ram @ ,
Please assign me this issue, after solving this issue your website looks better.

Would you like to work on this issue?

Yes

Adding chat bot

Describe the feature

a button on screen will open a chat bot to interact the user with

It should be implemented because

As space is a very vast topic, one can have/get a doubt/query when he/she browses the web app and it can be cleared right away by the chat bot
please assign me this issue under gssoc 2024

Additional context

No response

Would you like to work on this issue?

Yes

Floating Animation On Images

###The feature

On Hovering on the images in hero section ,mars rover section and contact section they float.

At present only box-shadow is appearing on hovering,by adding the floating animation it matches the theme of the project "cosmoXplore" .

I am very excited to start my open source contribution journey.So,I am requesting to assign this issue to me as I am very interested to work on this.

Sticky NavBar

Describe the feature

NavBar displayed in the site is not fixed at the top of the page. So, we have to make it stick at the top of the page, so, even though we navigate across the sections, it is still on top

It should be implemented because

It will allow us to navigate to any section of the page from anywhere in the page.

Additional context

For example, if we have to reach the Mars page from the Contact page, we need to scroll up at present, but with sticky NavBar, we could reach the section with just a click

Would you like to work on this issue?

Yes

enter date by selecting from calender

Describe the feature

I want to improve the input format of date like this

image

It should be implemented because

looks good

Additional context

No response

Would you like to work on this issue?

Yes

Adding Animation

Describe the feature

An animation on the image of your landing page which will keep on moving and will make you page look more Appealing

It should be implemented because

No response

Additional context

Could you plz assign this issue to me under GSSOC'24

Would you like to work on this issue?

Yes

Improve Navigation-Menu and Typewriter Effect

Hi @PranavBarthwal

I've been following up with the progress of cosmoXplore and I'm impressed with what you've accomplished so far!
I believe I can offer valuable insights and contributions to help elevate the user experience. For that I have improved the Navigation Menu and the typewriter Effect.

Opened a pull request for the same.

Looking forward to the opportunity to work together on this project.

Best regards,
Shaurya
(GSSOC Contributor)

Mars Weather

Using the InSight: Mars Weather Service API, add a feature that allows users to view the weather on Mars.

Enter datebox broken

Describe your issue

When you reduce the screen size the input box and enter button both get separated.

Steps to reproduce the bug

  1. home page

What was the expected result?

input box and button must me joined together.

Put here any screenshots or videos (optional)

tg

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

I will place both input box and enter button inside a separate div and apply some css to fix it.
please assign me this task and label this as GSSoC'24.
tg

[Feature]: New Separate Page for Astronomy Picture of The Day

Describe the feature

This feature involves creating a dedicated page within the application for displaying the Astronomy Picture of The Day (APOTD). The page will showcase stunning astronomical images along with accompanying descriptions, providing users with a daily dose of awe-inspiring content related to space and astronomy.

It should be implemented because

  1. Educational Value: Providing users with access to APOTD content offers a valuable educational opportunity, allowing them to learn about various celestial phenomena, space missions, and astronomical discoveries.
  2. Engagement: A dedicated APOTD page will enhance user engagement by offering captivating and informative content that appeals to individuals interested in astronomy and space exploration.
  3. Interest Diversification: Integrating APOTD content diversifies the application's content offerings, catering to the interests of users who have a passion for astronomy and related topics.
  4. Community Building: The APOTD page can serve as a focal point for discussions and interactions among users who share a common interest in astronomy, fostering a sense of community within the application.
  5. Enhanced User Experience: By curating high-quality astronomical images and informative descriptions, the APOTD page enriches the user experience and adds value to the application.

Additional context

The addition of a separate page for Astronomy Picture of The Day enhances the application's content offerings and provides users with a unique and enriching experience. By incorporating APOTD content, the application can attract and retain users interested in astronomy, while also promoting curiosity, learning, and discovery.

Would you like to work on this issue?

Yes

Download image option

Describe the feature

I think there should be a feature in this site to download the generated image after entering the date.

It should be implemented because

so that users can share the image

Additional context

No response

Would you like to work on this issue?

None

Adding near earth Asteroid information using NASA API

Describe the feature

This will add a separate section in the website which will display the information about the Near Earth Asteroids (Asteroids - NeoWs).

The details may include:-

  • name
  • estimated min/max diameter
  • is potential hazard?
  • velocities, etc.

It should be implemented because

This will add additional data about the Asteroids which also coincides with this niche.

Additional context

@PranavBarthwal Can you please assign me this issue under GSSoC'24 so i can work on this.
Thank you!

Would you like to work on this issue?

Yes

Add FAQ page

Describe the feature

I want to FAQ page to the website

It should be implemented because

No response

Additional context

Please assign me this issue under GSSOC'24

Would you like to work on this issue?

Yes

Add social media Icons

Describe the feature

image

Want to add facebook , instagram , twitter , linkin social accounts at the bottom

It should be implemented because

people will able to reach the Project admin

Additional context

Please assign me this issue under GSSOC'24

Would you like to work on this issue?

Yes

add favicon to the website

Describe the feature

A favicon is a small image typically displayed in the browser tab next to the title of the webpage.

It should be implemented because

it adds to Brand Recognition, user experience.

Additional context

No response

Would you like to work on this issue?

None

Learn.md

Learn repos should have a LEARN.md file to teach student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Bug: Broken image in Astronomy Picture of the Day Section

Describe your issue

The image in the Astronomy Picture of the Day Section appears to be broken and doesn't display.

Steps to reproduce the bug

  1. Go to https://pranavbarthwal.github.io/cosmoXplore/
  2. Scroll down to Astronomy Picture of the Day section

What was the expected result?

No response

Put here any screenshots or videos (optional)

image

Would you like to work on this issue?

Yes

How will you fix this? (Only if you want to work on this issue)

I will make the necessary changes to the code to fix the bug

Footer Page Styling & Redirection Issue

Hi,

I hope this message finds you well. I've been impressed with the CosmoXplore website. However, I noticed an issue regarding the page redirection in the footer while clicking the logo that I believe needs attention. Additionally, I would like to offer my assistance in styling the footer to enhance its visual appeal and usability.

Issue Description:

When clicking the logo in the footer, the page redirection behaves unexpectedly, redirection to the wrong page.

Expected Behavior:

The logo in the footer should redirect users to the homepage.

Current Behavior:

Upon clicking the logo in the footer, the redirection leads to a 404 error page.

In addition to addressing this issue, I would like to contribute by styling the footer to improve its overall appearance and user experience.

Would it be possible for you to assign me this issue? I'm eager to collaborate and help improve the CosmoXplore website.

Looking forward to your response.

Best regards,
Sharitha G
(GSSOC'24 Contributor)

[feature] Adding a smooth scrolling effect

Describe the feature

A smooth scrolling effect would take the UI to next level by using locomotive scroll it is a powerfull javascript liberary for smooth scrolling functionality.

It should be implemented because

It should be implemented to improve the UI of the website also it would ensure lag free scrolling effect to users

Additional context

I would love to add this feature to this lovely website

Would you like to work on this issue?

Yes

Redesigning the Complete navbar

Describe the feature

The navbar needs to be redesigned so that it will blend in more properly and looks minimal and complementing the Clean overall look of the site.

It should be implemented because

The current navbar has no special hover effects and as well as it needs a bit of text redesigning and a more design elements.

Additional context

@PranavBarthwal Can you please assign me this issue under GSSoC'24. I will make the navbar look more awesome and well organized.

Thank You!

Would you like to work on this issue?

Yes

To propose automatic date suggestions within the text field for selecting dates.

Describe the feature

To incorporate date suggestions through date tags in HTML, rather than requiring users to manually input dates in the format yyyy-mm-dd

It should be implemented because

If we add this feature, it will greatly enhance the user experience.

Additional context

Screenshot 2024-05-11 135618

Would you like to work on this issue?

Yes

Add Code of Conduct file

Currently, the repository lacks a Code of Conduct file, which is an essential component for fostering a healthy and inclusive open-source community. A Code of Conduct serves as a guideline for expected behaviour, ensuring that contributors and participants feel safe, respected, and valued within our community space.

Please assign this issue to me.

Girlscript Summer of Code Introduction/Tracking

👋 Hi @PranavBarthwal ,

I am Sanjay, program Manager Girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you :octocat:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.