8000 GitHub - LuizFlaviodoCarmoRocha/wallpaper: This repository hosts a React + TypeScript application that displays NASA's Astronomy Picture of the Day in a full-screen carousel. 🌌 You can easily set it up by running `npm install` and `npm run dev` to start the development server. πŸ™
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

This repository hosts a React + TypeScript application that displays NASA's Astronomy Picture of the Day in a full-screen carousel. 🌌 You can easily set it up by running `npm install` and `npm run dev` to start the development server. πŸ™

License

Notifications You must be signed in to change notification settings

LuizFlaviodoCarmoRocha/wallpaper

Repository files navigation

🌌 NASA APOD Wallpaper Carousel

GitHub release GitHub issues GitHub stars

Welcome to the NASA APOD Wallpaper Carousel! This React TypeScript application displays NASA's Astronomy Picture of the Day (APOD) in a beautiful carousel format. You can deploy it using AWS CloudFront for a seamless experience.

Table of Contents

Features

  • Daily Updates: Get the latest astronomy picture every day.
  • Responsive Design: Works well on both desktop and mobile devices.
  • AWS Deployment: Utilizes AWS CloudFront for fast content delivery.
  • Customizable Carousel: Users can navigate through images easily.
  • Open Source: Contribute to the project and help improve it.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • TypeScript: A superset of JavaScript that adds static types.
  • Vite: A fast build tool for modern web applications.
  • AWS S3: For storing static assets.
  • AWS CloudFront: For content delivery.
  • CSS: For styling the application.

Installation

To set up the project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/LuizFlaviodoCarmoRocha/wallpaper.git
  2. Navigate into the project directory:

    cd wallpaper
  3. Install the dependencies:

    npm install
  4. Start the development server:

    npm run dev

Visit http://localhost:3000 in your browser to see the application in action.

Usage

The application displays NASA's Astronomy Picture of the Day. Users can navigate through images using the carousel controls. Each image comes with a title and a brief description.

Carousel Controls

  • Next: Move to the next image.
  • Previous: Move to the previous image.
  • Pause/Play: Stop or start the automatic slideshow.

Customization

You can customize the carousel's appearance and behavior by modifying the relevant components in the src directory.

Deployment

To deploy the application, you can use AWS CloudFront. Here are the steps:

  1. Build the application:

    npm run build
  2. Upload the contents of the dist folder to an S3 bucket.

  3. Set up CloudFront to serve the S3 bucket.

  4. Access your deployed application via the CloudFront URL.

For a detailed guide on deploying with AWS, refer to the AWS documentation.

Contributing

We welcome contributions! If you want to help improve this project, please follow these steps:

  1. Fork the repository.

  2. Create a new branch:

    git checkout -b feature/YourFeatureName
  3. Make your changes and commit them:

    git commit -m "Add your message here"
  4. Push to your fork:

    git push origin feature/YourFeatureName
  5. Create a pull request.

Please ensure that your code follows the project's style guidelines.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Links

For the latest releases, visit the Releases section. You can download the latest version and execute it to explore the features.

For any issues or feature requests, check the Issues section.


Thank you for checking out the NASA APOD Wallpaper Carousel! We hope you enjoy exploring the wonders of astronomy through this application. If you have any questions or feedback, feel free to reach out.

About

This repository hosts a React + TypeScript application that displays NASA's Astronomy Picture of the Day in a full-screen carousel. 🌌 You can easily set it up by running `npm install` and `npm run dev` to start the development server. πŸ™

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  
0