/Brooklyn-Stoop_Sale

Codedex Hackathon Brooklyn Stoop Sale Invitation

Primary LanguageCSS

Brooklyn Stoop Sale Invitation

Welcome to the Brooklyn Stoop Sale Invitation project! This project was developed as part of the Codedex Summer July 11 Hackathon. The goal is to create an interactive and engaging web application that serves as an invitation to a Brooklyn stoop sale event.

Live Preview

Check out the live preview of the Brooklyn Stoop Sale Invitation: Brooklyn Stoop Sale Invitation

Table of Contents

Overview

This project is designed to showcase a modern, interactive invitation for a Brooklyn stoop sale event. The application is built using React and incorporates various features such as music playback, animations, real-time date display, an interactive map, and social media sharing options.

Features

  • Interactive Design: Engaging UI with animations and music playback.
  • Event Details: Display of date, time, and location of the stoop sale.
  • Interactive Map: Integration with Google Maps API to show the event location.
  • Social Media Sharing: Easy sharing of the invitation via social media platforms.
  • Responsive Layout: Mobile-friendly design for a seamless experience across devices.

Technologies Used

  • React: JavaScript library for building user interfaces.
  • HTML/CSS: Markup and styling.
  • JavaScript: Logic and interactivity.
  • Google Maps API: For displaying the event location.
  • Vercel: For deployment.

Installation

To run this project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/sufyanhabib/Brooklyn-Stoop_Sale.git
  1. Navigate to the project directory:
cd Brooklyn-Stoop_Sale
  1. Install dependencies:
npm install
  1. Start the development server:
npm start

Usage

Once the development server is running, you can access the application in your browser at http://localhost:3000.

Project Structure

├── Data
│   └── afroStyles.js
├── assets
├── components
│   ├── Card.jsx
│   ├── Carousel.jsx
│   ├── Footer.jsx
│   ├── Invitation.jsx
│   ├── NavBar.jsx
│   ├── card.css
│   ├── carousel.css
│   └── invitation.css
├── img
├── pages
│   ├── Contact.jsx
│   ├── Home.jsx
│   └── Sales.jsx
├── App.css
├── App.jsx
├── index.css
└── main.jsx

Components

  • Card.jsx: Component for displaying individual cards with sale items.
  • Carousel.jsx: Image carousel for showcasing items or event highlights.
  • Footer.jsx: Footer component with additional links and information.
  • Invitation.jsx: Main invitation component with event details.
  • NavBar.jsx: Navigation bar component for easy site navigation.

Pages

  • Home.jsx: Home page of the application.
  • Contact.jsx: Contact information page.
  • Sales.jsx: Page showcasing items for sale.

Styles

  • card.css: Styles for the card component.
  • carousel.css: Styles for the carousel component.
  • invitation.css: Styles for the invitation component.
  • Contact.css: Styles for the contact page.

Screenshots

BROOKLYN-STOOP-SALE -Home BROOKLYN-STOOP-SALE-sales BROOKLYN-STOOP-SALE-CONTACT

Contributing

Contributions are welcome! If you would like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact